Redirecting after filling out a marginally form is a type of interactions that’s steadily lost sight of. However, it’s an important interaction. It informs the shopper that you simply’ve received their message and what to expect next. Fortunately, redirecting is easy to do with Divi’s Touch Shape Module. In this publish, we’ll see how you can redirect after filling out the Divi Contact Form. We’ll moreover see an example redirect internet web page that can assist you assemble your personal.
Let’s get started.
Preview
Desktop Redirect Contact Form Internet web page with a Custom designed Message
Phone Redirect Contact Form Internet web page with a Custom designed Message
Learn how to Redirect After Filling Out the Divi Contact Form
You’ll find a redirect selection inside the Fundamental tab of the Divi Contact form Module. For the ones examples, I’m the use of the Contact internet web page from the unfastened Tool Restore Structure Pack that’s available inside of Divi.
To get right to use the surroundings, open the module by means of clicking the dark gray icon that appears on hover.
Next, scroll proper all the way down to the phase referred to as Redirect and permit the redirect selection.
- Allow Redirect URL: Positive
Enter the URL you want to redirect to. Close the module and save your settings. As you’ll have the ability to see, enabling the redirect is inconspicuous. The hard phase is working out where to send them.
- Redirect URL: the URL of your redirect internet web page
Learn how to Make a selection Where to Redirect the Divi contact Form
You’ll have the ability to enter any URL you want into the Redirect URL field, then again the internet web page you redirect them will have to make sense to them. It will have to be a part of the contact process and include wisdom they’ll to search out useful. It will have to keep up a correspondence to them, in reality really feel like a natural building, and seem to be your website.
Relatively than redirecting to the home internet web page, blog, or an an identical pages, it’s best possible to redirect the shopper to a custom designed internet web page with wisdom that you simply received their message. You’ll wish to include wisdom on what happens next and provide a few links they can use. It could include a link to a download, FAQs, and so forth.
I love to suggest creating a custom designed internet web page the use of the styling from your construction.
Create a Redirect Contact Form Internet web page with a Custom designed Message
Let’s create a internet web page for the custom designed message. I’ll use the styling cues from the Instrument Repair Construction Pack Contact internet web page. This may increasingly once in a while make sure that the custom designed message internet web page is styled to check the construction.
First Redirect Contact Form Internet web page Section
Create a internet web page and open the Section’s settings by means of clicking the blue equipment icon.
Next, scroll proper all the way down to Background and make a choice the Gradient tab. Create 4 Gradient Stops. Make a selection white for the principle and set it to 20%. Make a selection #edbf48 for the second and set it on top of the principle. Make a selection #edbf48 for the third and set it to 33%. Make a selection white for the fourth and set it on top of the third. Business the Gradient Trail to 115deg. This creates a stripe for the background. Close the settings.
- First Gradient Prevent: 20%, #ffffff
- second Gradient Prevent: 20%, #edbf48
- third Gradient Prevent: 33%, #edbf48
- Fourth Gradient Prevent: 33%, #ffffff
- Gradient Trail: 115deg
First Row
Next, add a single-column Row. We’ll use its default settings.
Determine
Next, add a Text Module.
Set the Content material subject material Type to Heading 1 and enter the message into the Content material subject material Editor.
- Content material subject material Type: Heading 1
- Body Text: Thank you for contacting us. We’ll get in touch temporarily.
Text
Next, make a choice the Design tab. Scroll down and change the Text Alignment to Targeted.
- Text Alignment: Targeted
Heading Text
Scroll proper all the way down to Heading Text. Make a selection Inter for the Font. Set the Weight to Bold and the Color to black.
- Font: Inter
- Weight: Bold
- Color: #000000
Business the Font Size to 75px for desktops, 40px for tablets, and 24px for phones. Business the Line Best to no less than one.2em. Close the module.
- Size: 75px desktop, 40px tablet, 24px phone
- Line Best: 1.2em
second Redirect Contact Form Internet web page Section and Row
Next, add a new Section underneath the principle one and add a single-column Row. We’ll use their default settings.
Redirect Contact Form Internet web page Description Text Determine
Add a Text Module in the second Row and open its settings.
Business the Content material subject material to Heading 4 and enter the identify into the Content material subject material Editor. I’m the use of the identify What’s Next, so that they’ll know at a glance what this content material subject material is in a position.
- Content material subject material Type: Heading 4
- Content material subject material Body: What’s Next
Text
Make a selection the Design tab and set the Text Alignment to Targeted.
- Text Alignment: Targeted
Heading Text
Scroll proper all the way down to Heading Text and make a choice the H4 tab. Make a selection Inter for the Font and set the Weight to Bold and the Color to black.
- Font: Inter
- Weight: Bold
- Color: #000000
Business the Size to 19ps for desktops, 16px for tablets, and 14px for phones. Set the Line Best to no less than one.6em.
- Size: 19px desktop, 16px tablet, 14px phone
- Line Best: 1.6em
Spacing
Next, scroll proper all the way down to Spacing and add 0px to the Bottom Margin. Close the module.
- Bottom Margin: 0px
Redirect Contact Form Internet web page Description Text Body
Next, add a Text Module underneath the description identify.
Add the description text to the body Content material subject material Editor. This article is going to inform the shopper of when to expect a response. I’m moreover together with a apply that I’ve received their message.
- Content material subject material Body: We’ve received your message and we’ll send you an electronic message inside of 2 business days.
Text
Transfer to the Design tab and make a choice Open Sans for the Font and change the Color to black.
- Font: Open Sans
- Color: #000000
Business the Size to 16px for desktops, 15ps for tablets, and 14px for phones. Set the Line Best to no less than one.8em.
- Size: 16px desktop, 15px tablet, 14px phone
- Line Best: 1.8em
Scroll proper all the way down to Text Alignment and make a choice Targeted. Close the module.
- Text Alignment: Targeted
FAQ Text Determine
Next, we’ll add wisdom and a link to the FAQ internet web page. First, replica the description’s identify Text Module and drag it underneath the description Text Module.
Leave the Content material subject material Type at Heading 4 and change the Body Content material subject material to FAQ. All of the other settings are already supply, so that you’ll have the ability to close the module.
- Content material subject material Type: Heading 4
- Content material subject material Body: FAQ
FAQ Text Body
Next, replica the description’s Text Module and drag it underneath the FAQ identify Text Module.
We will make one alternate to this module, then again first, add your text. Add spaces as needed to create the construction you want. As you’ll see inside the example, I’m together with spaces to position the FAQ link on its own line. I’ve added a link to the FAQ Internet web page text, so it now links to the FAQ internet web page. We’ll wish to alternate its color.
- Content material subject material Body: While you wait, take a look at our ceaselessly asked questions. This will have to answer any preliminary questions you might want to have. To see our FAQs, apply this link: FAQ Internet web page
Text Link
Now, transfer to the Design tab to the Text phase and make a choice the Link tab and change the Color to #f26440. Leave the rest of the settings at their defaults so that they’ll apply the average Text settings. Close the module.
- Link Text Color: #f26440
Redirect Contact Form Internet web page Button
In spite of everything, let’s add a button that leads the shopper once more to the homepage. Add the Button Module underneath the ultimate Text Module.
Open the Button Module’s settings and change the Button Text to Space Internet web page.
- Text: Space Internet web page
Link
Next, enter the URL for your home internet web page into the URL field. Leave the Link Objective at its default atmosphere so the link opens within the equivalent window.
- Button Link URL: your home internet web page URL
Alignment
Next, make a choice the Design tab. Beneath Alignment, make a choice Center for the Button Alignment.
- Button Alignment: Center
Button
Scroll proper all the way down to Button and make allowance Use Custom designed Sorts for Button. Business the Font Size to 14px. Set the Font Color to white and the Background Color to #286f6c.
- Use Custom designed Sorts for Button: Positive
- Text Size: 14px
- Text Color: #ffffff
- Background Color: #286f6c
Business the Border Color to #286f6c and set the Radius to 0px. Make a selection Inter for the Font and set the Weight to Bold and the Style to TT.
- Border Color: #286f6c
- Border Radius: 0px
- Font: Inter
- Weight: Bold
- Style: TT
Spacing
Finally, scroll proper all the way down to Spacing. Business the Best and Bottom Padding to 14ps and the Left and Correct Padding to 20px. Close the module and save your settings.
- Padding: 14px Best and Bottom, 20px Left and Correct
Results
Desktop Redirect Contact Form Internet web page with a Custom designed Message
Phone Redirect Contact Form Internet web page with a Custom designed Message
Completing Concepts
That’s our take a look at how you can redirect after filling out the Divi Contact Form. Setting up the redirect is easy to do in Divi’s Contact Form Module. I love to suggest creating a internet web page just for the redirect and the use of the internet web page to offer particular wisdom and links. Your visitors will acknowledge the extra effort, and it’ll make the contact process additional understandable and delightful.
We need to pay attention from you. Do you use a custom designed internet web page to redirect after filling out your contact form? Let us know about your enjoy inside the comments.
The publish Find out how to Redirect After Filling Out the Divi Touch Shape gave the impression first on Sublime Topics Weblog.
Contents
- 1 Preview
- 2 Learn how to Redirect After Filling Out the Divi Contact Form
- 3 Learn how to Make a selection Where to Redirect the Divi contact Form
- 4 Create a Redirect Contact Form Internet web page with a Custom designed Message
- 4.1 First Redirect Contact Form Internet web page Section
- 4.2 First Row
- 4.3 Determine
- 4.4 second Redirect Contact Form Internet web page Section and Row
- 4.5 Redirect Contact Form Internet web page Description Text Determine
- 4.6 Redirect Contact Form Internet web page Description Text Body
- 4.7 FAQ Text Determine
- 4.8 FAQ Text Body
- 4.9 Redirect Contact Form Internet web page Button
- 5 Results
- 6 Completing Concepts
- 7 Working out Ethereum Community Charges for Rookies
- 8 Evaluating JavaScript Bundlers: Rollup vs Webpack vs Parcel
- 9 Meet Kinsta at WordCamp US 2022 in San Diego, California
0 Comments