This article will help you through the process of creating a HubSpot form and then embedding that form into a WPHubSite WordPress website. You will have to create the form in HubSpot first and then it can be easily embedded into any Site Builder page or using the standard WordPress editor.
Here’s how we do it.
Create A New Form In HubSpot
Before you have anything to embed in your WPHubSite WordPress website you have to create it. That’s what HubSpot is for. Because all your contact data should be stored in HubSpot, it makes sense that all forms on your website run directly through HubSpot.
This way, anytime a visitor to your website runs across a form on your website and fills it out, that information will go directly into HubSpot. If the visitor is already a contact in your HubSpot and has previously filled out a form, their information can even pre-populate in your forms.
So, let’s get started creating a basic contact form in HubSpot so we can embed it into a WPHubSite Site Builder page. If you haven’t created a WPHubSite Site Builder page yet, make sure you do that first.
Step 1: In your HubSpot account, click the Marketing tab.
Step 2: Click on the Forms menu option.
Step 3: Click the Create form button.
Step 4: Choose Regular Form from the option. If you wanted to create a pop-up form you can do that also but you don’t have to embed that on your site, you simply have to choose what page or pages you’d like it to pop-up on.
Step 5: Click Next.
Step 6: You can either choose a pre-created form template from HubSpot or you can choose to start with a blank template. For this example we chose the Contact us template to simplify things. You can explore with he different option sin HubSpot.
Step 7: Click Start.
Now we’re off to creating a form for anything right in HubSpot. That means more leads right into your CRM!
Step 8: Click the form name and give it a unique name that reflects that the form is. If you ever want to edit your form later this is extremely helpful.
Step 9: We selected a the contact template but you can still customize it. The template is just a start for your forms. You can drag all types of other fields from this section into your form (the right side).
You can put form elements above, below, or event beside other form elements. We built our in Marketing Free but if you have Marketing Starter then you’ll have even more form options!
Step 10: Click on the Follow-up tab.
Step 11: This is an optional tab but if you want someone to receive a response email when they fill out this form, click the Create follow-up email button. If you don’t want a follow-up email then continue on to step 16.
Step 12: Fill out all the options in this box including choosing who the email should come from, the subject of the email, and what your email should say. If you haven’t set up an email footer in HubSpot then you’ll be required to do so. All commercial emails require your business address and contact information in it.
Step 13: Scroll down and click the Save button.
Step 14: Verify all your information is correct. You can click the small pencil icon in the heading to edit the email or the trash can to remove it and start over.
Step 15: Click the + button if you’d like to add another email to your follow-up email. This is perfect for creating a lead generation form that emails a link to a lead magnet and then follows up to offer to answer any questions. There are more really cool options we’ll get to if you’re creating a lead gen form.
Step 16: Click on the Options tab.
Now it’s time to configure all the options of your email. This is where the good stuff is that you can do a lot with for lead generation forms.
Step 17: Choose how you want the form to behave after someone fills it out and clicks the send button.
- Your website visitor can see a message if they fill out your form (it can even have a link to a lead magnet in it!).
- Linking to another page on your website lets you build a whole landing page for an upsell, lead magnet download, or just an information page saying thanks! This is a great page to place a conversion module if you’re running an A/B experiment on your form or other elements on your page.
Step 18: If you selected a message then this is where you personalize your message and include a link if you’d like too.
Step 19: If a website visitor fills out this form and already has a contact in your HubSpot CRM then this option will let that contact owner know the website visitors filled out this form. This is really helpful if you want to reach out to the website visitor to follow up on their interest.
Step 20: Choose who you’d like alerted if this form is filled out or leave it empty if you chose the contact owner to be alerted. There may be no contact owner so it’s a good idea to choose someone here.
Step 21: If the visitors who fills out this form doesn’t have a contact, selecting this option will create a contact record for them. This is a good idea to keep selected.
Step 22: Click they Style & preview tab.
Step 23: If you have the have a version of HubSpot that allows it, you can create this form in raw HTML which you can then style on your website. Otherwise, the form is going to be contained inside of a frame within your website (called an iframe). This is only useful if you want to have 100% control over how your form looks.
Step 24: Choose from one of the predefined templates for how your form fields and button looks. With Marketing Starter you will also have a bunch of additional styling options in addition to these general options.
Step 25: Customize your form with all the style options available if you’re on Marketing Starter. We’re customizing a Marketing Free form so don’t have many options.
Step 26: Click the Publish button when you’re completely finished with setting up your form. This will make your form live and bring up a popup with a link to it.
Step 27: Click on the Embed code tab.
Step 28: Click the Copy button to copy the code in the box. You’ll want to keep this code somewhere so you can paste it when you’re ready in Site Builder.
You can always retrieve this code again in your list of HubSpot Forms or you can use the HubSpot form shortcode right in your WPHubSite website. Since you likely have your code at this point then you can head right to embedding the form into a Site Builder page.
Retrieve A HubSpot Form Embed Code
You don’t have to edit your forms every time you want to get your form embed code. You do have to go into HubSpot but you can get the embed code for any of your forms right from the form list screen.
Here’s how.
Step 1: On the Marketing tab click on the Forms option.
Step 2: Hover over the form item you’d like to get the embed code for.
Step 3: Click the Actions drop-down menu.
Step 4: Click the Share form option from the Actions drop-down.
Step 5: Click on the Embed code tab.
Step 6: Click the Copy button to copy the embed code to your clipboard.
Retrieve A HubSpot Form Shortcode
If you’re not in HubSpot at the moment but are in your WPHubSite WordPress website then there’s an easy way to get a code you can use for forms.
In the WPHubSite WordPress admin dashboard, follow the following steps to retrieve a shortcode you can use.
Step 1: Hover over HubSpot on the WPHubSite WordPress admin dashboard menu.
Step 2: Click the Forms option.
Step 3: Hover over the form you’d like to copy the shortcode for.
Step 4: Click the Copy shortcode button.
That’s it! Now you’ll have a special shortcode (much shorter than the embed code) that you can use anywhere in your WPHubSite WordPress website.
You can also edit any form directly in HubSpot from this section or go into HubSpot to view any submissions through any form.
Now onward to embedding the form into a Site Builder page using the embed code or shortcode.
Embed The Form Into A Site Builder Page
Now that you have the HubSpot form embed code or shortcode in hand it’s time to do something with it. You can embed either code anywhere in your site. With the embed code, it needs to be in an HTML module but for the shortcode, you can place it in any module that accepts text.
That’s exactly what we’re going to do in order to put the HubSpot form into a page designed with the WPHubSite Site Builder.
Let’s get started embedding your HubSpot form into your page.
Step 1: Click the Site Builder link on your WPHubSite WordPress admin bar from any page on your website that’s a Site Builder page.
Step 2: Click the + icon to add a new module.
Step 3: Drag an HTML module where you want to place the form in your page layout.
Step 4: Paste your HubSpot form embed code or shortcode into the box for your custom HTML. Remember, if you’re using the HubSpot shortcode from your WPHubSite then you can use a text module too.
Step 5: Click the Save button.
Step 6: Click the Done button.
Step 7: Click the Publish button unless you’d like to see the layout first by saving it as a draft.
That’s it! Your HubSpot form will show up where you placed it on your page. There’s a maximum width for the HubSpot form, though, so it looks a bit odd aligned all the way on the left.
Let’s go one step further and change it so it’s contained a bit more in the middle of the page with padding on the left and right.
To do that follow these steps after going back into the Site Builder.
Step 8: Hover over the HTML module column and then click the Edit Column icon.
Step 9: Click the Column Settings option.
Step 10: Click the Advanced tab.
Step 11: Select the percentage option from the unit drop-down menu next to the column padding.
Step 12: Change the padding for the top and bottom to 0 and 25 for right and left. This will be 25% because you chose the percent unit of measure.
Step 13: Click the Save button.
Now the form looks much better even though it’s not completely centered. It’s more likely that you’ll have the form in a column which means it would be about the right size anyway.
Now you’ve created a new form in HubSpot, retrieved the HubSpot Form embed code or shortcode, and now embedded that form into your WPHubSite WordPress website page.
You can also do things like create an experiment with two different forms from HubSpot to see which one performs better. The sky is the limit what you can do with your WPHubSite and HubSpot now that you know how to embed forms.
You can use forms for lead generation, contact forms, or anything else.