Embed Form in Blog

SOLVE
Highlighted
MRF
Occasional Contributor

I was wondering if someone could help me to embed a hubspot form in my hubspot blog. 

 

Thank you in advance!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor

@MRF,

 

If your blog is built in hubspot then it is either built using the template builder or custom coded.

 

First you need to go to the design manger (content->design manager) and find your template. If you are logged into your hubspot account and go to the blog you should be able to click the "sprocket" that appears in the top right of the page and click on the edit page template option and it will take you straight to the template. If not try to find it yourself in the file manager.

 

If it is a template builder template you can just drag and drop a form module where you want it. If you are wanting to add a subscription form there is a module for this. Otherwise just add a normal form module. You will want to do the set up for the form in the template if you want it to be on your listing page as your listing page does not have an editor. Dragging a module of any kind, including forms, will add the module to both your listing and article pages.

 

If you only want the form on one or the other than you will need to use hubl. Your blog template will have a module where the main content is with two buttons, one for listing and one for post.  each of these will open a code editor containing a mix of html and HubL (Hubspot's version of a python templating language called jinja). It's a little harder to navigation than the template builder but if you look for position queues you should be fine. go here: http://designers.hubspot.com/docs/hubl/hubl-supported-modules#hs_cos_wrapper_widget_2808334243 and look at how to build out a form in HubL. I would create your Form HubL in notepad or another text editor. Once you have the "form-to-use" and other settings how you want them just copy the code from your text editor and paste it where you want it into the template. 

 

If you blog template is coded then follow the same process as above. 

 

I suppose you could also go the forms in your navigation and use the gear icon on the form you'd like to use, grab the embed code, and paste that in your blog. I haven't done this but it should work. It doesn't feel as clean as adding it natively though. 

 

Need help? Hire Us Here

- Jonathan Sumner
9 Replies 9
cpk
New Contributor

Are you trying to embed your form to an external blog? You should be able to do this with this article that shows you how to get the embed code for your form, and also walks through adding the tracking code to your page to ensure that the form submissions will be logged to your Contacts. Or have you already tried these steps and are you running into an error? 

Reply
0 Upvotes
MRF
Occasional Contributor

It is not an external blog. It is a hubspot blog.

Reply
0 Upvotes
Esteemed Advisor

@MRF,

 

If your blog is built in hubspot then it is either built using the template builder or custom coded.

 

First you need to go to the design manger (content->design manager) and find your template. If you are logged into your hubspot account and go to the blog you should be able to click the "sprocket" that appears in the top right of the page and click on the edit page template option and it will take you straight to the template. If not try to find it yourself in the file manager.

 

If it is a template builder template you can just drag and drop a form module where you want it. If you are wanting to add a subscription form there is a module for this. Otherwise just add a normal form module. You will want to do the set up for the form in the template if you want it to be on your listing page as your listing page does not have an editor. Dragging a module of any kind, including forms, will add the module to both your listing and article pages.

 

If you only want the form on one or the other than you will need to use hubl. Your blog template will have a module where the main content is with two buttons, one for listing and one for post.  each of these will open a code editor containing a mix of html and HubL (Hubspot's version of a python templating language called jinja). It's a little harder to navigation than the template builder but if you look for position queues you should be fine. go here: http://designers.hubspot.com/docs/hubl/hubl-supported-modules#hs_cos_wrapper_widget_2808334243 and look at how to build out a form in HubL. I would create your Form HubL in notepad or another text editor. Once you have the "form-to-use" and other settings how you want them just copy the code from your text editor and paste it where you want it into the template. 

 

If you blog template is coded then follow the same process as above. 

 

I suppose you could also go the forms in your navigation and use the gear icon on the form you'd like to use, grab the embed code, and paste that in your blog. I haven't done this but it should work. It doesn't feel as clean as adding it natively though. 

 

Need help? Hire Us Here

- Jonathan Sumner
Regular Contributor

@Jsum - Thanks for this info! As I edit our blog template I'm wondering if it's possible to set the form widget to be invisible (or contain no form) until the blogger goes into the blog posting tool and selects a form from the drop down list. This is useful because we have certain blog posts that should contain a signup (webinar announcements) and certain posts that should not.

 

I tried a few things and I'm not seeing a way to do that. Do you have any suggestions?

 

Thanks in advance.

Reply
0 Upvotes
Esteemed Advisor

@Stanczak,

 

Sorry this is so late. As far as hiding the form goes, Hubspots new custom module interface has a form field. You can wrap the form markup in a condition checking if the form is set. If the form is set then the form would show, if not then anything inside the condition would be left out by the server, which is better than hiding things with javascript.

 

{% if form.widget.name.foo %}
    {# form snippets and markup #}
{% endif %}

 

Need help? Hire Us Here

- Jonathan Sumner
Regular Contributor

@Jsum Wonderful! That sounds like a perfect solution. Looking forward to trying this next time I have a chance to work on the blog templates.

New Contributor

So, if I add the form module to my template....how can I remove it from blogs that don't need the form? I only want to have forms on a few blogs. Thoughts?

Occasional Contributor

Hi Kat,

If you go to your form editor, you can click Share and then the embed code for the form will appear. From there, you can copy the code and paste it into the Source Code which you can find under Tools in the blog editor. 

The form should then appear where you would like it. 

Let me know if that helps!

Reply
0 Upvotes
Esteemed Advisor

@KatHall,

 

I believe that the rich text editor has a form insert button.... If not that might be a good idea because then you could add forms like content, as needed, provided that the form belongs somewhere in the content area. 

 

There are a number of ways you could set up a toggle to show/hide a module, including a forms module. 

 

1. Custom modules in new design tools

The new custom module's interface has fields for almost any element you need, including forms and ctas. Because you have full markup control you can use HubL to set up conditions based on whether or not a field has a value. In this case, you can wrap the form snippet in a HubL condition checking the form. If the editor does not choose a form then no form would be set and so the condition would be false and nothing inside the condition would be sent from the server. to me this is the cleanest option, and you can literally just make a custom module for this function around your form, that simple. 

 

2. Wrapping HTML

Drag and drop modules in a drag and drop template all have a list of settings. I think Wrapping HTML is a setting that all of the modules have, including custom modules if I am not mistaken. In this situation {{html}} represents the markup put out by the module so if you nest that token inside a div, for instance, then all of the markup from the module would be output inside the div tags. This means you can get creative with classes and structure to do a number of things. I like to use this to create wrappers around modules for animation purposes.

My best thought right now is that you could add in a toggle tag and nest the {{html}}  in a condition checking the toggle. The editor will have  toggle button and if the toggle is turned on then the markup will exist on that page when loaded, though you might have to refesh the editor to see it the first time. 

{% boolean "form_toggle" label='Show', value=True, export_to_template_context=true %}

{% if widget_data.form_toggle.value %}
{{ html }}
{% endif %}

 

 

Need help? Hire Us Here

- Jonathan Sumner