How to Redirect to a Thank You Page After Appointment Submission from HeavySet Tech Forms

How to redirect users to a thank you page after they submit an appointment: this tutorial will guide you through adding the necessary script to implement this redirection.

Prerequisites

Before you begin, ensure you have the following:

• Access to Your Website’s Code: Ability to edit the HTML and JavaScript of the webpage where your HeavySet Tech form is embedded.
• A Thank You Page: A dedicated URL where users will be redirected after submitting an appointment (e.g., https://yourwebsite.com/thank-you ).
• Basic Knowledge of JavaScript: Familiarity with JavaScript will help you understand and implement the script effectively.

Step-by-Step Guide

Follow these steps to add the redirection functionality to your HeavySet Tech form.

Add the Script to Your Webpage

Insert the following script into the HTML of the page where your HeavySet Tech form is embedded. It's best to place the script just before the closing </body> tag to ensure that the page content loads before the script executes.

<script>
  /**
   * @typedef {Object} LeadData
   * @property {string} email - The email of the lead.
   * @property {string} phoneNumber - The phone number of the lead.
   * @property {string} firstName - The first name of the lead.
   * @property {string} lastName - The last name of the lead.
   * @property {string} street - The street address of the lead.
   * @property {string} postalCode - The postal code of the lead.
   * @property {string} country - The country of the lead.
   * @property {string} oneTimeToken - A unique token for the session.
   */

  window.addEventListener('message', function (event) {
    // Ensure the event is from HeavySet Tech's trusted origin
   if (event.origin.indexOf('heavyset.tech') === -1) return;

    // Handle Appointment Submissions
    if (event.data.type === 'appointmentSubmission') {
      /** @type {LeadData} */
      var leadData = event.data.data;
      // Process appointment data as needed
      console.log('Appointment data received:', leadData);

      // Redirect to the thank you page
      window.location.href = 'https://yourwebsite.com/thank-you';
    }
  }, false);
</script>

Explanation of the Script:

• Event Listener: The script listens for message events, which are dispatched when the HeavySet Tech form sends data to the parent window.
• Origin Verification: It verifies that the message originates from a trusted source (heavyset.tech ) to ensure security.
• Handling Appointment Submissions: When an appointmentSubmission event is detected, the script processes the appointment data and redirects the user to the specified thank you page.

2. Customize the Thank You Page URL

Locate the following line in the script:

window.location.href = 'https://yourwebsite.com/thank-you';

Replace 'https://yourwebsite.com/thank-you' with the actual URL of your thank you page. For example:

window.location.href = 'https://example.com/thank-you';

Test the Implementation

After implementing the script, verify that the redirection works as expected.

Testing Steps:

1. Open Your Webpage:

   • Navigate to the webpage containing the HeavySet Tech form.

     Submit an Appointment:

   • Fill out the form and submit an appointment.

     Observe Redirection:

   • Ensure that after submission, you are redirected to the specified thank you page (https://yourwebsite.com/thank-you ).

     Check Browser Console:

   • Open your browser’s developer console to verify that the appointment data is logged correctly with messages like 'Appointment data received:' followed by the lead data.

Conclusion

By following this tutorial, you can implement a redirection to a thank you page after users submit an appointment through your HeavySet Tech form.

If you’re not yet using HeavySet Tech, you can schedule a live demo here to see how our platform can benefit your business.