Explore

Form Routing

Objective:

Investigate and implement a solution to conditionally route users to different HubSpot meeting calendar links based on their selection in the "Speak to Us" form and copy completed fields from the initial form submission to the meeting calendar booking.

Background:

Boundless currently uses a HubSpot form called "Speak to Us" that redirects to a webpage loading a HubSpot meetings calendar link. The current HubSpot Pro version does not support native conditional routing to different meeting calendar links. We need to create a solution where, based on the user's selection in the form, they are redirected to the appropriate calendar link, and the fields completed in the initial form submission are copied to the meeting calendar booking.

Requirements:

Form Details:

The "Speak to Us" form should have a field where users can select their role: "I am an employer" or "I am an employee."

Redirection Logic:

If a user selects "I am an employer," they should be redirected to an Account Executive's HubSpot meeting calendar link.

If a user selects "I am an employee," they should be redirected to an SDR's (Sales Development Representative) HubSpot meeting calendar link.

Field Copying:

Fields completed in the initial form submission (first name, last name, company, job title, and email) should be copied over to the fields on the HubSpot meeting calendar booking page.

Steps to Implement:

Verify Form Configuration

Ensure the "Speak to Us" form includes a dropdown or radio button field for role selection with the options "I am an employer" and "I am an employee."

Add JavaScript for Conditional Routing

Add the following JavaScript to the webpage where the form is embedded to handle the form submission event and redirect users based on their selection, while copying over the form fields.

html

Copy code

// Function to handle form submission

function handleFormSubmit(event) {

event.preventDefault(); // Prevent default form submission

var formData = new FormData(event.target);

var userType = formData.get('how_can_boundless_help'); // Ensure this matches the form field name

// Define the calendar URLs

var accountExecutiveCalendarUrl = 'https://meetings.hubspot.com/account-executive-calendar'; // Replace with the actual URL

var sdrCalendarUrl = 'https://meetings.hubspot.com/sdr-calendar'; // Replace with the actual URL

// Build query string from form data

var queryString = new URLSearchParams();

queryString.append('firstname', formData.get('firstname'));

queryString.append('lastname', formData.get('lastname'));

queryString.append('company', formData.get('company'));

queryString.append('jobtitle', formData.get('jobtitle'));

queryString.append('email', formData.get('email'));

// Redirect based on user type

if (userType === 'I am an employer') {

window.location.href = accountExecutiveCalendarUrl + '?' + queryString.toString();

} else if (userType === 'I am an employee') {

window.location.href = sdrCalendarUrl + '?' + queryString.toString();

}

// Wait for the DOM to be fully loaded

document.addEventListener('DOMContentLoaded', function() {

var formElement = document.querySelector('form'); // Adjust the selector to target your form

formElement.addEventListener('submit', handleFormSubmit);

});

</script>

Embed the Form and Script

Ensure the HubSpot form is correctly embedded on the webpage where the JavaScript will be included.

html

Copy code

hbspt.forms.create({

portalId: 'your-portal-id', // Replace with your actual HubSpot portal ID

formId: 'your-form-id', // Replace with your actual HubSpot form ID

target: '#hubspotForm'

});

</script>

Testing

Test the form to ensure that selecting "I am an employer" redirects to the Account Executive's calendar and selecting "I am an employee" redirects to the SDR's calendar, and that the form fields (first name, last name, company, job title, and email) are copied over to the meeting calendar booking page.

Code to Copy Over Data:

To copy over the data from the initial form submission to the meeting calendar booking page, the JavaScript builds a query string from the specified form fields. This query string is appended to the URL of the calendar booking page. The receiving page needs to be configured to parse this query string and pre-fill the form fields accordingly.

Notes:

Ensure the form field names (firstname, lastname, company, jobtitle, and email) in the JavaScript match the actual field names in the form.

Adjust the form selector in the JavaScript if necessary to accurately target your form.

Replace the placeholder URLs (accountExecutiveCalendarUrl and sdrCalendarUrl) with the actual HubSpot meeting links.

Caveat:

This is one potential way to achieve the desired functionality. There might be other methods or tools that can also accomplish this task that might be already implemented at boundless.

Timeline:

Initial Investigation and Setup: Wednesday, 29th May

Implementation of JavaScript and Embedding: Thursday, 30th May

Testing and Validation: Friday, 31st May

Final Adjustments and Go Live: Monday, 10th June

Deliverables:

Fully functional form with conditional redirection based on user selection.

Documentation of the implementation steps for future reference.

Calendar Links:

AE calendar link:

https://meetings-eu1.hubspot.com/james-ellis1/speak-to-us-ae⁠

⁠

SDR calendar link:

https://meetings-eu1.hubspot.com/james-ellis1/speak-to-us⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.