Each so continuously, it’s your choice your web page’s contact form submissions sent to multiple e mail addresses as an alternative of just one. Thankfully, that is actually simple to do with Divi! In this instructional, we can show you the way to include multiple e mail addresses on your Divi touch shape module. Additionally, we can moreover show you the way to add and customize the design of a marginally form to test the design of your web page.

Let’s get started!

Sneak Peek

Right here’s a preview of what we can design

What You Wish to Get Started

Forward of we commence, set up and turn on the Divi Theme and be sure you have the most recent fashion of Divi to your web page.

How to Include Multiple E-mail Addresses in Your Divi Contact Form Module

Now, you’re able to start out! We’ll go through this instructional step by step.

Create a New Internet web page with a Premade Construction

Let’s get began by the use of the usage of a premade layout from the Divi library. For this design, we can use the Remedy Landing Internet web page from the Treatment Structure Pack.

Add a brand spanking new internet web page to your web page and gives it a reputation, then make a choice the method to Use Divi Builder.

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

Search for and make a choice the Remedy Landing Internet web page.

Make a choice Use This Construction with the intention to upload the layout to your internet web page.

Now, we’re ready to build our design.

Keep watch over the Construction for the Contact Form Module

First, we wish to add a marginally form to this internet web page. Scroll to the bottom of the layout. We will be able to add a marginally form between the testimonial section and the footer. Add a brand spanking new row with a single column underneath the testimonial section.

Row Settings

Open the row settings. We’re going to add a background for the contact form. Set the background color.

• Background: #e1ecea

Next, open the spacing settings beneath the Design tab and add padding.

• Padding Best possible: 30px
• Padding Bottom: 30px
• Padding Left: 30px
• Padding Correct: 30px

Then, open the border settings and add rounded corners.

• Rounded Corners: 50px

Add Heading Text

Next, add a text module to the row. We’re going to add some heading text.

Add the heading text.

• H2: Get In Touch

Open the heading text settings beneath the design tab and keep an eye on the font and font weight.

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

Next, keep an eye on the heading text size the usage of the responsive possible choices to set smaller text sizes on smaller displays. Additionally, keep an eye on the street height.

• Heading 2 Text Size Desktop: 60px
• Heading 2 Text Size Tablet: 32px
• Heading 2 Text Size Mobile: 26px
• Heading 2 Line Most sensible: 1.2em

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 underneath the heading text.

Open the contact form settings. Beneath the Unsolicited mail Protection possible choices, permit “Use A Unsolicited mail Protection Provider” to permit ReCaptcha and remove the Fundamental Captcha requirement from the form.

• Use A Unsolicited mail Protection Provider: Positive
• Use Fundamental Captcha: No

Customize the Contact Form Module Design

Fields Settings

Switch over to the design tab and open the Fields settings. Change the background color and text color.

• Fields Background Color: rgba(255,255,255,0.42)
• Fields Text Color: #2e5b61

Next, keep an eye on the field’s padding and font.

• Fields Padding Best possible: 20px
• Fields Padding Bottom: 20px
• Fields Font: Inter

Then, trade the field’s text size. Use the responsive possible choices to set different text sizes on smaller displays.

• Fields Text Size Desktop: 18px
• Fields Text Size Tablet: 16px
• Fields Text Size Mobile: 14px

Button Settings

Switch over to the button settings and make allowance custom designed sorts. Then, trade the text size and text color.

• Use Custom designed Sorts for Button: Positive
• Button Text Size: 14px
• Button Text Color: #2e5b61

Next, set the border width, color, and radius.

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

Keep watch over the button font and font weight.

• Button Font: Inter
• Button Font Weight: Semi Bold

In the end, add padding to the button.

• Button Padding Best possible: 20px
• Button Padding Bottom: 20px
• Button Padding Left: 40px
• Button Padding Correct: 40px

Border Settings

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

• Inputs Rounded Corners: 50px

This completes the design for the contact form module.

Include Multiple E-mail Addresses in Your Divi Contact Form Module

At the side of multiple e mail addresses on your Divi contact form module can be helpful if you want to have multiple folks as a way to download incoming messages from your web page or if you want to have the message sent to multiple e mail addresses. When you’re running with multiple folks on a gaggle or have multiple inboxes that the messages should be delivered to, this selection would perhaps come in handy. Thankfully, it’s easy to include multiple e mail addresses on your contact form module the usage of Divi.

First, open the contact form settings. Navigate to the E-mail settings situated beneath the Content material subject material tab. So that you can upload multiple e mail addresses, separate them with a comma and add them to the “E-mail Maintain” field. You’ll be capable of have a space in between like this:

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

Or simply have a comma retaining aside the emails:

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

When you add your emails to your contact form, you’ll want to fill it out and, submit a test message and check out that the message was once delivered to all the e mail addresses listed on the form.

Final Consequence

Now, let’s check out the whole design for our contact form.

Final Concepts

It can be to hand to send your contact form submissions to multiple emails, specifically if you have multiple folks wanting a duplicate of the message. Thankfully, that is actually simple to put in force the usage of Divi’s contact form module. To be told additional about what you’ll do with Divi’s contact form module, check out this newsletter on methods to create a flexible shape with conditional common sense and methods to come with a slide-in touch shape in a hero segment. How have you ever ever customized your web page’s contact form? We’d love to hear from you throughout the comments!

The submit The right way to Come with More than one E mail Addresses in Your Divi Touch Shape Module appeared first on Chic Issues Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more