Once in a while, it’s your decision your web site’s touch shape submissions despatched to a couple of e mail addresses as an alternative of only one. Fortunately, this is so easy to do with Divi! On this educational, we will be able to display you find out how to come with a couple of e mail addresses to your Divi contact form module. Moreover, we will be able to additionally display you find out how to upload and customise the design of a touch shape to check the design of your web site.

Let’s get began!

Sneak Peek

Here’s a preview of what we will be able to design

What You Want to Get Began

Prior to we start, install and activate the Divi Theme and you’ll want to have the newest model of Divi for your web site.

The way to Come with A couple of E mail Addresses in Your Divi Touch Shape Module

Now, you are prepared to start out! We’ll undergo this educational step-by-step.

Create a New Web page with a Premade Format

Let’s get started by means of the usage of a premade format from the Divi library. For this design, we will be able to use the Remedy Touchdown Web page from the Therapy Layout Pack.

Upload a brand new web page on your web site and provides it a identify, then choose the solution to Use Divi Builder.

We will be able to use a premade format from the Divi library for this case, so choose Browse Layouts.

Seek for and choose the Remedy Touchdown Web page.

Make a selection Use This Format so as to add the format on your web page.

Now, we’re able to construct our design.

Adjust the Format for the Touch Shape Module

First, we want to upload a touch shape to this web page. Scroll to the ground of the format. We will be able to upload a touch shape between the testimonial phase and the footer. Upload a brand new row with a unmarried column underneath the testimonial phase.

Row Settings

Open the row settings. We’re going to upload a background for the touch shape. Set the background colour.

• Background: #e1ecea

Subsequent, open the spacing settings underneath the Design tab and upload padding.

• Padding Most sensible: 30px
• Padding Backside: 30px
• Padding Left: 30px
• Padding Proper: 30px

Then, open the border settings and upload rounded corners.

• Rounded Corners: 50px

Upload Heading Textual content

Subsequent, upload a textual content module to the row. We’re going to upload some heading textual content.

Upload the heading textual content.

• H2: Get In Contact

Open the heading textual content settings underneath the design tab and regulate the font and font weight.

• Heading 2 Font: Cormorant Garamond
• Heading 2 Font Weight: Daring

Subsequent, regulate the heading textual content dimension the usage of the responsive choices to set smaller textual content sizes on smaller displays. Moreover, regulate the road peak.

• Heading 2 Textual content Dimension Desktop: 60px
• Heading 2 Textual content Dimension Pill: 32px
• Heading 2 Textual content Dimension Cellular: 26px
• Heading 2 Line Top: 1.2em

Upload and Customise the Touch Shape Module

Upload the Touch Shape Module

Now that the row settings had been custom designed and the header textual content is in position, we will be able to upload the touch shape module to the row. Upload the module underneath the heading textual content.

Open the touch shape settings. Below the Unsolicited mail Coverage choices, allow “Use A Unsolicited mail Coverage Carrier” to allow ReCaptcha and take away the Elementary Captcha requirement from the shape.

• Use A Unsolicited mail Coverage Carrier: Sure
• Use Elementary Captcha: No

Customise the Touch Shape Module Design

Fields Settings

Transfer over to the design tab and open the Fields settings. Alternate the background colour and textual content colour.

• Fields Background Colour: rgba(255,255,255,0.42)
• Fields Textual content Colour: #2e5b61

Subsequent, regulate the sphere’s padding and font.

• Fields Padding Most sensible: 20px
• Fields Padding Backside: 20px
• Fields Font: Inter

Then, exchange the sphere’s textual content dimension. Use the responsive choices to set other textual content sizes on smaller displays.

• Fields Textual content Dimension Desktop: 18px
• Fields Textual content Dimension Pill: 16px
• Fields Textual content Dimension Cellular: 14px

Button Settings

Transfer over to the button settings and allow customized kinds. Then, exchange the textual content dimension and textual content colour.

• Use Customized Types for Button: Sure
• Button Textual content Dimension: 14px
• Button Textual content Colour: #2e5b61

Subsequent, set the border width, colour, and radius.

• Button Border Width: 1px
• Button Border Colour: #2e5b61
• Button Border Radius: 50px

Adjust the button font and font weight.

• Button Font: Inter
• Button Font Weight: Semi Daring

In any case, upload padding to the button.

• Button Padding Most sensible: 20px
• Button Padding Backside: 20px
• Button Padding Left: 40px
• Button Padding Proper: 40px

Border Settings

Now open the Border settings and upload rounded corners to the inputs.

• Inputs Rounded Corners: 50px

This completes the design for the touch shape module.

Come with A couple of E mail Addresses in Your Divi Touch Shape Module

Together with a couple of e mail addresses to your Divi touch shape module may also be useful if you wish to have a couple of folks so to obtain incoming messages out of your web site or if you want the message despatched to a couple of e mail addresses. If you’re operating with a couple of folks on a crew or have a couple of inboxes that the messages must be brought to, this option would possibly turn out to be useful. Fortunately, it’s simple to incorporate a couple of e mail addresses to your touch shape module the usage of Divi.

First, open the touch shape settings. Navigate to the E mail settings situated underneath the Content material tab. So as to add a couple of e mail addresses, separate them with a comma and upload them to the “E mail Cope with” box. You’ll be able to have an area in between like this:

“email1@gmail.com, email2@gmail.com”

Or just have a comma isolating the emails:

“email1@gmail.com,email2@gmail.com”

If you upload your emails on your touch shape, remember to fill it out and, put up a check message and take a look at that the message was once brought to the entire e mail addresses indexed at the shape.

Ultimate Consequence

Now, let’s take a look at the overall design for our touch shape.

Ultimate Ideas

It may be handy to ship your touch shape submissions to a couple of emails, particularly when you have a couple of folks desiring a duplicate of the message. Fortunately, this is so easy to enforce the usage of Divi’s touch shape module. To be told extra about what you’ll be able to do with Divi’s touch shape module, take a look at this text 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 ever custom designed your web site’s touch shape? We’d love to listen to from you within the feedback!

The put up How to Include Multiple Email Addresses in Your Divi Contact Form Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more