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.
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.
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.
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:
thank you so much – very helpful tools and description.
Hi,
I am using DIVI. Can I insert Google Captcha (reCAPTCHA) by using the plugins above?
And if so. How can it be done?
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.
You can google captcha with contact form 7 every easily. Check this doc: https://contactform7.com/recaptcha/
Does exactly what I needed. You saved me a lot of time.
Thank you for the awesome tutorial 🙂
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..
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/