There are many instances when we create a website that we want to introduce interactivity to the visitors who would want to know more about a particular service or product that we are offering.

One of the ways to do this is to collect information from them in the form of queries. While doing this is very easy in WordPress, to make it look good without paying any amount is a little challenging.

What are Forms?

This is where there is a use case for the forms. Forms are a set of HTML elements grouping together to enable the users to enter their queries that either go somewhere into the database or helps in triggering an email that carries the entered detail.

Let us view an example, where you will get an idea as to how it looks like.

As told earlier, you are supposed to enter your details, including the checkboxes and radio buttons from the above-mentioned fields. The details will either be sent via email or stored in the database that I have specified or both.

This can be achieved in many ways in WordPress. One of the most commonly used plugins to achieve this is Contact Form 7, which is free of cost.

What is Contact Form 7?

Contact Form 7 is one of the most widely accepted free plugins for forms mostly used as Contact Form, hence the name. There are a lot of supporting plugins to this simple-to-use plugin, each one making things simpler and simpler.

There are many fields that Contact Form 7 supports right out of the box. Here is a list of them and this is how they look like:

Text box

Drop-down

Radio Button

Checkbox

Date Picker

Text Area

Acceptance

File Upload

Submit

How to use Contact Form 7?

Supporting these many types of fields, it is unbelievable that it is free. Apart from being free, it is damn easy to use as well. All you have to do is to know a few shortcodes or even add them using the default editor already provided with the plugin.

As you install the plugin, there are three tabs in the left sidebar. The first one “Contact Forms” will display a list of Contact Forms that are added before. You can edit them using the options provided right there.

If you want to add a new form, click on the second link, “Add new”, which will obviously add a contact form by going to the editor where all the fields that can be added are present.

Enter the name of the Contact Form in the text box and start the process of creating the form.

Below, there will be a text area or editor where you can add the above-mentioned fields one by one. If you are aware of HTML, there is a better chance that you will be able to easily align the form fields. If you are not sure how to create, don’t worry, there is a template already existing in the editor that you can directly use to create the form.

Below is the code that will be filled by default in the editor for you to start with, to try to understand Contact Form 7 better.

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

Let us talk about this code later, before which you need to understand that there are a set of buttons on the top of the editor where there are fields that we covered previously. They are called tag-generator tools.

By just clicking on these buttons, you will be taken to a new window that will have options to customize the field, like if the field is a mandatory field and if you want a custom name to be added. It also allows us to have a default value or options depending on the type of field that we have selected.

We can move to the next tab., which is Mail. Here we can configure the email id to which the email notification will be sent. We can even add attachments to the emails that are sent from here. Note that this will work only when WordPress is configured right to send emails.

The next tab is about the messages that the form shows once the submit button is pressed. There are various situations from which you can customize the messages that will be displayed at the right time.

There is a tab after mails that is only for experts. If the users want to add additional settings they can do that here. Learn more here on this page.

More about how to create forms please click this link.

How to Modify Contact Form 7 Templates?

If you read from the previous section, I spoke about HTML once. This was just to make sure that you align your form well. There are many instances where in you need to have your own template for your forms.

What are templates?

Templates in this case mean an aesthetic look and feel attributed to functionality. We have a form that we just created. It looks raw without any good look and feel. To give it some design we make use of CSS and wrap a design over the form making it look better.

The wrapping that creates a good look and feel is called a template. This is up to the creativity of the person behind developing the template.

Why do Contact Form 7 need templates?

You would have already guessed it right, that the contact forms that we created are still raw (without any aesthetics) and this will be the reason for the need for a lot of changes in the form templates. With the basic Contact Form 7 plugin, there is a lot of functionality and look and feel, both, missing.

To accomplish this, there are two ways that I have figured out.

  1. Using plugins
  2. Updating CSS

Let us find out how this can be achieved using these two methods.

Using Plugins to style Contact Form 7

As you would be aware of WordPress plugins, there are a lot of them that increase the functionality or enables a non-existent functionality by installing them. Read more about plugins here.

Let us see one by one, the three plugins that assist us in changing Contact Form 7 template.

Contact Form 7: Accessible Defaults

This is a plugin that is better to be installed before installing any other plugin related to Contact Form 7. The reason being the short-codes getting wrapped together. I know you did not understand. We will look at an example.

This is how the short-code for Contact Form 7 was before installing the plugin.

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

After installing when we tried to create the same form, the changes were very helpful. It cleaned the short-codes to look something like this:

[response]

<p><label for="your-name">Your Name (required)</label><br />
    [text* your-name id:your-name] </p>

<p><label for="your-email">Your Email (required)</label><br />
    [email* your-email id:your-email] </p>

<p><label for="your-subject">Your Subject</label><br />
    [text your-subject id:your-subject] </p>

<p><label for="your-message">Your Message</label><br />
    [textarea your-message id:your-message] </p>


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

As you can see, the code is much clearer here in terms of accessibility and readability. The form is wrapped in between the HTML elements. Also, there is a new short-code added at the very beginning. This is the response that we get once we submit the form.

Normally, this will be displayed at the end, after the form. But in this case, as soon as we submit the form, we will be notified of the response at the very beginning helping our users figure out the post-submission message clearly.

Contact Form 7 Style

Hope you have seen Google Doodles. For any occasion or for whatever Google considers important, they replace their conventional logo with a custom one relevant to the occasion.

Similarly, if you want a design to change based on occasions, this is the best plugin you can install. There are a lot of presets from which you can select. Haha. That was just on a lighter note. Actually, there are two occasions listed, one for Christmas and the other for Valentine’s day.

There are multiple templates associated with these occasions. All you have to do to apply those templates to your form is to go to:

Contact Styles > Quick Edit

From there you can check the form on which you want to apply the style and apply. There you go, you have applied the template pretty easily, isn’t it?

Material Design for Contact Form 7

If you are a material design fan like me, then this is for sure your plugin. It is a pretty simple and straightforward plugin that gives you an unbelievably neat look and feel. There is an upgrade available to that. That will be worth the money if you want simple and minimalist material forms.

Here all you need to do is to add the below code to start with. This code will display the same default form that we spoke about in the previous section in material design.

[md-form]

[md-text label="Your name"]
[text* your-name]
[/md-text]

[md-text label="Your email"]
[email* your-email]
[/md-text]

[md-textarea label="Your message"]
[textarea* your-message]
[/md-textarea]

[md-submit]
[submit "Send"]
[/md-submit]

[/md-form]

And the stunning material output will be as follows.

Contact Form 7 Skins

This is a plugin that acts as a savior for non-developers who get confused or for those who are uneasy to use the default editor and add even small code into them.

Install the plugin and everything gets magically upgraded to the drag and drop editor. That does not mean that the plugin will remove the contact form 7 editor altogether. It just adds a new interface below that editor that is pretty easy to follow even to a non-developer.

With that interface, you can look out for blue colors and green colors. Blue-colored components are fields that are read-only, while the green-colored ones can be changed. The changes are the options of the fields that can be set as and how required.

From the right sidebar, you can drag the fields in this writable area only to place them in their respective places.

You can even change the field types from the green components available from the visual editor. For the other options, you can select the edit button on the component and start editing from the options occurring from the right side.

There are three tabs from which the first tab is what we explained in the previous paragraphs. The other two are equally important for they are the ones from where you can change the templates in one of the tabs and style from the other.

Templates

Templates comprise preset forms by selecting which the purpose of the form changes. The following are the forms that are available by default for your regular purposes.

  • Complaint
  • Contact
  • Event
  • Fieldset-Basic
  • Fieldset in Fieldset
  • Fieldset Multiple
  • Registration
  • Suggestion
  • Survey
  • Testimonial

You can either import them and change them or directly start using them using the short-code.

Style

This is where you can change the style of Contact Form 7. It offers you a wide range of colors to select from. Select the styles the same way how you selected the templates. They are all created just like the templates. It will get selected. Saving them will make the style get applied to the form and you are ready with the new style.

Here are a few of them:

Styling Contact Form 7 using CSS in WordPress

To manually sit and change the CSS of the contact form, don’t think you need to know a lot of coding. No. It is pretty simple and very easy to follow. All you need to have is some common sense.

Styling all forms

To change the Contact Form 7 style using CSS, the Contact Form 7 team has come up with a standard-compliant code, which means to say that each element in the form will have a proper ID and CSS class associated with it.

You can make use of this single class to change the style using CSS. The class is .wpcf7. Let us start using this and create our own styles and you will get to know how easy it is to do this in a moment.

To start with, we will see how we can change the styles of input, that too a few selected ones.

.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea {
background:#009dff;
color:#FFF;
font-family:arial;    
}

Here, in this example, we are trying to add a custom background, font color, and font. These three attributes will be changed in the email text box, text text-box, and text area. This is pretty straight forward and this is all you need to do to change the styles from the CSS.

Similarly, if we have to change the style of a button, just copy the below code and paste it in your Additional CSS tab available in Appearance -> Customize.

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#009dff;
width:100%;
text-align:center;
text-transform:uppercase;
}

If you want to learn CSS, you can visit this link.

Styling different forms

Many times, we will have multiple forms and the above process will only stylize all the forms with the CSS that we add. But in case if we want to customize the styles of a particular form, then we would need to go through a few more lines of codes.

All you need to do is to right-click on the contact form on the page where your contact form is placed and click on Inspect Element. This is to view the source code of the page. In the source code, check for the below code.

In the code, the id attribute is a unique one for each form. Use this id in place of wpcf7. Let us try to replace it in the previous code.

This is how the code looks like:

.wpcf7-f2392-p2393-o1 input[type="submit"],
.wpcf7-f2392-p2393-o1 input[type="button"] { 
background-color:#009dff;
width:100%;
text-align:center;
text-transform:uppercase;
}

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *