[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Make Contact Form 7 Look Like Divi

Mark Hendriksen | April 9, 2019 | 9 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

If you want more freedom with your Divi contact form then you can use the free contact form 7 plugin as your form builder. Contact form 7 will give you more field options, for example, a date field.

However, the contact form 7 styling is very basic, but fortunately, there is a great free Divi plugin that you can use for styling contact form 7 forms. With this free plugin Contact Form 7 Styler for Divi you can style any contact 7 form in the visual builder for Divi.

In this tutorial, I will show you how you can make contact form 7 look like Divi or give it any look you want.

Step 1: Install contact form 7 and Contact Form 7 Styler for Divi

In your dashboard navigate to Plugins > Add New

Search for contact form 7 by Takayuki Miyoshi and install the plugin.

Then search for Contact Form 7 Styler for Divi by DiviPeople and install it.

Contact form 7 styler for Divi

Step 2: Create your form in contact form 7

Go to Contact > Add New and create a form in that you want to use as your form. In this example, I created a reservation form for my restaurant child theme.

Form created in contact form 7

Step 3: Style your form

Go to the page you want to show your form, you can do this from the backend or the frontend with the visual builder.

Insert a new module and you will find here a new module type called Contact Form 7 Styler.

Contact form 7 styler module

Under General choose the form that you have created in step 2. With these modules you can style your contact 7 form just as the Divi form module.

This is my end result:

Reservation form

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

9 thoughts on “How to Make Contact Form 7 Look Like Divi”

  1. This help me a lot, I am working on client website, and divi Contact form is not sending email i have spend whole day on but it does not, than i am thinking about contact form 7, but by default Contact form 7 is not look good in divi, your guide save my life,

    at the end of my comment you save my Life, Love you Sir..

    Reply

Leave a Comment

174 Shares
Share174
Pin
Tweet