Sometimes, you may want your website’s contact form submissions sent to multiple email addresses instead of just one. Luckily, this is very easy to do with Divi! In this tutorial, we will show you how to include multiple email addresses in your Divi contact form module. Additionally, we will also show you how to add and customize the design of a contact form to match the design of your website.
Let’s get started!
Here is a preview of what we will design
What You Need to Get Started
Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.
How to Include Multiple Email Addresses in Your Divi Contact Form Module
Now, you are ready to start! We’ll go through this tutorial step by step.
Create a New Page with a Premade Layout
Let’s start by using a premade layout from the Divi library. For this design, we will use the Therapy Landing Page from the Therapy Layout Pack.
Add a new page to your website and give it a title, then select the option to Use Divi Builder.
We will use a premade layout from the Divi library for this example, so select Browse Layouts.
Search for and select the Therapy Landing Page.
Select Use This Layout to add the layout to your page.
Now, we are ready to build our design.
Modify the Layout for the Contact Form Module
First, we need to add a contact form to this page. Scroll to the bottom of the layout. We will add a contact form between the testimonial section and the footer. Add a new row with a single column below the testimonial section.
Open the row settings. We are going to add a background for the contact form. Set the background color.
Next, open the spacing settings under the Design tab and add padding.
Then, open the border settings and add rounded corners.
Add Heading Text
Next, add a text module to the row. We are going to add some heading text.
Add the heading text.
Open the heading text settings under the design tab and modify the font and font weight.
Next, adjust the heading text size using the responsive options to set smaller text sizes on smaller screens. Additionally, adjust the line height.
Add and Customize the Contact Form Module
Add the Contact Form Module
Now that the row settings have been customized and the header text is in place, we can add the contact form module to the row. Add the module below the heading text.
Open the contact form settings. Under the Spam Protection options, enable “Use A Spam Protection Service” to enable ReCaptcha and remove the Basic Captcha requirement from the form.
Customize the Contact Form Module Design
Move over to the design tab and open the Fields settings. Change the background color and text color.
Next, modify the field’s padding and font.
Then, change the field’s text size. Use the responsive options to set different text sizes on smaller screens.
Move over to the button settings and enable custom styles. Then, change the text size and text color.
Next, set the border width, color, and radius.
Modify the button font and font weight.
Finally, add padding to the button.
Now open the Border settings and add rounded corners to the inputs.
This completes the design for the contact form module.
Include Multiple Email Addresses in Your Divi Contact Form Module
Including multiple email addresses in your Divi contact form module can be helpful if you want multiple people to be able to receive incoming messages from your website or if you need the message sent to multiple email addresses. If you are working with multiple people on a team or have multiple inboxes that the messages should be delivered to, this feature may come in handy. Thankfully, it is straightforward to include multiple email addresses in your contact form module using Divi.
First, open the contact form settings. Navigate to the Email settings located under the Content tab. To add multiple email addresses, separate them with a comma and add them to the “Email Address” field. You can have a space in between like this:
Once you add your emails to your contact form, be sure to fill it out and, submit a test message and check that the message was delivered to all of the email addresses listed on the form.
It can be convenient to send your contact form submissions to multiple emails, especially if you have multiple people needing a copy of the message. Thankfully, this is very easy to implement using Divi’s contact form module. To learn more about what you can do with Divi’s contact form module, check out this article on how to create a versatile form with conditional logic and how to include a slide-in contact form in a hero section. How have you customized your website’s contact form? We’d love to hear from you in the comments!
This content was originally published here.