Contact Form, how to format like the demo?

Hi,

Just installed contact form widget, however having an issue on replicating the demo format, currently it looks awful. Can please help the formatting or styling

  • Vinod Dalvi
    • WP Unicorn

    Hi @joel,

    Thank you for your reply and granting us support access.

    You can make your contact form display same like demo format shown on this page https://premium.wpmudev.org/project/contact-widget/ by adding following CSS code in the “Custom CSS:” textarea of Contact Form widget and enabling Compact mode option of the widget.

    .wp-contact-form .text, .wp-contact-form textarea {
    border: 1px solid #d8d8d8;
    margin-top: 5px;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    font-size: 15px;
    color: #ccc;
    }
    .wp-contact-form input.button {
    border-radius: 5px;
    border: 1px solid #d8d8d8;
    padding: 6px 10px;
    font-weight: bold;
    color: #7D7C7C;
    font-size: 14px;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    }

    I have added this CSS code in your site for you, check it and let me know if you have any issue.

    Best Regards,

    Vinod Dalvi

  • Vinod Dalvi
    • WP Unicorn

    Hi @joel,

    Thank you for your reply.

    I think you may have forgotten to saved the css code :slight_smile:, anyway I reloaded it and it is as expected now.

    No i didn’t forget, actually i have added it in the Custom CSS option of Contact form widget but now you have again added it using Simple Custom CSS plugin so currently it is added twice. ( See attached screenshots )

    btw, you might want to see it on firefox, its behaving a bit different though

    I have checked it in firefox on my test site and it’s working fine, i also checked your site and found due to some reason the class “cw-compact_form” is not getting added to the contact form form tag, may be due to plugin / theme conflict.

    To resolve this issue could you please try adding following code in the functions.php file of your child theme

    function add_compact_class(){?>
    <script type='text/javascript'>
    jQuery(document).ready(function(){
    jQuery('form.wp-contact-form').addClass('cw-compact_form');
    });
    </script>
    <?php }
    add_action('wp_head', 'add_compact_class');

    Also please grant me again the support staff access so that i can troubleshoot the issue further.

    Regards,

    Vinod Dalvi

  • Joel
    • Design Lord, Child of Thor

    Hi Vinod,

    Access granted. Yesterday the form looks like the demo in safari when I added the code in simple css but it was as displayed in Firefox and chrome as Patrick’s screen shot.

    Checked just now, form is looks the same in safari. Back to square one unfortunately….

  • Joel
    • Design Lord, Child of Thor

    Btw this how it looks like on iPad

    If it’s not too much work, can we just put the text box below the labels?

    If it’s conflicting with theme, just let me know. I can just remove it entirely from the site.

  • Vinod Dalvi
    • WP Unicorn

    Hi @joel,

    It’s working on my test site fine but not yours as you have said it’s working fine on certain categories but not others so i think this may be due to other plugin / theme conflict with Contact Widget plugin.

    Also when i visited your site, it’s working fine on my Windows chrome browser but not firefox.

    You can just try on your development site deactivating all other plugins and using default WordPress theme like Twenty Thirteen as displayed in the flowchart on the following page to know which theme/ plugin is conflicting if any.

    https://premium.wpmudev.org/manuals/getting-support/

    If it’s not too much work, can we just put the text box below the labels?

    Yes you can achieve this by using the following CSS code along with previous CSS code in your site.

    form.wp-contact-form label,
    .wp-contact-form .text,
    .wp-contact-form textarea,
    .wp-contact-form input.button{
    clear: both;
    float: left;
    }

    Make sure to disable Compact mode and use the above CSS code using Simple Custom CSS plugin instead of Contact Form Custom CSS option as it’s conflicting with the plugin / theme you are using.

    Best Regards,

    Vinod Dalvi

  • Joel
    • Design Lord, Child of Thor

    Hi @vinod Dalvi

    It’s working on my test site fine but not yours as you have said it’s working fine on certain categories but not others so i think this may be due to other plugin / theme conflict with Contact Widget plugin.

    Did try to disable all plug in except contact form, but still no change.

    I then reactivated all the plugin still same thing, so no conflict in there.

    I reset the contact form plugin, then it works displays correctly on all browsers. Not sure exactly what is the issue as I did not alter any code. You might want to investigate further as other users may be experiencing same issue.

    Thanks for all the help, appreciate very it much

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.