If you want to change the style of the WordPress plugin Contact Form 7 then read on.<\/div><\/div>\n

Styling a contact form can be a difficult task, especially for those\u00a0like me that have very little programming experience but with some persistence (more like trial and error), I managed to style the\u00a0contact form. The website is built using WordPress and the theme that was used is Unik<\/a>.<\/p>\n

The theme also had a built in Contact Form but it wasn’t customisable especially the way it sends out the information in the form so I decided not to use it. It was one of the reason why I had to use \u00a0the plugin Contact Form 7.<\/p>\n

Firstly, lets have a look at the default style for the Contact Form 7 – it looks like this:<\/p>\n

$\"WordPress$ <\/a><\/p>\n

As you can see the default style of the form is pretty boring and it actually doesn’t match the style guide of the\u00a0website.<\/p>\n

So the first step is to change the layout of the form. I wanted the Name, Your Email and Subject to be in the same row. The Your Message field and the Send button I wanted these to also be in a separate row. To do this, I ended up using the table syntax (yes I know most of you will say its best to use CSS but I didn’t have enough time to work this out so I used tables instead). Anyways, here’s the code that I used:<\/p>\n

<\/a>Source code<\/a><\/td>

<\/a>

<\/a> <\/td><\/tr><\/table><\/div>

<<\/span>table><\/span>\n<<\/span>tr><\/span>\n<<\/span>td><\/span>\n<<\/span>p><\/span>YOUR NAME (<\/span>required)<\/span><<\/span>br \/><\/span>\n[<\/span>text*<\/span> your-<\/span>name]<\/span> <\/<\/span>p><\/span>\n<\/<\/span>td><\/span>\n<<\/span>td><\/span>\n<\/<\/span>td><\/span>\n<<\/span>td><\/span>\n<<\/span>p><\/span>YOUR EMAIL (<\/span>required)<\/span><<\/span>br \/><\/span>\n[<\/span>email*<\/span> your-<\/span>email]<\/span> <\/<\/span>p><\/span>\n<\/<\/span>td><\/span>\n<<\/span>td><\/span>\n<\/<\/span>td><\/span>\n<<\/span>td><\/span>\n<<\/span>p><\/span>SUBJECT<<\/span>br \/><\/span>\n[<\/span>text your-<\/span>subject]<\/span> <\/<\/span>p><\/span>\n<\/<\/span>td><\/span>\n<<\/span>td><\/span>\n<\/<\/span>td><\/span>\n<\/<\/span>tr><\/span>\n<\/<\/span>table><\/span>\n \n<<\/span>table><\/span>\n<<\/span>tr><\/span>\n \n<<\/span>p><\/span>YOUR MESSAGE<<\/span>br \/><\/span>\n[<\/span>textarea your-<\/span>message]<\/span> <\/<\/span>p><\/span>\n \n<\/<\/span>tr><\/span>\n<<\/span>tr><\/span>\n<<\/span>p><\/span>[<\/span>submit "Send Message"<\/span>]<\/span><\/<\/span>p><\/span>\n \n<\/<\/span>tr><\/span>\n<\/<\/span>table><\/span><\/pre><\/div><\/div>\nYou need to paste the code in the Form Tab in Contact Form 7.<\/p>\n<\/a><\/p>\n
Make sure to click Save. After these changes the form should look like this:<\/p>\n
<\/a><\/p>\n
You will notice that the second and third row is not displaying full width for the second table and this is caused by some CSS syntax. So I wanted to make the\u00a0following changes:<\/p>\n
\nDisplay full width<\/li>\n
Changed background colour<\/li>\n
Removed the borders around each field<\/li>\n
Changed the button and text colour<\/li>\n
Changed the text for each field and the button to be all uppercase.<\/li>\n<\/ul>\nHere’s the CSS code I used:<\/p>\n
<\/a>Source code<\/a><\/td> <\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>.<\/span>wpcf7\n{<\/span>\nbackground-<\/span>color:<\/span> #f7f7f7;\n<\/span>border:<\/span> 0px solid #0f0;\n<\/span>}<\/span>\n \ntable:<\/span>not(<\/span>[<\/span>class<\/span>]<\/span>)<\/span> td,<\/span> table:<\/span>not(<\/span>[<\/span>class<\/span>]<\/span>)<\/span> th {<\/span>\nborder:<\/span> 0px;<\/span>\n}<\/span>\n \ninput[<\/span>type=<\/span>submit]<\/span> {<\/span>\nbackground:<\/span> #ee1d24;\n<\/span>color:<\/span> #00000;\n<\/span>font-<\/span>size:<\/span> medium;<\/span>\ndisplay:<\/span> block;<\/span>\nwidth:<\/span> 100%;<\/span>\nheight:<\/span>50px;<\/span>\ntext-<\/span>transform:<\/span> uppercase;<\/span>\n}<\/span>\n \n \ninput[<\/span>type=<\/span>text]<\/span>,<\/span> input[<\/span>type=<\/span>password]<\/span>,<\/span> input[<\/span>type=<\/span>email]<\/span>,<\/span> input[<\/span>type=<\/span>search]<\/span>,<\/span> textarea{<\/span>\n \nmargin-<\/span>right:<\/span>5px;<\/span>\ntext-<\/span>transform:<\/span> uppercase;<\/span>\nheight:<\/span>45px;<\/span>\nwidth:<\/span> 100%;<\/span>\n}<\/span><\/pre><\/div><\/div>\nI pasted this CSS code in the Unik theme’s Custom CSS section as shown below:<\/p>\n<\/a><\/p>\n
So after all the above changes the final Contact Form looked like this:<\/p>\n
<\/a><\/p>\n
If you need to put a captcha box on the Contact Form then you need to install the plugin called Really Simple Captcha and add the code like below:<\/p>\n
<\/a><\/p>\n
Press save and you will now see the Captcha box on the form:<\/p>\n
<\/a><\/p>\n
RESOURCES<\/div>List of resources related to this article:<\/p>\nWordPress<\/a> – Popular Content Management System<\/p>\n
Unik<\/a> – Awesome WordPress Theme<\/p>\n
Contact Form 7<\/a> – WordPress Plugin for contact forms<\/p>\n
Really Simple Captcha<\/a> – WordPress Captcha Plugin compatible with Contact Form 7<\/p>\n<\/div><\/div>\n
FEEDBACK<\/div>I hope this has helped some of you. If you need any further help, please let me know by leaving a comment.<\/div><\/div>\nDO YOU LIKE WHAT YOU'VE READ?<\/div>Join our subscription list and receive our content right in your mailbox. If you like to receive some Great deals our Freebies then subscribe now!\r\n\r\n
\n\n\nName<\/label>\n<\/div>\nEmail<\/label>\n<\/div>\n\n<\/div>\n<\/form>\n<\/div>\n<\/p>\r\n\r\n<\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Styling a contact form can be a difficult task, especially for those\u00a0like me that have very little programming experience but with some persistence (more like trial and error), I managed to style the\u00a0contact form. The website is built using WordPress and the theme that was used is Unik. The theme also had a built in […]<\/p>\n","protected":false},"author":1,"featured_media":3649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,1043,382],"tags":[893,1911,1910,1909,996,1912,1778,1936],"class_list":["post-3648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-websites","category-wordpress","tag-change-the-style","tag-contact","tag-contact-form-7","tag-css","tag-form","tag-really-simple-captcha","tag-table","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":9,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions"}],"predecessor-version":[{"id":3666,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3648\/revisions\/3666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/media\/3649"}],"wp:attachment":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/categories?post=3648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/tags?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}