New to the community? Start here

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

Sun, 18 May 2014 5:28:27

PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Hello there Joel,

Thanks for posting on the forums.

Can you please provide me a link to your site where I can see that widget in action and help you style that using CSS ?

Please advise.

Cheers, PC
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
Hi Mac,

Here is the link

http://siliwangimarine.com/radar/

Cheers!
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
anybody ?

Vinod Dalvi

WP Unicorn

1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29

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://wpmudev.com/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

Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
Hi Vinod,

Apologies for the late reply

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

Cheers!!!
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
btw, you might want to see it on firefox, its behaving a bit different though
Patrick Cohen
- Technical Docs Wrangler
- 6,978 pts: Hero points 20,997 pts: Rep. points LEVEL 30
Hi there @Joel

I hope you are well today!

I just checked your site in both Firefox and Chrome, and your form looks identical in both browsers for me (screenshot).

Is this not what you see?
Vinod Dalvi
- WP Unicorn
- 1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29
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
Vinod Dalvi
- WP Unicorn
- 1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29
Here are the screenshots.
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
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
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
Vinod,

I remove the code from simple css, this how it looks now

Safari

Firefox/Chrome
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
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.
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
Also on certain categories it looks fine in firefox and chrome but on other categories it behaves differently. You can take a look at what I mean by going through each of search by type/brand.
Vinod Dalvi
- WP Unicorn
- 1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29
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://wpmudev.com/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
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
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
Vinod Dalvi
- WP Unicorn
- 1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29
Hi @Joel,

That’s great news! Glad it’s working for you now :slight_smile:

Have you reset the contact form widget options or deactivated and reactivated the plugin?

Regards,

Vinod Dalvi
Joel
- Design Lord, Child of Thor
- 59 pts: Hero points 67 pts: Rep. points LEVEL 3
Hi @Vinod Dalvi

Just activate and deactivate
Vinod Dalvi
- WP Unicorn
- 1,565 pts: Hero points 17,482 pts: Rep. points LEVEL 29
Hi @Joel,

Thank you for letting us that know, it will definitely help others having same problem.

Have a great day!

Cheers,

Vinod Dalvi

Ready to get started?

How do you rate me?

Thank you for rating your experience!