Pop-up forms tool in HubSpot, let's you create engaging lead capture forms to attract new leads. They are available for the blog post, landing page, or website page hosted on HubSpot. You can also add pop-up forms to an external page by installing HubSpot tracking code on your external site, or the HubSpot WordPress plugin on your WordPress site.
To create a pop-up form
- Go to Marketing>Lead capture>Forms in your HubSpot account.
- Click Create form.
- Select Pop-up form in the left sidebar menu.
- Click Next.
- Click the edit pencil icon at the top and enter a name.
1. Type - Select the type of pop-up form
Click to select any type of form in the Type tab out of the following three types:
- Pop-up box: appears as a pop-up box on your page.
- Dropdown banner: appears as a dropdown banner from the top of your page.
- Slide-in box left/right: appears as a slide-in box from the bottom left or right of your page.
Click Next.
2. Callout -Select the action
Customize callout text in the Callout tab.
- Featured image: select a featured image to display on both the callout and form step.
- Callout text: this is the main header on the callout.
- Callout body (optional): added information on the callout. This is optional
- Callout button text: this is the callout form button text.
- Theme color: set the theme color for the button of your pop-up form.
- Link button: select where the callout button will link to:
- Form step: it will direct your users to a form from the pop-up form. You can customize your form from the Form tab.
- Non-HubSpot URL: enter a link to an external page.
- HubSpot page or blog post: click the dropdown and select a HubSpot page or blog pos.
- File download: click Browse files to add your file.
- Meeting link: click the dropdown and select the meeting link.
- Calendar event: create a calendar event and set the Event name, Start date, End date, Timezone, Location, and Details. This event will be then created in the customer's Google or Outlook calendar.
Callout customization will appear in the preview on the right to give you an idea of what your pop-up form will look like on your page after you publish it.
3. Form - Customize your pop-up form
Customize your pop-up form from the Form tab. This will the form that your visitors will see when they click the pop-up form button.
- Form body (optional): you can add body text to explain what values you are providing through pop-up form.
- Added fields: The email field is there by default.
- Click + Add another form field to add additional fields to the form.
- Click the pencil icon, next to the field to customize the way a form field appears to visitors,
- Form button text: the form button text from the Callout tab will automatically carry over into this field. To make any changes to the button text on the form step, update it here.
- Notice and consent / legitimate interest (GDPR): if GDPR is enabled in your HubSpot account, you can set the notice and consent option for this pop-up form. Click the pencil icon to customize the default text,
- Language: set the form language.
- Set lifecycle stage: choose the lifecycle stage, the contacts who submit the pop-up form will have.
- CAPTCHA: click the toggle CAPTCHA to switch on to provide additional protection against spam submissions.
4. Thank you - Create a thank you message
Enter a thank you message for your visitors to see after they submit your pop-up form, on Thank You tab.
- Thank you message: This will be the message your visitors will see after they are done. Customize the font from the menu available.
- Select the checkbox Add a button.
- Customize the Button text.
- Non-HubSpot URL: redirect visitors to an external page.
- HubSpot page or blog post: choose a HubSpot page or blog.
- File download: this will redirect visitors to a file download. Click Browse files to select a file from your file manager.
- Meeting link: this allows visitors to schedule a meeting with someone on your team using a meeting link. Click the dropdown Meeting Link to select an existing meeting link.
- Calendar event: this allow a visitor to add a new calendar event to their Google or Outlook calendar. Enter an event name, date, time, timezone, location, and details.
5. Follow up - Create a follow-up email
Create a follow-up email that your visitor will receive after submitting your form on the Follow up tab.
- Click Follow-up email.
- Subscription type: click the dropdown to select the subscription type of your follow-up email.
- From user: click the dropdown to select the sender of your follow-up email.
- Subject line: enter a subject for the follow-up email.
- Body: enter an email body text to continue engaging your contact.
- Edit email footer: click to customize your company details in your email configuration settings.
- Click Save. A brief preview of the email will appear. Click Add another email to add up a follow-up email.
- Click Next.
6. Targeting - Customize where your pop-up form displays
Target your visitors by choosing when you want this pop-up form to appear on your site.
Website URL
Target your visitors by choosing the web pages where you’d like your pop-up to appear.
To set criteria based on a website URL:
-
- Click the first dropdown and select Website URL.
- Click the second dropdown and select is all pages, is, contains, begins with, or matches wildcard and enter your criteria.
- Click Add rule to add another rule.
- Click Add exclusion rule to exclude the pop-up form on certain pages.
Visitor information and behavior
You can have more control over who sees your pop-up by adding optional filters based on information about your visitors.
- Click the drop-down When and select your filter to add rules for when to show your pop-up form to specific visitors.
- Click Add rule and select your filters to add more rules for when to show your pop-up form.
- Click Add exclusion rule and select to add more rules for when to hide your pop-up form, filters.
Triggers
Set when the pop-up form should appear on the page.
- On 50% scroll: the form will appear when the visitor has scrolled halfway down the page.
- On exit intent: the form will appear when the visitor moves their cursor to the top bar of the browser window.
- After elapsed time: the form will appear after the specified amount of seconds.
Click Next.
7. Options - Further customize your pop-up form
On the Options tab, customize the following options:
- Scheduling: to schedule a pop-up form so it is only active from a specific date.
- Small screen sizes: to disable your pop-up form on mobile devices, select the Turn off pop-up form on small screen sizes checkbox.
- Show dismissed pop-up form again after: to set the amount of time that should pass after a visitor dismisses the pop-up form before they can see it again.
- When contacts are captured, send email notifications to: select a user or team to receive notifications when contacts are captured.
- Push new contacts to your email provider (optional): to set up an email provider to push contacts to, click Manage in settings.
Click Next.
8. Preview and Publish - View a preview of your pop-up form and set it live
Test an interactive preview of your pop-up form on the Preview tab.
- Click the Desktop, Tablet, or Mobile buttons to see how your pop-up form will appear on different devices.
- To view each step of the pop-up form, click < and >.
- Click Publish to set your pop-up from live.