Can someone provide a detailed tutorial on creating a 2-page sign-up form on Webflow? Specifically, the tutorial should include information about passing data from page 1 to page 2, having a custom waiting text on the 'next page' button, adding a pause on the first 'next page' button, implementing basic validation for email and phone number, and utilizing the form success message setting. Thank you!

Creating a 2-page sign-up form in Webflow involves several steps, including data transfer between pages, button customization, and form validation. Here’s how you can do it:

​

1. Set Up the Two-Page Form Structure

• Create Two Pages: Start by designing your first page (Page 1) with the initial form fields, and your second page (Page 2) for the additional information or confirmation.
• Add Form Elements: Use Webflow’s Form block to add input fields. Page 1 can include fields like Name, Email, and Phone, while Page 2 might gather more detailed information.

​

2. Transfer Data from Page 1 to Page 2

• Use Hidden Fields: On Page 2, add hidden input fields for each data point you need from Page 1.
• Create URL Parameters: Use JavaScript to append form data as URL parameters when navigating from Page 1 to Page 2. Script placement can be done in “Before Body End” custom code section in Page 1’s settings.

​

3. Custom Waiting Text on 'Next Page' Button

• Adjust Button Text: In your Webflow Designer, select the button and add a custom attribute or embed code snippet to change the button text upon user click, such as adding onclick="this.innerHTML='Loading...'".

​

4. Pause Before Proceeding to the Next Page

• JavaScript Delay: Implement a delay using JavaScript by setting a timeout function before redirecting to the next page. This can be added as an embedded HTML element (using <script>...</script> within a custom code block).

​

5. Implement Basic Validation for Email and Phone Number

• Pattern Validation: Utilize Webflow’s built-in input field settings to apply basic pattern validation.
• For Email, ensure the field type is set to “Email.”
• For Phone Number, use a regex pattern in the input settings that matches your format (e.g., pattern="^\d{10}$" for a 10-digit number).

​

6. Utilize the Form Success Message Setting

• Define Success Message: In the form settings, configure the success state message to confirm submission. You can customize this message to thank the user or provide further instructions.

​

Summary

By setting up a two-page sign-up form in Webflow, you can effectively manage user data across pages via URL parameters and hidden fields. Validating inputs ensures quality data, while custom button text and delays enhance user experience. Use Webflow’s form success settings for an effective submission confirmation. Implement all steps and check functionality thoroughly before going live.