Styling WordPress Contact Form 7 -Business Legions Blog

If you want to change the style of the WordPress plugin Contact Form 7 then read on.

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

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 the plugin Contact Form 7.

Firstly, lets have a look at the default style for the Contact Form 7 – it looks like this:

As you can see the default style of the form is pretty boring and it actually doesn’t match the style guide of the website.

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:

[codesyntax lang=”php”]

&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;p&gt;YOUR NAME (required)&lt;br /&gt;
[text* your-name] &lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;YOUR EMAIL (required)&lt;br /&gt;
[email* your-email] &lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;p&gt;SUBJECT&lt;br /&gt;
[text your-subject] &lt;/p&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;p&gt;YOUR MESSAGE&lt;br /&gt;
[textarea your-message] &lt;/p&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;p&gt;[submit "Send Message"]&lt;/p&gt;
&lt;/tr&gt;
&lt;/table&gt;

<table>

<tr>

<td>

<p>YOUR NAME (required)<br />

[text* your-name] </p>

</td>

<td>

</td>

<td>

<p>YOUR EMAIL (required)<br />

[email* your-email] </p>

</td>

<td>

</td>

<td>

<p>SUBJECT<br />

[text your-subject] </p>

</td>

<td>

</td>

</tr>

</table>

<table>

<tr>

<p>YOUR MESSAGE<br />

[textarea your-message] </p>

</tr>

<tr>

<p>[submit "Send Message"]</p>

</tr>

</table>

[/codesyntax]

You need to paste the code in the Form Tab in Contact Form 7.

Make sure to click Save. After these changes the form should look like this:

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 following changes:

Display full width
Changed background colour
Removed the borders around each field
Changed the button and text colour
Changed the text for each field and the button to be all uppercase.

Here’s the CSS code I used:

[codesyntax lang=”php”]

.wpcf7
{
background-color: #f7f7f7;
border: 0px solid #0f0;
}
table:not([class]) td, table:not([class]) th {
border: 0px;
}
input[type=submit] {
background: #ee1d24;
color: #00000;
font-size: medium;
display: block;
width: 100%;
height:50px;
text-transform: uppercase;
}
input[type=text], input[type=password], input[type=email], input[type=search], textarea{
margin-right:5px;
text-transform: uppercase;
height:45px;
width: 100%;
}

.wpcf7

{

background-color: #f7f7f7;

border: 0px solid #0f0;

}

table:not([class]) td, table:not([class]) th {

border: 0px;

}

input[type=submit] {

background: #ee1d24;

color: #00000;

font-size: medium;

display: block;

width: 100%;

height:50px;

text-transform: uppercase;

}

input[type=text], input[type=password], input[type=email], input[type=search], textarea{

margin-right:5px;

text-transform: uppercase;

height:45px;

width: 100%;

}

[/codesyntax]

I pasted this CSS code in the Unik theme’s Custom CSS section as shown below:

So after all the above changes the final Contact Form looked like this:

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:

Press save and you will now see the Captcha box on the form:

RESOURCES

List of resources related to this article:

WordPress – Popular Content Management System

Unik – Awesome WordPress Theme

Contact Form 7 – WordPress Plugin for contact forms

Really Simple Captcha – WordPress Captcha Plugin compatible with Contact Form 7

FEEDBACK

I hope this has helped some of you. If you need any further help, please let me know by leaving a comment.

DO YOU LIKE WHAT YOU'VE READ?

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!

Our Sponsors

Become a Sponsor for $35.

Limit to 5 sponsors.

Company Name :

Email :

Website :

Description :

Upload Logo :

Terms & Conditions : ACCEPTANCE OF TERMS This Agreement contains the complete terms and conditions that apply to your participation in our site. If you wish to use the site including its tools and services please read these terms of use carefully. By accessing this site or using any part of the site or any content or services hereof, you agree to become bound by these terms and conditions. If you do not agree to all the terms and conditions, then you may not access the site or use the content or any services in the site. MODIFICATIONS OF TERMS OF USE Amendments to this agreement can be made and effected by us from time to time without specific notice to your end. Agreement posted on the Site reflects the latest agreement and you should carefully review the same before you use our site. USE OF THE SITE You are prohibited to do the following acts, to wit: (a) use our sites, including its services and or tools if you are not able to form legally binding contracts, are under the age of 18, or are temporarily or indefinitely suspended from using our sites, services, or tools (b) posting of an items in inappropriate category or areas on our sites and services; (c) collecting information about users’ personal information; (d) maneuvering the price of any item or interfere with other users' listings; (f) post false, inaccurate, misleading, defamatory, or libelous content; (g) take any action that may damage the rating system. Registration Information For you to complete the sign-up process in our site, you must provide your full legal name, current address, a valid email address, member name and any other information needed in order to complete the signup process. You must qualify that you are 18 years or older and must be responsible for keeping your password secure and be responsible for all activities and contents that are uploaded under your account. You must not transmit any worms or viruses or any code of a destructive nature. Any information provided by you or gathered by the site or third parties during any visit to the site shall be subject to the terms of businesslegions.com’s Privacy Policy. Term This Agreement will remain in full force and effect while you use the Website. You may terminate your membership at any time for any reason by following the instructions on the “TERMINATION OF ACCOUNT” in the setting page. We may terminate your membership for any reason at any time. If you are using a paid version of the Service and we terminate your membership in the Service because you have breached this Agreement, you will not be entitled to any refund of unused subscription fees. Even after your membership is terminated, certain sections of this Agreement will remain in effect. NON-COMMERCIAL USE BY MEMBERS. Members on this website are prohibited to use the services of the website in connection with any commercial endeavors or ventures. This includes providing links to other websites, whether deemed competitive to this website or not. Juridical persons or entities including but not limited to organizations, companies, and/or businesses may not become Members of businesslegions.com and should not use the site for any purpose. LINKs & FRAMINGS Illegal and/or unauthorized uses of the Services, including unauthorized framing of or linking to the Sites will be investigated, and appropriate legal action may be taken. Some links, however, are welcome to the site and you are allowed to establish hyperlink to appropriate part within the site provided that: (i) you post your link only within the forum, chat or message board section; (ii) you do not remove or obscure any advertisements, copyright notices or other notices on the placed at the site; and (iii) you immediately stop providing any links to the site on written notice from us. However, you must check the copyright notice on the homepage to which you wish to link to make sure that one of our content providers does not have its own policies regarding direct links to their content on our sites. WARRANTY DISCLAIMER AND EXCLUSIONS / LIMITATIONS OF LIABILITY We make no express or implied warranties or representations with respect to the Program or any products sold through the Program (including, without limitation, warranties of fitness, merchantability, non-infringement, or any implied warranties arising out of a course of performance, dealing, or trade usage). In addition, we make no representation that the operation of our site will be uninterrupted or error-free, and we will not be liable for the consequences of any interruptions or errors. We may change, restrict access to, suspend or discontinued the site or any part of it at anytime. The information, content and services on the site are provided on an “as is” basis. When you use the site and or participate therein, you understand and agree that you participate at your own risk. INTELLECTUAL PROPERTY rights You hereby acknowledge that all rights, titles and interests, including but not limited to rights covered by the Intellectual Property Rights, in and to the site, and that You will not acquire any right, title, or interest in or to the site except as expressly set forth in this Agreement. You will not modify, adapt, translate, prepare derivative works from, decompile, reverse engineer, disassemble or otherwise attempt to derive source code from any of our services, software, or documentation, or create or attempt to create a substitute or similar service or product through use of or access to the Program or proprietary information related thereto. Confidentiality You agree not to disclose information you obtain from us and or from our clients, advertisers, suppliers and forum members. All information submitted to by an end-user customer pursuant to a Program is proprietary information of businesslegions.com. Such customer information is confidential and may not be disclosed. Publisher agrees not to reproduce, disseminate, sell, distribute or commercially exploit any such proprietary information in any manner. NON-ASSIGNMENT OF RIGHTS Your rights of whatever nature cannot be assigned nor transferred to anybody, and any such attempt may result in termination of this Agreement, without liability to us. However, we may assign this Agreement to any person at any time without notice. Waiver Failure of the businesslegions.com to insist upon strict performance of any of the terms, conditions and covenants hereof shall not be deemed a relinquishment or waiver of any rights or remedy that the we may have, nor shall it be construed as a waiver of any subsequent breach of the terms, conditions or covenants hereof, which terms, conditions and covenants shall continue to be in full force and effect. Severability of Terms. In the event that any provision of these Terms and Conditions is found invalid or unenforceable pursuant to any judicial decree or decision, such provision shall be deemed to apply only to the maximum extent permitted by law, and the remainder of these Terms and Conditions shall remain valid and enforceable according to its terms. Entire Agreement This Agreement shall be governed by and construed in accordance with the substantive laws of Australia , without any reference to conflict-of-laws principles. The Agreement describes and encompasses the entire agreement between us and you, and supersedes all prior or contemporaneous agreements, representations, warranties and understandings with respect to the Site, the contents and materials provided by or through the Site, and the subject matter of this Agreement. Choice of Law; Jurisdiction; Forum Any dispute, controversy or difference which may arise between the parties out of, in relation to or in connection with this Agreement is hereby irrevocably submitted to the exclusive jurisdiction of the courts of Australia , to the exclusion of any other courts without giving effect to its conflict of laws provisions or your actual state or Australia of residence.

Enter Captcha :

CAPTCHA Image