Contact Form 7 – custom templates tutorial

About Contact Form 7

Contact Form 7 is a popular and free WordPress plugin that allows users to create and manage contact forms on their websites. It’s widely used due to its simplicity, flexibility, and customization options.

Intro

In this tutorial, I’ll guide you through creating a custom Contact Form 7 templates, which you can pass over to any website you own, manage, or use.

• Note: some of the tips & tricks that I’ll be sharing here come from my previous tutorials regarding the topic: https://wp-doin.com/category/contact-form-7/, so the idea is to reuse some of the ideas here.
• Note 2: I assume you already know how to install, activate, and configure the Contact Form 7 and its basic usage, so I’ll skip this part.
• Note 3: You’ll need a basic knowledge of HTML and CSS to understand this tutorial.

Setting up Contact Form 7

The Default Contact Form 7 Looks

By default, our Contact Form 7 looks as such:

Contact Form 7 default looks

Custom Contact Form 7 Template Setup

The idea is to use the base Contact Form 7, w/o any plugins. And to do so, I propose to add a custom class to our Contact Form 7 form. There are two simple ways of doing so:

• 1. We either wrap the whole form in a custom wrapper, with a custom CSS class – see the attached image.

Contact Form 7 CSS class

• 2. Or, while embedding the form, add a custom CSS class to it, say:

contact-form-7 id="1234" title="Contact form Template" html_class="c-custom-template-wrap c-custom-template-wrap--blue" – remember about adding braces around that text [], or it won’t embed.

Now, then we’ll use this setup as a base for two different templates. To put it simply, each different class assigned to our Contact Form 7, will correspond to a slightly different Contact Form 7 template, allowing us to tweak these as we go. Carrying over the code from one website to another should be straightforward: Just copy the HTML code, paste the CSS, and assign a different class to the form of your choice. Or: create two different forms, based on the markup provided above.

To make matters simple, I’ll proceed with the first method from above. Let’s assume that our final Contact Form 7 HTML would be as follows:

Now then, with that template set, we can set up a number of CSS classes that alter the layout of our Contact Form 7. Let’s go ahead and do something really simple here.

Contact Form 7 Template Blue 

You may have noticed that we’ve added two classes to our Contact Form 7 template: c-custom-template-wrap and c-custom-template-wrap–blue. We’ll use the first one to modify the overall look of our Contact Form 7, and we’ll use the second class to adjust its colours to blue.

We’ll do some polishing here. Let’s make sure that our Contact Form template has two columns and its background is blue. To do so, go to Appearance -> Customize -> Additional CSS or Custom CSS. Note: this varies depending on the Theme you are using, so it may need to be added manually. 

Now, our Contact Form 7 Template will have a blue background, border radius, and will be split into two columns, say: 

Contact Form 7 Template Blue

Contact Form 7 Template Yellow

Similarly to the above, we’ll do something similar with our yellow template, let’s swap the .c-custom-template-wrap–blue class name with .c-custom-template-wrap–yellow, and let’s add the following CSS code: 

With that changes in place, our Contact Form 7 Template Yellow will look as follows:

Contact Form 7 Template Yellow

Summary

While templates aren’t supported by default with Contact Form 7. It’s pretty easy to come up with a number of these on your own, using very simple CSS and HTML rules. Those templates can then be expanded upon next and reused as separate components. Just copy and paste the code you came up with, and you should save lots of time redoing these 🙂