Creating Custom Success Message in Webflow: A Comprehensive Guide

Webflow is a powerful tool for building websites and creating engaging user experiences. In this guide, we will learn a "sweet Webflow hack" to show a custom success message when a user is redirected after a successful form submission. This technique will allow us to personalize the success message based on the information the user entered into the form.

Setting Up the Webflow Form

To begin, let's set up a simple Webflow form on our website. The form should contain fields for user input, such as name, email, and a select field for users to choose their interests. For this example, we will focus on customizing the success message based on the user's selection in the interest field.

Within the Webflow Designer, add a native Webflow form to your page. Give the form and the select field an ID. In this example, we'll use "email-form" as the ID for the form and "interest-select-field" as the ID for the select field.

Redirecting Users After Form Submission

Next, we need to set up the form to redirect users to a new page within the site upon successful submission. This redirection will allow us to display a custom success message on the new page based on the user's input.

In the form settings, specify the URL of the page where you want the user to be redirected after the form is successfully submitted. This can be done in the "Redirect URL" field within the form settings.

Creating the Custom Success Page

Now, let's create the custom success page where the user will be redirected after submitting the form. This page will display a personalized success message based on the user's selection in the form's select field.

1. Creating the Success Message: Within Webflow, design the success page and add a text element to display the success message. Give this text element a class, for example, "insert-success-text".

2. Setting Up JavaScript: We will use JavaScript to capture the user's selection from the form and display it as the custom success message on the success page. We need to add custom JavaScript code to both the main page where the form is submitted and the success page where the custom message is displayed.

JavaScript Setup for the Main Page

On the main page where the form is submitted, we will first include the necessary JavaScript library to work with cookies. We can use a CDN to include the library, making it easy to work with cookies within our custom JavaScript code.

Below is the JavaScript code we need to include on the main page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script><script>  // Reference the select field in the interest  const interestSelectField = document.getElementById('interest-select-field');    // Reference the email form  const emailForm = document.getElementById('email-form');    // Initialize the custom success message variable with the value of the interest select field  let customSuccessMessage = interestSelectField.value;    // Update the custom success message variable when the select field's value changes  interestSelectField.addEventListener('change', function() {    customSuccessMessage = interestSelectField.value;  });    // When the form submit button is clicked, store the custom success message value in a cookie  // and then submit the form  emailForm.addEventListener('submit', function(e) {    e.preventDefault(); // Prevent the form from submitting immediately        if (customSuccessMessage) {      // Save the custom success message value in a cookie      Cookies.set('success-text-cookie', customSuccessMessage);      emailForm.submit(); // Submit the form    } else {      // Handle the case where the select field is not filled out      // Encourage the user to fill out the select field before submitting the form      // Add your own custom error handling here      interestSelectField.focus(); // Focus on the select field    }  });</script>

Let's break down the JavaScript code for the main page:

• We start by referencing the select field (interestSelectField) and the form (emailForm) using their assigned IDs.
• We initialize a variable (customSuccessMessage) with the value of the interest select field.
• We add an event listener to the select field to update the custom success message variable whenever the selection changes.
• When the form submit button is clicked, we handle two scenarios: when the user has selected an option in the select field, we save the custom success message value in a cookie and submit the form. If nothing is selected, we focus on the select field to prompt the user to make a selection before submitting the form.

JavaScript Setup for the Success Page

On the success page where the custom success message will be displayed, we need to retrieve the stored custom success message from the cookie and update the success message text based on that value.

Below is the JavaScript code we need to include on the success page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script><script>  // Retrieve the custom success message from the cookie  const customSuccessMessage = Cookies.get('success-text-cookie');    // Find the element with the insert-success-text class and update its text with the custom success message  const successTextElement = document.querySelector('.insert-success-text');  successTextElement.textContent = `We will focus on ${customSuccessMessage} for future efforts. Sweet Webflow hacks!`;</script>

The JavaScript code for the success page performs the following actions:

• It retrieves the custom success message from the cookie using the key we stored it with.
• It locates the element with the "insert-success-text" class and updates its text with the custom success message, creating a personalized success message for the user.

Implementation and Cloning the Project

By implementing the above steps and adding the custom JavaScript to the main page and the success page as described, you can enable a custom success message for form submissions on your Webflow site.

To make it easier for you to understand and implement this sweet Webflow hack, we have made the full project available for cloning. You can clone the project to explore and understand how these hacks work, and then use them on your live site.

You can find the complete project for cloning on our website. By cloning the project, you can see firsthand how we set up the Webflow form, implemented the custom JavaScript, and designed the custom success page. This will give you a practical understanding of how to apply this technique to your own Webflow projects.

Thank you for exploring this sweet Webflow hack with us. If you want to stay updated on more Webflow hacks and tips, be sure to subscribe to our YouTube channel for the latest tutorials and techniques. Additionally, if you have any specific hacks or features you'd like to see in Webflow, you can submit your requests on our website.

Start creating engaging and personalized user experiences with Webflow today!