The Form Slider HubSpot custom module allows you to add a series of questions, each of which will appear in a separate slide, and submit these through a HubSpot form using the Forms API.
You can try a demo of the form slider here.
When you add the module to your template and click on it, you will find several customisation options on the left-hand side:
The custom module allows the following customisations:
- Headline: the headline that appears at the top of the module
- Subheader: the text that appears below the module header
- Portal ID: your HubSpot Portal ID (more on how to find this in the FAQs below)
- Form ID: the ID for the form you would like to submit data to (more on how to find this in the FAQs below)
- Questions (each question appears on a different slide, accessed using the "Previous" and "Next" buttons)
- Question: the question that appears above the input field
- Form Field Internal Name: the internal name for the form field (more on how to find this in the FAQs below)
- Placeholder Text: the placeholder text that appears
- Confirmation Message: the message displayed to users after they submit the form.
- Background Colour: the background colour for the module
- Button Colour: the colour for the "Next" and "Finish" buttons
Additional customisation is also possible, but requires modifications to the code. If you do not have access to a developer who can help you out, you can always contact me for a quote. By editing the code, it's possible to make all kinds of modifications, such as changing the styling, adding in other types of input (e.g. checkboxes or multiple questions per slide) or adding smart content in the final slide.
How do I find my Portal ID?
When you log into your ParseHub portal, you should be able to find your Portal ID by clicking on your image in the upper right-hand corner. This HubSpot Help Centre article has more information.
How do I find the Form ID?
You can find the HubSpot Form ID (or Form GUID) from the URL or embed code for the form. This HubSpot Help Centre article has more information.
How do I find the form field's internal name?
The "internal name" is the API identifier for the property. It’s unique and not editable once created. It's automatically determined based on the original label that you set for a contact property. If the custom property is created by the Salesforce connector, HubSpot automatically appends a "__c" to the end of the HubSpot property name (Salesforce custom field names also use the same naming convention).
You can find it by going to Settings > Properties and clicking on the "View" button that appears when you hover over the property. You will find it under the "Internal Name" section.
Why can't I edit the "Email" question?
Emails are always required in order to submit a HubSpot form, and therefore it has been added as a mandatory slide that appears as the final question slide.
Can I make other questions mandatory?
No, although this is possible by customising the code. If you do not have access to a developer who can help you out, you can always contact me for a quote.
Why is the text styled in this way?
The text should use the same styling as the rest of your website. The primary headline is an H2 element (Heading 2), the subheader is a p element (Paragraph), the question is an H3 element (Heading 3) and the input text should have the same font as your regular inputs with a 40px size.
If the style looks quite off, please contact me and I can take a look into it for you.
Can I use other property field types?
The module allows you to select from the following property field types:
- Single Line Text
- Dropdown Select
If required, you can customise the code to include additional property field types. If you do not have access to a developer who can help you out, you can always contact me for a quote.
Support and Feedback
If you have any questions, find any bugs or have any feedback, I'd love to hear from you! You can contact me here.