The Lab WordPress Contact Form 7 – Pure CSS Theme/Skin

Contact Form 7 CSS Skin

Here is a bit of css to override the default styling of this flexible form plugin.

08.07.12
WordPress Contact Form 7 – Pure CSS Theme/Skin

Contact Form 7 is a super flexible form generator that we use on nearly every site but the default styling is non existent. Here is some CSS snippets to give you a great base for customising your forms (or if you just want them to look cleaner).

 

Add this to your theme’s CSS file

.wpcf7 input, .wpcf7 textarea {
width: 90%;
padding: 10px;
color: #8e8e8e;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
border: solid 1px #9f9f9f;
box-shadow: inset 2px 2px 8px #bababa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.wpcf7 .wpcf7-list-item {
padding-left: 0;
margin-left: 0;
margin-right: 25px;
}
.wpcf7 .wpcf7-list-item input {
border: none;
padding-left: 0;
margin-left: 0;
}
.wpcf7 select {
outline: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active {
background: #ebf7f5;
outline: none;
}
.wpcf7 input.wpcf7-submit {
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
transition: 0;
border: none;
position: relative;
color: #fff;
text-shadow: 1px -2px 0px black;
text-transform: uppercase;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
padding-top: 11px;
padding-bottom: 10px;
padding-left: 35px;
padding-right: 35px;
/* Gradient background */
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000));
background: -moz-linear-gradient(top, #4d1b5c, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
-ms-filter: "
progid: DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)"
;
/* Drop Shadow */
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* On Hover */
.wpcf7 input.wpcf7-submit:hover {
cursor: pointer;
text-decoration: none;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80));
background: -moz-linear-gradient(top, #4d1b5c, #6d2f80);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
}
/* On Click */
.wpcf7 input.wpcf7-submit:active {
top: 1px;
color: #d8c6e2;
background-color: #000000;
background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c));
background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* CF7 Messages */
.wpcf7 .wpcf7-validation-errors {
border: none;
background-color: #f4ae46;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ok {
border: none;
background-color: #7ad33f;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ng {
border: none;
background-color: #cf2d38;
margin: 0;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: white;
}
.wpcf7 span.wpcf7-not-valid-tip {
border: none;
background-color: #cf2d38;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
width: 180px;
color: white;
/* Drop Shadow */
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.wpcf7-form .fleft {
float: left;
}
.wpcf7-form .mright20 {
margin-right: 20px;
}
.wpcf7-form .mright40 {
margin-right: 40px;
}
.wpcf7-form .clear {
clear: both;
}

 

How about autofocus?

There isn’t an option for this as yet. But it can be done with a line of JQuery.

jQuery('.wpcf7-text:first').focus();

 

Loading GIF

You may also want to change the loading GIF, however as it’s embedded in the code you can’t change it with CSS.

You can create a custom loading gif at ajaxload.info or preloaders.net then add the below snippet into your functions.php file.

/* Custom AJAX Loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
return get_bloginfo('stylesheet_directory') . 'https://d14pjowmeoxkey.cloudfront.net/images/ajax-loader.gif';
}

Dean Oakley

Written by Dean Oakley

Dean founded Thrive Digital in 2006 and has worked in the design and development space ever since. He received 1st Class Honours in a Bachelor of IT and oversees all technical aspects of our projects.

Join the conversation

I used the above successfully until I went back to my theme builder and added a sidebar on the right. I updated the style.css to contain the override code for WP Contact Form. Activated the theme. Then the nice effect your code made went away. Since, I have gone back to the full sheet with no sidebar that shows your style. Have you noticed that problem?

Also, do you know of a way to nudge the send button over so it centers properly?

Thanks,

Carol

Dean says:

Hi Carol!

Looks like it’s working for you.

I would suggest not centering it though. It looks better left aligned. If you look at the code there is hidden loading gif next to the button. That is why it’s not right in the center.

This really transforms the contact form 7 default look – great job – have applied this to one of our client websites. Thanks :)

Celeste says:

Hi, there! Sooo close….!

I have the line-height set to 200% for this site and the text on this page “Your Name”, etc) is inheriting that. How can I override it?

If I try to add any html to the contact page (Your Name (required)) I get a big ol error: Warning: Cannot modify header information)

I would be so grateful for any assistance!

Carol Magalhães says:

Thank you! Works like a charm ;)

Victor says:

Hey dude!

I’ve been looking all over the internet for someone to help me with this form.

You can see the form on my website next to the navbar, it’s ugly and basic I know, can you help me spice this one up? The form is a “Call me” in Swedish.

Bests! Please respond to my mail.

Thank you, this is exactly what I needed.

Ben says:

Thanks, this really spiced up my page!

Drew Jensen says:

I’m having trouble with the first two inputs being side by side. All inputs are stacked and I’m not sure why :/

Dean says:

Hi Drew. You would need to float the inputs left and right. Something like this in your form settings

City
[text city 32/]

State
[text state 32/]

Alan says:

Would you send me the contents of the field ‘Form” in the contact form 7 admin area? I would like to see exactly how you made the fields side by side.
Your example above did not help me.

thanks
AE

Dean says:

I’ve fixed the code sample. See above.

Alan says:

Thanks for the quick response. Now I have more time to spend reading your site.

AWESOME!

AE

Stow says:

It’s a very nice CF7 makeover, thanks for this!
But why didn’t you use css to style the form, as opposite to use images?

I mean, there are tons of css button maker out there and you’d have a smoother finish and better loading times (arguable).

Thanks anyway, there’s a good chance I might use this.

Dean says:

Hi Stow. Yes that is on the todo list :)

Dean says:

There is a new theme up now. Please check it out.

Chris says:

Very clean form skin. Thank you! I’m trying to make a dropdown menu I have on my form match the style of this. Any tips on how to do it?

Dean says:

Thanks. I’ll look at adding a styled dropdown soon.

Chris says:

I spent some time on it today and got it working to match your theme. Here’s what I came up with:

.wpcf7 select {
padding:8px;
width: 620px;
color: #8e8e8e;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;

border: solid 1px #9f9f9f;

box-shadow: inset 2px 2px 8px #bababa;

}

The width will change based on your needs, but this at least puts on the border, shadow, font families & colors to match. Hope this helps. Thanks again for such a great skin.

Eoin Redmond says:

Thanks for putting this in the public domain, saved us some work!

Eoin
Istech Web Design

Ashley says:

What about putting this in a side bar.. for some reason, I had to put the CSS in the text box in the widget.. but I want to bring the width of the inputs at /30 like the contact form does.. how would I do that?

Dean says:

There is no width set. Can you post a link to demonstrate your problem?

Ankush says:

How can I set a background for complete form. I tried to edit CSS file of contact form-7 but wasnt able to make changes.

Dean says:

You want to change the background color?

Hugh says:

I’d love to know how to change the background colour.

Thanks by the way, this has been an amazing help!!!

Dean says:

Hi Hugh. Background colour of what?

Hugh says:

The background of the area behind the boxes where contact details are entered. I’m a newbie so excuse me if I’m asking a dumb question.

I thought it would be good to highlight the section and make it look like more of a ‘contact form’.

Dean says:

No worries. It’s pretty easy, you would need to add some styling to the form wrapper. Like below:

div.wpcf7{
background-color: yellow;
padding: 30px;
}

Hugh says:

Awesome. Thankyou. :-)

mark Fry says:

Brilliant, however button is aligned to the right. Anyway I can move to the left? Please

Dean says:

You theme must be aligning to the right. Can you post a link?

Messaink says:

Worked great!
Thanks!!!

David says:

Hi nice clean looking CSS styling however I have an issue in that when using. ‘Really Simple CAPTCHA’ version #1.5 it does not display the captcha image, it displays the captcha answer area though.

Any ideas, regards David

Dean says:

Hi David. I think you are missing the input field tag. I would recommend spam filtering with Akismet. http://contactform7.com/spam-filtering-with-akismet/

john says:

thank you for this! the default styles are terrible

Étien' says:

It works very well !!!

Thanks for sharing !!

Ray says:

Thanks for the nice CF7 makeover.
I really need to know how can I do to put fields side by side in 2 columns (just as you did with the fields “Your Name” and “Your Email”).
Thanks anyway.

Cassie says:

What’s up, every time i used to check website posts here early in the dawn, because i enjoy to gain knowledge of more and more.

George says:

This is a great looking skin and i’d love to use it, but i’m having some issues getting it working at all. Note: i’m very new to CSS and WordPress, so assume I know almost nothing.

I pasted the CSS code above into my theme’s style.css file, but the contact form just looks like the stock Contact Form 7 style. Is there something else I need to do to get it looking like the one on this page?

I was able to get this other contact form 7 style going — http://wpsitereview.net/add-custom-css-styles-to-contact-form-7/ so I’m assuming my theme shouldn’t conflict with this particular skin.

Any help would be greatly appreciated.

Sina says:

Having the same problem. Any solution?

Bernard says:

hello,
I use WP 3.6.1 with the theme Avada 3.1.1 ThemeForest.
Using the plugin “contact form 7” version 3.5.2, and I can not make the skin of your demo.
Your CSS has been copied into the child theme style.css file.
The form used is:

Your Name (required)
[text * your-name placeholder]

Your Email (required)
[email * your-email placeholder]

Your Subject
[text your-subject “Subject”]

Your post
[textarea your-post]

[submit “Send Message”]

The website address is: siaepac2.capversleweb.com/contact/
Thank you for your help.

Dean says:

Hi Bernard. Looks like you are almost there. Can you remove width: 28%; from line 1431 #comment-input input,.wpcf7-form .wpcf7-text,.wpcf7-form .wpcf7-quiz,.wpcf7-form .wpcf7-number{

And add white-space: nowrap; to line 653 .wpcf7 span.wpcf7-not-valid-tip

Bernard says:

thank you,
it works correctly.

Bronwyn says:

Trying to use wp7 but format not working

Alex says:

How to make the width of name+mail equal to subject/message?

Dean says:

Hi ALex. You can specify width with .wpcf7 textarea{…

Andy says:

Hi,

I like your styling. But how do you have two areas on the same line?

And how can I adjust the radio or checkbox so the marker is to the left of the text and to make it a little more boxlike?

Thanks!

Andy says:

Hi Dean,

Thanks for that. I will work on the float.

Any ideas on the radio? I think I have seen checkboxes always before the text before, but on the CF7 form the checkboxes come at the end of the question, which makes sense for readability, but not for aesthetics.

I would like the checkboxes in a line, at the start of the paragraph.

Much appreciated.
Andy

Tim says:

Loaded the css, not sure I understand what images to upload?

Thanks,

Tim

Sonics says:

Hi, Thanks for the information but I am having problem in giving style to the drop down menu, the tag. the spam tag above it is attached to the top of the input and is not coming down in the center. Can you please help me regarding this matter.

Thanks,
Sonics

Dean says:

Can you post a link so I can see the problem?

ali says:

Hi
I am a newbie here. really very good job. but i dont understand where to add jQuery line?

Thanks in advance
Ali

Dean says:

Hi Ali. You put this in your document ready function. See here http://learn.jquery.com/using-jquery-core/document-ready/

Leah says:

Hi!
Thanks for the form, I really like it. Only thing is mine is not spacing like yours, it looks very crunched together. Can you help me?

Thanks! Leah

Dean says:

Hi Leah. In your css file, line 149 you have the height set to 50px and a negative margin for your textarea.

Leah says:

Hi Dean,
I posted a reply a few days ago. I know very little coding but I see my message box isnt right from left to right and my fields won’t space. Please help. Thanks!

Dean says:

Did you try adding my code?

Leah says:

The code you gave me is for the subscribe form on my home page, which is not a contact 7 form. Your custom form is on my Let’s Chat page.

Dean says:

It was for the contact form. If it conflicts with your other form you need to be more specific in your css.

Leah says:

I’m not sure what to do but thanks for your reply.

Leah says:

Can someone please help me with my spacing, message box cutting off from left and only the message box width? I’ve tried the best to my coding knowledge. Hours of wasted time.

Thanks!

Leah says:

I figured out the alignment, thanks for you assistance. How do I give my message box a default width so it doesn’t have to be dragged to fit?

Leah says:

I just figured it out, thanks Dean for teaching me coding. Still not sure how to space the boxes, top to bottom. Can you assist?

Dean says:

Hi Leah, what do you mean top to bottom?

See the code for setting the textarea size here http://contactform7.com/text-fields/

Leah says:

Hi Dean, I mean the amount of space under each text box. Mine is so close together.

Dean says:

Hi Leah. You want to add some margin to the bottom of the input field

.wpcf7 input{ margin-bottom: 20px; }

Leah says:

Thanks Dean..you’re awesome!

Jay says:

Hi. This is a great improvement to the non-styled CF7 layout. Apologies in advance for being new to all this.

I added the css to my theme’s main css file but none of the styling – except for the submit button – is visible on my site form. Do I also need to make changes to the form itself in CF7? I’m also interested in having several fields display horizontally on desktop displays and having all the fields stacked on mobile displays. Does this css make that possible?

Thanks!

Here is my form html:

First Name (required)
[text* your-first-name class:text]

Last Name (required)
[text* your-last-name class:text]

Email Address (required)
[email* your-email class:text]

Company (required)
[text* MCTAG-MMERGE4 class:text]

Business Type
[select MCTAG-MMERGE10 class:select include_blank “Distributor” “Franchise” “Installer” “Interior Designer ” “Retailer” “Retail Fabricator” “Wholesale Fabricator” “Other”]

Country
[select MCTAG-MMERGE9 class:select include_blank data:countries]

Message
[textarea message class:text]

[acceptance mc-subscribe default:on] I want to receive SI’s monthly Product News Email!

[hidden MCTAG-MMERGE11 id:Lead_Source “Web”]

[submit “Send” class:button]

Dean says:

Hi Jay. Your theme may override the theme styles. See this comment re: floating fields https://thriveweb.com.au/the-lab/wordpress-contact-form-7-theme/#comment-22573

Tiffany says:

Hi there! Thanks so much for this! :) I managed to change the colors within the style sheet, but I’m not sure how to change the font. Can you help me? Thank you in advance.
http://www.tiffanyloerablog.com/contact

Dean says:

Hi Tiffany

Which fonts? You would need to use CSS to select fonts available in your theme or webfonts. Otherwise you may need to install these in your header.

See font-family:Arial, Helvetica, sans-serif; in the first selector.

Tiffany says:

Hi! Thanks for your quick response :) I am actually wanting to use the
font “Antrokas” for the individual fields (your name, your email, etc.).
This is a font that I purchased and uploaded to my wordpress site using the
plugin “Use any font.” I was able to assign this font to other sections
of my site. Since the Contact Form is a plugin itself, I wasn’t sure how
to apply. I am not very familiar with CSS and had to play around for a
good while before I figured out the field to change the HTML color codes. Any insight would be much appreciated. :)

Dean says:

I’m not sure about that plugin but using Google Fonts is very easy. https://www.google.com/fonts https://developers.google.com/fonts/docs/getting_started

Basically you need to add a script in your theme header and then update the css I mentioned earlier.

Chris says:

Im not sure why this didnt have any affect on my site???

Dean says:

Hi Chris. Looks like it did. You need to refresh your browser.

Eric says:

Hi, i was wondering, is it by any chance possible to center the text within a text area, I styled my form in such a way that all the input boxes are centered, the problem which now arises is that despite the fields being centered the text the client types within the field is still right aligned. Any help would be greatly appreciated.

Dean says:

Hi Eric. Just add text-align: center; to the first selector.


.wpcf7 input,
.wpcf7 textarea{
text-align: center;
...

Stephen says:

Great work, Dean! Much appreciate all your help.
My question is about the autofocus. It works, but loads the page to the start of form rather than top of page. Any way to correct this???

Dean says:

Not sure what you mean sorry!

Marcus says:

Nice work and thank you for sharing with the rest of us!

Jack says:

Great work on this contact form, I have followed your instructions and got the styling just like yours. I have one issue though, when I added the code to the Contact Form 7 settings to have the top 2 fields side by side rather than above and below each other I got a spacing issue. I have tried messing around with the css and the settings in CF7 but I cannot seem to fix it. If you view the url I added in the website column you will see the Name and Email fields have a large space in-between them, I can’t figure out if this is padding or margin. It needs fixing and I would really appreciate some help.

Hope to hear from you soon :-)

Dean says:

Hi Jake. Try increasing the % width of your floats.

Jack says:

Hi Dean, I have been trying for quite a while now to change the size of the line which contains the name and email input fields on my form. The CF7 link that you previously sent me doesn’t show any examples of where to add this size command and I don’t know where to put it.

Is there any chance you could give me and the other readers an example of where toput the size command, e.g.

Your Name (required)
[text* your-name size:50″]

You can see I have entered the size command where I thought it went, but this has no effect on my form at the front end view. I can’t seem to be able to get all the fields aligned vertically with each other.

Dean says:

Actually you need to do it like this.

[text* your-name 25/ ]

25 is the width in characters. I’m not sure why this is not in the docs.

Jack says:

Hi Dean,

Thanks very much for replying again. That did make a difference however unfortunately when I added a size value the name input field totally disappeared so it was not visible on the screen. Once I removed the size value the input field came back. Lol, this has been so frustrating but it’s the only issue left to fix on the contact form.

This is what I added which broke my contact form and removed the name input field:

Your Name (required)
[text* your-name placeholder “Name here…” 25/ ]

I changed the size value to 10, and 50, and also 100 but each value made the name input field disappear from the contact form.

Dean says:

Put the watermark last :)

Web design is fun hey!

Brad says:

Hi Dean,

Great design, however I can’t get this to work.

For some reason it wont float the first two next to each other and also the select box wont resize (also I would prefer not to have the drop down menu at all but can’t seem to fix that either)

http://rsv.blogspace.com.au/facebook-enquiry-form/

Dean says:

Hi Brad. They are floating but it’s not going to work with that centred layout. Maybe make the whole form left aligned and float the first two left.

Brad says:

Awesome,

Thanks for that. And are you able to help me with the drop down menu.

I just want it to be a normal select menu but css keeps overriding i think

Dean says:

Not really sorry, It might be a conflict with your theme.

jt says:

Dean,

My contact form 7 is unresponsive…

From what I understand… I can go to appearance and under there (7 items down) there is the css custom option…

I’ve tried putting in custom css code so that my contact form doesn’t go all the way forever across on my samsung galaxy 5.

And,

I can also click on appearance —> customize —–> scroll down and there is another css styling option there…

I’m assuming they do the same thing in both places – but sometimes I post a code in one area and it doesn’t work…. but I post the exact same code in ther other one – and it does… SMH I..

Regardless, I can’t find a code that words in either spot that helps the contact form respond to my phone so it isn’t so long wide (to the right)…

Any idea what I am doing wrong?

Thanks

Brent says:

Just stumbled onto this! After much frustration with (what I consider to be) a complex form I’m now feeling more confident in the look and feel after employing this CSS. Very cool! Thank you for sharing!

Matt says:

Great job Dean, thanks for sharing!

Can you please help me with one thing? I need to style an Upload file button, but I’m stuck, don’t know how to do it.

Dean says:

HI Matt. These can be tricky. I will try to add a guide for this soon!

Matt says:

Cool! Lookin’ forward to it

Hi Dean,
Great work, it has helped me alot. Only problem i have is that i am struggling to get the placeholders working. Is there css that i can use or do i edit this in the form editor?

Dean says:

Hi Myles. Did you try it like this

Amaury le Cour says:

Hi,
Great tuto, i would like do exactly like you, but the size of input fields is not like, may be,
i have not setting the contact form like you in Contact-form-7.
Please, could you tell me how to do for having the exact result on my wordpress page ?
Best regards,

Dean says:

Hi Amaury. There maybe be a conflict with your theme. Please post a link and I will have a look.

holger says:

all nice, but isn’t there a simple way to just use the css of the theme?

Dean says:

Hi Holger. Sorry I’m not sure what you are asking.

George says:

Hi Dean,

Thanks for posting this customisation, best one I’ve come across!

I don’t mind admiting I’m drowning in css here, I’ve think I’ve followed along changing a few colours right up to the bit where I float the name & email address and things get very hazy from there.

On the contact page the email address box is hanging over to the right 10px and the only way I seem to get it to align is to make the text area width 100%, I think that is a massive clue but it’s lost on me. I also removed the last bits of code with the float references as they didn’t seem to be referencing my inline floats?

any assistance you can offer is appreciated,

thanks,

George

Dean says:

Hi George. It looks like you just need to float your email field left. Them maybe reduce the size of the input little.

Rafael Magic says:

Dean,

Love the CSS for Contact Form 7. You saved me lots of work.

Do you have code so the button will be Blue and the Button is a certain width.

Its currently being used in a Responsive theme, so its 100%.

Thanks

Rafael

Dean says:

Hi Rafael. I’m glad you found it useful!

In the selector .wpcf7 input.wpcf7-submit{ you can set the width:100px; for example.

Changing the colour is tricky with the gradients. But you could remove the gradients under /* Gradient background */ and just keep the solid colour. background-color: blue; Do the same for the hover state.

I hope that helps!

josh says:

this is great. one question, after submitting, the thank you message at the bottom is cut off by the bottom of one of my screens but not the other. is there a way to make it relative so it shows up on all screens?
thanks

Dean says:

Hi Josh. You might just need some padding. Can you post a link to the page?

Rusty says:

hello,
I use the themeTwenty Fifteen Pattern
Using the plugin “contact form 7” version 3.5.2, and I can not make the skin of your demo too it’s too big.
Your CSS has been copied into the child theme style.css file.
The form used is:

Your Name(*) [text* your-name]

Your Email(*)[email* your-email]

Company[text your-company]

Subject[text your-subject]

Your Message[textarea your-message]

[submit “Send”]

The website address is: http://www.flightlogistics.com/contact-us/ Thank you for your help.

Dean says:

Hi Rusty. There is some other styling being loaded. frontend.css which has form styling also. It’s not a standard part of the plugin. Do you have another plugin like https://wordpress.org/plugins/contact-form-7-style/ ?

Rusty says:

Yeah I got it but I can’t the good way to have the good size

Sarah Kerr says:

This is great- I am really wanting to make the form full width as yours is above and responsive, it is here: http://zimbabwe-holidays.com/about-us/
I have tried adding the code above to my css and no luck?

Dean says:

Hi Sarah. You need to edit the css for your form. It’s currently floating fight.

See in your style.css line 531 – Change it to:


article .wpcf7 {
/* float: right; */
/* width: 280px; */
margin-right: 32px !important;
background-color: #454546;
box-shadow: 3px 0px 10px rgba(165, 165, 165, 0.64), -3px 0px 10px rgba(165, 165, 165, 0.64);
padding-top: 1em !important;
}

Dennis Plum says:

Is there a way to make the text for Checkbox or Radio fields clickable?

It seems that the only way to enable/disable a Checkbox/Radio button is to actually click on the box/button. I’d like to make it more user friendly by also making the text associated with each box/button clickable.

Is there a way to do this?

Dean says:

Hi Dennis. It should be by default. Can you post a link?

Dennis Plum says:

What I’ve learned is that If “use_label_element” is Not Used with the checkbox or radio field then the text associated with the buttons is not clickable.

So I’ve now included “use_label_element” and the text is now clickable. But the default for checkbox and radio fields is that this is not included.

Now that I’ve got the text clickable, I’m looking for some css code to make the text for each button either a different color of font or preferable to have the background change when hovering over the text, or at a minimum when the text is clicked. Might you be able to recommend a way to do this?

Dean says:

Hi Dennis. Sorry for the very slow reply. Thanks for posting the fix. You should be able to set a hover colour as I have done the with inputs. Please post a link and I can try this for you.


#checkbox_id input:hover {
background: #ebf7f5;
}

Stephen says:

Hi,

This was great. I also added a border to my form. Left the alerts as is.

One problem: the shadow on my send button stays in place when active/onclick. If I’m reading the css right, it’s supposed to disappear, making the button look depressed. Any ideas?

Thanks.

Dean says:

Hi Stephen. Can you post a link? There should be an active style to give the depressed look on click.

.wpcf7 input.wpcf7-submit:active {

Renee says:

Im totally trying this! Fantastic work. Thank you!

Elizabeth says:

Hello. Please, consider using our professional SEO services to bring traffic and conversions to your website:
– SEO audit
– Keyword Research
– Creating content specifications
– On-page SEO
– Link building campaign
We have 5+ years of experience and more than 30+successful projects behind our back.
If you are interested in using one or more our services, or full complex, please, confirm the request to find out more.

Gavin Kipper says:

Get Unlimited Free Traffic To Your Website With This Amazing New Software that actually works,

That is why no image shows up for it. Love this submit!

mehmet says:

Would you send me the contents of the field ‘Form” in the contact form 7 admin area? I would like to see exactly how you made the fields side by side.
Your example above did not help me.
Thanks

JO says:

Hey !
very interesting ! I was hopeful because there is css (my css code is useless !) I found the same in this page, it’s about .wpcf7 .wpcf7-mail-sent-ok ; Of course, I don’t understand why, with my css code in the chid style.css file, there is absolutely no change. my code is : (because I don’t like their green !) : .wpcf7-form .wpcf7-mail-sent-ok {
background-color: #3e3e3e;
border: 1px solid #aaa9a9;
color: #aaa9a9;
text-transform: none;
}
Please, help me! Thanks a lot !
best regards!

Muy interesante, seguramente el mejor formulario de contacto por su sencillez y facilidad de uso

Scott says:

Hello,

I saw that there were some mistakes on your website (thriveweb.com.au) that is causing you to lose money to your competitors. I made a quick video going over these issues and Id like to show you what they are for free. (I normally charge for this.)

Respond YES with your best contact number if youre interested and I’ll send it over.

Talk soon,

Scott
Sent from iPhone

Leave a Reply