Hubspot Landing Page Using Raw HTML integrated with Salesforce

Developer Support APIs & Integrations
1

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.

Thank you.

Rachel

2

Hi @RLinder4,

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.

It should look 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: "acad5b30-9309-47c8-9b7c-30f413c787ae"
 });
</script>

Step 3: Add a form field at the right sidebar to the module and put it into 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 }}"
 });
</script>

Congratulations :tada: 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.

hope that helps

best,

Anton