Find out how to Redirect After Filling Out the Divi Touch Shape

by | May 2, 2023 | Etcetera | 0 comments

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

Desktop Redirect Contact Form Page with a Custom Message

Phone Redirect Contact Form Internet web page with a Custom designed Message

Phone Redirect Contact Form Page with a Custom 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.

How to Redirect After Filling Out the Divi Contact Form

Next, scroll proper all the way down to the phase referred to as Redirect and permit the redirect selection.

  • Allow Redirect URL: Positive

How to Redirect After Filling Out the Divi Contact Form

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

How to Redirect After Filling Out the Divi Contact Form

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.

See also  Divi 5 Replace: Public Alpha Model 2

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.

Create a Page with a Custom Message

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

Create a Page with a Custom Message

First Row

Next, add a single-column Row. We’ll use its default settings.

Create a Page with a Custom Message

Determine

Next, add a Text Module.

Create a Page with a Custom Message

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.

Create a Page with a Custom Message

Text

Next, make a choice the Design tab. Scroll down and change the Text Alignment to Targeted.

  • Text Alignment: Targeted

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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.

Create a Page with a Custom Message

Redirect Contact Form Internet web page Description Text Determine

Add a Text Module in the second Row and open its settings.

Create a Page with a Custom Message

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
See also  Tips on how to set up PHP dependencies and extensions with Docker

Create a Page with a Custom Message

Text

Make a selection the Design tab and set the Text Alignment to Targeted.

  • Text Alignment: Targeted

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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

Create a Page with a Custom Message

Spacing

Next, scroll proper all the way down to Spacing and add 0px to the Bottom Margin. Close the module.

  • Bottom Margin: 0px

Create a Page with a Custom Message

Redirect Contact Form Internet web page Description Text Body

Next, add a Text Module underneath the description identify.

Create a Page with a Custom Message

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.

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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

Create a Page with a Custom Message

Scroll proper all the way down to Text Alignment and make a choice Targeted. Close the module.

  • Text Alignment: Targeted

Create a Page with a Custom Message

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.

Create a Page with a Custom Message

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

Create a Page with a Custom Message

FAQ Text Body

Next, replica the description’s Text Module and drag it underneath the FAQ identify Text Module.

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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
See also  Easy methods to Make Cash with AI in 2023 (14 Techniques)

Create a Page with a Custom Message

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.

Create a Page with a Custom Message

Open the Button Module’s settings and change the Button Text to Space Internet web page.

  • Text: Space Internet web page

Create a Page with a Custom Message

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

Create a Page with a Custom Message

Alignment

Next, make a choice the Design tab. Beneath Alignment, make a choice Center for the Button Alignment.

  • Button Alignment: Center

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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

Create a Page with a Custom Message

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

Create a Page with a Custom Message

Results

Desktop Redirect Contact Form Internet web page with a Custom designed Message

Desktop Redirect Contact Form Page with a Custom Message

Phone Redirect Contact Form Internet web page with a Custom designed Message

Phone Redirect Contact Form Page with a Custom 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.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!