How to Make Contact Form 7 Look Like Divi

by | Apr 9, 2019 | Divi tutorials | 9 comments

How to Make Contact Form 7 Look Like Divi

If you want more freedom with your 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

9 Comments

  1. Henrik Thielen

    thank you so much – very helpful tools and description.

    Reply
  2. Leine

    Hi,

    I am using DIVI. Can I insert Google Captcha (reCAPTCHA) by using the plugins above?

    Reply
  3. Leine

    And if so. How can it be done?

    Reply
    • Mark

      Hi Leine,

      That is a good question but unfortunately I wouldn’t know. I might make a tutorial about it one day and see if it can be done.

      Reply
  4. Jay Jackson

    Does exactly what I needed. You saved me a lot of time.

    Reply
  5. Juan Bezuidenhout

    Thank you for the awesome tutorial 🙂

    Reply
  6. Abdul Qadir

    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
  7. Team DiviPeople

    Hello Everyone!

    GOOD NEWS!

    We have an update Contact Form 7 Styler for Divi plugin, let us know what how it now. We added a new feature called Grid System, do you like it? If we added Contact Form 7 to Google Spreadsheet connector feature how it will be?

    See New Demo: https://divipeople.com/plugins/contact-form-7-styler/

    Reply

Submit a Comment

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

174 Shares
Share174
Tweet
Pin
Buffer