Hubspot Landing Page Using Raw HTML integrated with Salesforce
Hello,
We have a hubspot landing page that is provided to customers via link. It is a questionnaire to collect information form the customer. The customer completes this form clicks submit and I believe via a salesforce site it is then mapping and creating a record with the data from the page to a custom object in Salesforce related to a specific opportunity.
Currently this whole page is written using the Raw HTML option. I need to understand my options for creating more of a drag and drop form to be used for easier support from the team as we are not developers. So, we have text fields, picklist fields, etc on the current page. There is also criteria on when to show and not show additional questions.
Any direction would be great. Or if this can be handed to the right team. I have not used Hubspot in quite some time.
let's start with a quick refresher of HubSpot forms.
Drag&drop forms are build from properties which are set up in the Hub settings (gear icon top right corner)
You can drag&drop them into a form in the form builder(marketing -> lead gen -> forms)
Starting from Marketing Pro you can set up conditional logic to each field like "show this field if a previous field has value X or is not empty"
HubSpot currently don't support multi-step forms(a real bummer) - but there are ready to use code-solutions for custom modules which can be set up for marketers by developers
If you want to dive more into drag&drop and away from hardcoded HTML templates my personal approach would be a custom module which let's you select drag&drop forms and keep the salesforce sync
Step 1: Create a new module - if you're not that familiar with CLI you can do it via the design-tools by right-clicking the folder the module should be located in and selecting "new file", selecting "module", give it a name, where it should work/be selectable (pages, blogs, email, quotes)
Step 2: Grab any existing embed code or create a new drag&drop form. It doesn't have to be a real form since you'll make the embed code flexible in a bit. Paste it into the module.html(HTML+Hubl) area.
Congratulations 🎉 you've made the embed code flexible! A page-creator/marketer can now select any form from the existing ones
Step 4: The code above is great and works but now you need to dive into the customization. For this check out the How to customize the form embed code documentation.
For instance - if you want (and need) to send the form data to Salesforce after a submit you can change the embed code like this:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR-PORTAL-ID",
formId: "{{ module.form.form_id }}",
onFormSubmit:{
{# Some JavaScript with your Salesforce API call #}
}
});
</script>
You don't want to use the default HubSpot formstyling? Disable it by putting " css:'' " into the code like this
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR-PORTAL-ID",
formId: "{{ module.form.form_id }}",
onFormSubmit:{
{# Some JavaScript with your Salesforce API call #}
},
css: ''
});
</script>
You'd like to add a specific class to it? Add it like this
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR-PORTAL-ID",
formId: "{{ module.form.form_id }}",
onFormSubmit:{
{# Some JavaScript with your Salesforce API call #}
},
css: '',
cssClass: 'SOME-CLASS'
});
</script>
You'd like to have it more flexible or provide more options to the page-creator/marketer? Add fields at the right sidebar like boolean, choice, text(rich-text not recommended) etc. to the module and enrich the embed code like this
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR-PORTAL-ID",
formId: "{{ module.form.form_id }}",
onFormSubmit:{
{# Some JavaScript with your Salesforce API call #}
},
{% if module.dont_use_default_styling %} {# this is a boolean #}
css: '',
{% endif %}
cssClass: '{{ module.custom_class }}' {# this is a text field #}
});
</script>
You can also get quite creative with repeaters/for-loops if you want/need to.