website design gold coast
website design gold coast

Contact Form 7 skin

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

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 to override the default styling.

Working Demo

Your Name (required)

Your Email (required)

Subject

Your Message


To style your form you need to add this CSS code to your main site CSS file and upload the images to your images folder inside your theme.



.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();

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

Add this to your functions.php and create your own colour coded loading gifs here ajaxload.info or preloaders.net


/* Custom ajax loader */
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
    function my_wpcf7_ajax_loader () {
    return get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

I also recommend saving your form submissions in your database with this plugin CFDB

Let's work together!

Get in touch Request a quote

Sharing is caring:

Created Jul 8, 2012 - Last modified on August 5th, 2020 - Web Design Gold Coast 127 Responses

127 Comments

  1. Carol Johnson

    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

      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.

  2. Geoff Jackson

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

  3. Celeste

    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!

  4. Carol Magalhães

    Thank you! Works like a charm ;)

  5. Victor

    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.

  6. Virginia Beach Wedding Photographer

    Thank you, this is exactly what I needed.

  7. Ben

    Thanks, this really spiced up my page!

  8. Drew Jensen

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

    • Dean

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

      
      <p style="float:left; width:45%;">City<br />
          [text city 32/] </p>
      
      <p style="float:right; width:45%;">State<br />
          [text state 32/] </p>
      
      <div style="clear:both"></div>
      
      

      • Alan

        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

          I’ve fixed the code sample. See above.

          • Alan

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

            AWESOME!

            AE

  9. Stow

    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

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

    • Dean

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

  10. Chris

    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

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

      • Chris

        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.

  11. Eoin Redmond

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

    Eoin
    Istech Web Design

  12. Ashley

    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

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

  13. Ankush

    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

      You want to change the background color?

      • Hugh

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

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

        • Dean

          Hi Hugh. Background colour of what?

          • Hugh

            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

              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

                Awesome. Thankyou. :-)

  14. mark Fry

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

    • Dean

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

  15. Messaink

    Worked great!
    Thanks!!!

  16. David

    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

  17. john

    thank you for this! the default styles are terrible

  18. Étien'

    It works very well !!!

    Thanks for sharing !!

  19. Ray

    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.

  20. Cassie

    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.

  21. George

    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

      Having the same problem. Any solution?

  22. モンブラン 万年筆

    浴衣 男

  23. Bernard

    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

      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

        thank you,
        it works correctly.

  24. Bronwyn

    Trying to use wp7 but format not working

  25. Alex

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

    • Dean

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

  26. Andy

    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!

  27. Andy

    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

  28. Tim

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

    Thanks,

    Tim

  29. Sonics

    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

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

  30. ali

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

    Thanks in advance
    Ali

  31. Leah

    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

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

      • Leah

        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

          Did you try adding my code?

  32. Leah

    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

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

  33. Leah

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

  34. Leah

    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!

  35. Leah

    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?

  36. Leah

    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?

  37. Leah

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

    • Dean

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

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

  38. Leah

    Thanks Dean..you’re awesome!

  39. Jay

    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]

  40. Tiffany

    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

      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

        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. :)

  41. Chris

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

    • Dean

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

  42. Eric

    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

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

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

  43. Stephen

    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

      Not sure what you mean sorry!

  44. Marcus

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

  45. Jack

    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

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

  46. Jack

    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

      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.

  47. Jack

    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

      Put the watermark last :)

      Web design is fun hey!

  48. Brad

    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

      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.

  49. Brad

    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

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

  50. jt

    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

  51. Brent

    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!

  52. Matt

    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

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

      • Matt

        Cool! Lookin’ forward to it

  53. Myles Robinson

    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

      Hi Myles. Did you try it like this

  54. Amaury le Cour

    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

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

  55. holger

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

    • Dean

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

  56. George

    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

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

  57. Rafael Magic

    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

      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!

  58. josh

    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

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

  59. Rusty

    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

      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

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

  60. Sarah Kerr

    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

      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;
      }
      

  61. Dennis Plum

    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

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

  62. Dennis Plum

    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

      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;
      }
      

  63. Stephen

    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

      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 {

  64. Renee

    Im totally trying this! Fantastic work. Thank you!

  65. Elizabeth

    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.

  66. Gavin Kipper

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

  67. 카지노사이트

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

  68. mehmet

    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

  69. JO

    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!

  70. don bicicleta

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

Leave a Reply