Webflow Joe

F'in Sweet Webflow Hacks

Show a custom success message with form submission info

What can this be used for?

  • Catering a message based on a user's interest, preference, or subject matter

Overview

This is one of many Part 2 articles on cookie functionality. Our article about setting of cookies will show you how to give your website visit cookies. This article shows you two different ways to submit a cookie you've set via form submissions.

You can show a custom message with the on-page success message or through a page redirect.

The select element that we're going to target asks the user if they are interested in 'design and branding' or 'development and coding'. After they choose one, we're going to use that information to show them a custom success message.

Step 1

Add a Webflow form component page

Inside the .Form wrapper, add a code embed block.

[ screenshot of embed block in component ]

Step 2

Assign an id to the field you want to grab info from

Add a id to a field component in the form. This can be a text field entry, a select, or any other form element with further customization. In this post we're going over the method to grab info from a text field or select.

For on-page success message:

[screenshot of id applied]

We assigned the id 'record-selection' to the select element on the form that shows the on-page success page.

For page redirect:

[screenshot of id applied]

We assigned the id 'record-selection-newpage' for the form that redirects to a new page.

Step 3

Add this code to the <body> of the page</body>

What the heck does that mean?

Let's learn by going step by step through the code

EXPLANATION

Step 4

Set give your dynamic text element the class .success-text

Whether you're doing an on-page

[ pic of embed display none ]

Step 5 (if you're doing a page redirect)

Add this code to the <body> of the redirect page</body>

[ screenshot of text of embed display none ]

This is allows the new redirect page to recognize the successText cookie.

Nice! You're done. See it working.

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!