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.
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:
Join today
FREE MEMBERSHIP
Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.JOIN TODAY FOR FREE
9 Comments
Henrik Thielen on July 14, 2019 at 5:14 pmthank you so much – very helpful tools and description.Reply
Leine on August 6, 2019 at 5:49 pmHi,I am using DIVI. Can I insert Google Captcha (reCAPTCHA) by using the plugins above?Reply
Mark on August 7, 2019 at 3:14 pmHi 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
Divi People on August 13, 2019 at 2:51 pmYou can google captcha with contact form 7 every easily. Check this doc: https://contactform7.com/recaptcha/Reply
Jay Jackson on September 22, 2019 at 2:57 pmDoes exactly what I needed. You saved me a lot of time.Reply
Juan Bezuidenhout on October 3, 2019 at 12:53 pmThank you for the awesome tutorial 🙂Reply
Abdul Qadir on May 16, 2020 at 11:22 pmThis 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