CMS Development

alexacree
Participant | Gold Partner
Participant | Gold Partner

Adding HubSpot forms to Imported HTML Landing Pages

SOLVE

I have preexisting landing pages that I was to recreate in HubSpot to be ablet o use the tracking features. I used the html code from the page and pasted it into design tools to create a custom coded template. Everything looks the same, however I want to edit the page forms to be HubSpot forms. For some reason, I am unable to add modules or make any edits. It seems to be something in the html coding preventing this. Does anyone know how to add hubspot forms to a custom html landing page template?

1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Adding HubSpot forms to Imported HTML Landing Pages

SOLVE

Hey @alexacree 

 

So I'm not familiar with the UI that you're seeing in that screenshot, but I may still be able to offer some advice.

 

  1. Get your markup into a hubspot template
  2. Build the form in the form builder
  3. Locate the form code inside your html and replace it with this Hubl below:
    {% form "my_form" label="My Form", custom_form_html=None, no_title=False, title="" %}
  4. Now edit the contents of your page, you should see the dropdown to select a form
  5. Select your form and publish

That Hubl snippet tells hubspot that you want in that location, and want to be able to replace it easily from the content editor.

 

Hope this get you going in the right direction.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

View solution in original post

3 Replies 3
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Adding HubSpot forms to Imported HTML Landing Pages

SOLVE

Hey @alexacree 

 

Could you share with us the markup and a test page that way we can take look at what is going on and even recreate it?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
alexacree
Participant | Gold Partner
Participant | Gold Partner

Adding HubSpot forms to Imported HTML Landing Pages

SOLVE

https://yellowbirdoffertoday.com/ this is the landing page I am trying to recreate. Once it's in HubSpot I cannot make any edits to the page or add a hubspot form.Screen Shot 2020-01-28 at 2.12.01 PM.png

0 Upvotes
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Adding HubSpot forms to Imported HTML Landing Pages

SOLVE

Hey @alexacree 

 

So I'm not familiar with the UI that you're seeing in that screenshot, but I may still be able to offer some advice.

 

  1. Get your markup into a hubspot template
  2. Build the form in the form builder
  3. Locate the form code inside your html and replace it with this Hubl below:
    {% form "my_form" label="My Form", custom_form_html=None, no_title=False, title="" %}
  4. Now edit the contents of your page, you should see the dropdown to select a form
  5. Select your form and publish

That Hubl snippet tells hubspot that you want in that location, and want to be able to replace it easily from the content editor.

 

Hope this get you going in the right direction.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev