Redirecting after filling out a touch shape is a type of interactions that’s frequently lost sight of. On the other hand, it’s crucial interplay. It informs the consumer that you simply’ve won their message and what to anticipate subsequent. Thankfully, redirecting is simple to do with Divi’s Contact Form Module. On this submit, we’ll see how one can redirect after filling out the Divi Touch Shape. We’ll additionally see an instance redirect web page that can assist you construct your personal.

Let’s get began.

Preview

Desktop Redirect Touch Shape Web page with a Customized Message

Telephone Redirect Touch Shape Web page with a Customized Message

The way to Redirect After Filling Out the Divi Touch Shape

You’ll discover a redirect possibility within the Common tab of the Divi Touch shape Module. For those examples, I’m the use of the Touch web page from the free Device Repair Layout Pack that’s to be had inside of Divi.

To get entry to the surroundings, open the module by way of clicking the darkish grey icon that looks on hover.

Subsequent, scroll all the way down to the segment referred to as Redirect and allow the redirect possibility.

• Allow Redirect URL: Sure

Input the URL you wish to have to redirect to. Shut the module and save your settings. As you’ll be able to see, enabling the redirect is discreet. The laborious section is understanding the place to ship them.

• Redirect URL: the URL of your redirect web page

The way to Make a selection The place to Redirect the Divi touch Shape

You’ll be able to input any URL you wish to have into the Redirect URL box, however the web page you redirect them must make sense to them. It must be part of the touch procedure and come with knowledge they’ll in finding helpful. It must be in contact to them, really feel like a herbal development, and appear to be your site.

Relatively than redirecting to the house web page, weblog, or identical pages, it’s highest to redirect the consumer to a customized web page with knowledge that you simply won their message. You’ll want to come with knowledge on what occurs subsequent and supply a couple of hyperlinks they may be able to use. It might come with a hyperlink to a obtain, FAQs, and so on.

I like to recommend making a customized web page the use of the styling out of your structure.

Create a Redirect Touch Shape Web page with a Customized Message

Let’s create a web page for the customized message. I’ll use the styling cues from the Software Restore Format Pack Touch web page. This may occasionally make sure the customized message web page is styled to check the structure.

First Redirect Touch Shape Web page Phase

Create a web page and open the Phase’s settings by way of clicking the blue tools icon.

Subsequent, scroll all the way down to Background and make a choice the Gradient tab. Create 4 Gradient Stops. Make a selection white for the primary and set it to twenty%. Make a selection #edbf48 for the second one and set it on best of the primary. Make a selection #edbf48 for the 3rd and set it to 33%. Make a selection white for the fourth and set it on best of the 3rd. Trade the Gradient Course to 115deg. This creates a stripe for the background. Shut the settings.

• First Gradient Prevent: 20%, #ffffff
• 2nd Gradient Prevent: 20%, #edbf48
• 3rd Gradient Prevent: 33%, #edbf48
• Fourth Gradient Prevent: 33%, #ffffff
• Gradient Course: 115deg

First Row

Subsequent, upload a single-column Row. We’ll use its default settings.

Identify

Subsequent, upload a Textual content Module.

Set the Content material Sort to Heading 1 and input the message into the Content material Editor.

• Content material Sort: Heading 1
• Frame Textual content: Thanks for contacting us. We’ll get involved quickly.

Textual content

Subsequent, make a choice the Design tab. Scroll down and alter the Textual content Alignment to Focused.

• Textual content Alignment: Focused

Heading Textual content

Scroll all the way down to Heading Textual content. Make a selection Inter for the Font. Set the Weight to Daring and the Colour to black.

• Font: Inter
• Weight: Daring
• Colour: #000000

Trade the Font Measurement to 75px for desktops, 40px for pills, and 24px for telephones. Trade the Line Top to one.2em. Shut the module.

• Measurement: 75px desktop, 40px pill, 24px telephone
• Line Top: 1.2em

2nd Redirect Touch Shape Web page Phase and Row

Subsequent, upload a new Phase below the primary one and upload a single-column Row. We’ll use their default settings.

Redirect Touch Shape Web page Description Textual content Identify

Upload a Textual content Module in the second one Row and open its settings.

Trade the Content material to Heading 4 and input the identify into the Content material Editor. I’m the use of the identify What’s Subsequent, so that they’ll know at a look what this content material is set.

• Content material Sort: Heading 4
• Content material Frame: What’s Subsequent

Textual content

Make a selection the Design tab and set the Textual content Alignment to Focused.

• Textual content Alignment: Focused

Heading Textual content

Scroll all the way down to Heading Textual content and make a choice the H4 tab. Make a selection Inter for the Font and set the Weight to Daring and the Colour to black.

• Font: Inter
• Weight: Daring
• Colour: #000000

Trade the Measurement to 19ps for desktops, 16px for pills, and 14px for telephones. Set the Line Top to one.6em.

• Measurement: 19px desktop, 16px pill, 14px telephone
• Line Top: 1.6em

Spacing

Subsequent, scroll all the way down to Spacing and upload 0px to the Backside Margin. Shut the module.

• Backside Margin: 0px

Redirect Touch Shape Web page Description Textual content Frame

Subsequent, upload a Textual content Module below the outline identify.

Upload the outline textual content to the frame Content material Editor. This article is going to tell the consumer of when to be expecting a reaction. I’m additionally including a notice that I’ve won their message.

• Content material Frame: We’ve won your message and we’ll ship you an electronic mail inside of 2 industry days.

Textual content

Move to the Design tab and make a choice Open Sans for the Font and alter the Colour to black.

• Font: Open Sans
• Colour: #000000

Trade the Measurement to 16px for desktops, 15ps for pills, and 14px for telephones. Set the Line Top to one.8em.

• Measurement: 16px desktop, 15px pill, 14px telephone
• Line Top: 1.8em

Scroll all the way down to Textual content Alignment and make a choice Focused. Shut the module.

• Textual content Alignment: Focused

FAQ Textual content Identify

Subsequent, we’ll upload knowledge and a hyperlink to the FAQ web page. First, reproduction the outline’s identify Textual content Module and drag it below the outline Textual content Module.

Depart the Content material Sort at Heading 4 and alter the Frame Content material to FAQ. All of the different settings are already provide, so you’ll be able to shut the module.

• Content material Sort: Heading 4
• Content material Frame: FAQ

FAQ Textual content Frame

Subsequent, reproduction the outline’s Textual content Module and drag it below the FAQ identify Textual content Module.

We will be able to make one alternate to this module, however first, upload your textual content. Upload areas as had to create the structure you wish to have. As you’ll see within the instance, I’m including areas to position the FAQ hyperlink by itself line. I’ve added a hyperlink to the FAQ Web page textual content, so it now hyperlinks to the FAQ web page. We’ll want to alternate its colour.

• Content material Frame: When you wait, check out our often requested questions. This must resolution any initial questions you’ll have. To peer our FAQs, practice this hyperlink: FAQ Web page

Textual content Hyperlink

Now, pass to the Design tab to the Textual content segment and make a choice the Hyperlink tab and alter the Colour to #f26440. Depart the remainder of the settings at their defaults so that they’ll practice the common Textual content settings. Shut the module.

• Hyperlink Textual content Colour: #f26440

Redirect Touch Shape Web page Button

Finally, let’s upload a button that leads the consumer again to the homepage. Upload the Button Module below the closing Textual content Module.

Open the Button Module’s settings and alter the Button Textual content to House Web page.

• Textual content: House Web page

Hyperlink

Subsequent, input the URL for your own home web page into the URL box. Depart the Hyperlink Goal at its default surroundings so the hyperlink opens in the similar window.

• Button Hyperlink URL: your own home web page URL

Alignment

Subsequent, make a choice the Design tab. Below Alignment, make a choice Heart for the Button Alignment.

• Button Alignment: Heart

Button

Scroll all the way down to Button and allow Use Customized Kinds for Button. Trade the Font Measurement to 14px. Set the Font Colour to white and the Background Colour to #286f6c.

• Use Customized Kinds for Button: Sure
• Textual content Measurement: 14px
• Textual content Colour: #ffffff
• Background Colour: #286f6c

Trade the Border Colour to #286f6c and set the Radius to 0px. Make a selection Inter for the Font and set the Weight to Daring and the Taste to TT.

• Border Colour: #286f6c
• Border Radius: 0px
• Font: Inter
• Weight: Daring
• Taste: TT

Spacing

In any case, scroll all the way down to Spacing. Trade the Best and Backside Padding to 14ps and the Left and Proper Padding to 20px. Shut the module and save your settings.

• Padding: 14px Best and Backside, 20px Left and Proper

Effects

Desktop Redirect Touch Shape Web page with a Customized Message

Telephone Redirect Touch Shape Web page with a Customized Message

Finishing Ideas

That’s our take a look at how one can redirect after filling out the Divi Touch Shape. Putting in the redirect is simple to do in Divi’s Touch Shape Module. I like to recommend making a web page only for the redirect and the use of the web page to offer explicit knowledge and hyperlinks. Your guests will admire the additional effort, and it’s going to make the touch procedure extra comprehensible and pleasing.

We wish to pay attention from you. Do you utilize a customized web page to redirect after filling out your touch shape? Tell us about your revel in within the feedback.

The submit How to Redirect After Filling Out the Divi Contact Form seemed first on Elegant Themes Blog.