Create pop-up forms

Written by HubSpot Support | Feb 5, 2020, 5:00:00 AM

With the pop-up forms tool, you can easily create engaging lead capture forms to attract new leads. Pop-up forms are available for any blog post, landing page, or website page hosted on HubSpot. To add pop-up forms to an external page, you must install the HubSpot tracking code on your external site, or install the HubSpot WordPress plugin on your WordPress site.

In your HubSpot account, navigate to Forms:
- For Professional and Enterprise accounts, navigate to Marketing > Lead Capture > Forms.
- For Starter and Free accounts, navigate to Marketing > Forms.

In the upper right, click Create form.
In the left sidebar, select Pop-up form.
In the upper right, click Next.
To customize the name of your pop-up form, click the edit pencil icon at the top and enter a name.

1. Type - Select the type of pop-up form

There are three types of pop-up forms, on the Type tab, select the type of pop-up form to create:

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.

In the upper right, click Next.

2. Callout - Select the action

On the Callout tab, add and customize callout text to grab your visitors' attention.

Featured image: (pop-up box only) select a featured image to display on both the callout and form step.
Callout text: the main header on the callout.
Callout body: additional information or details on the callout. This is optional
Callout button text: the callout form button text.
Theme color: set the theme color for the button on your pop-up form. Click one of the default colors, or select a custom color by clicking the color bubble next to the hex value and selecting a color from the gradient, or entering a hex value.
Link button: select where the callout button will link to:
- Form step: direct your users to a form from the pop-up form. Customize your form by clicking on the Form tab.
- Non-HubSpot URL: paste a link to an external page.
- HubSpot page or blog post (Marketing Hub Starter,Professional, Enterprise and CMS): select a HubSpot page or blog post in the dropdown.
- File download: click Browse files to add your file.
- Meeting link: select a meeting link from the dropdown menu.
- Calendar event: create a calendar event and set the Event name, Start date, End date, Timezone, Location and Details. The event will be created in the customer's Google or Outlook calendar.

Any callout customization will immediately appear in the preview on the right, so you have an idea of what your pop-up form will look like when it's live on your page.

In the upper right, click Next.

3. Form - Customize your pop-up form

On the Form tab, customize what your visitors see when they click the pop-up form button.

Form body: (optional) add body text to elaborate on the value you're providing with your pop-up form.
Added fields: the default Email field is automatically included.
- To add additional fields to the form, click + Add another form field. Pop-up forms support the following field types: single-line text, multi-line text, dropdown select, single checkbox, number, date picker, and file (Only Marketing Hub Starter, Professional, and Enterprise can create custom contact properties in pop-up forms.).
- To customize the way a form field appears to visitors, click the pencil icon edit to edit the field label, add placeholder text, or enter a default value. For the Email field, you can specify email addresses and domains to block.
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 you have GDPR enabled in your HubSpot account, you can set the notice and consent option for this pop-up form. To customize the default text, click the pencil icon edit.
Language: set the form language. This will change the form field labels, Notice and consent/legitimate interest message, and error messages displayed on the form. All other editable fields will need to be translated manually.
Set lifecycle stage: choose the lifecycle stage contacts who submit the pop-up form will have. This is set to Lead by default.
CAPTCHA: enable CAPTCHA to provide additional protection against spam submissions.

In the upper right, click Next.

4. Thank you - Create a thank you message

On the Thank you tab, enter a thank you message for your visitors to see after they submit your pop-up form. Use the rich text editor to include some lightly formatted text, or link your visitor to additional resources or downloads.

To add a button after your thank you message to redirect your visitors elsewhere, such as to a web page, file download, or meeting link.

Select the Add a button checkbox.
Customize the Button text.
In the What should the button link to?, select the link for your button:
- Non-HubSpot URL: redirect visitors to an external page. Enter the Non-HubSpot URL of your page.
- HubSpot page or blog post
- (Marketing Hub Starter,Professional, Enterprise and CMS Hub): redirect visitors to one of your HubSpot pages or blog posts. Click the Choose a HubSpot page or blog post dropdown menu and select a published HubSpot page or blog post.
- File download: redirect visitors to a file download. Click Browse files to select a file from your file manager. To upload a new file, in the bottom left of the right pane, click downCarat Add file and upload a file from your device, Dropbox, or Google Drive.
- Meeting link: allow visitors to schedule a meeting with someone on your team using a meeting link. Click the Meeting Link dropdown menu to select an existing meetings link.
- Calendar event: allow visitors to add a new calendar event to their Google or Outlook calendar. Enter an event name, date, time, timezone, location, and details.

In the upper right, click Next.

5. Follow up - Create a follow-up email

On the Follow up tab, create a follow-up email that your visitor will receive after submitting your form by clicking Create follow-up email.

Please note: HubSpot CRM Free users must complete an email setup wizard to enable double opt-in for pop-up forms.

In the right panel, customize the details of your follow-up email:

Subscription type: click and select the subscription type of your follow-up email.
From user: click and select the sender of your follow-up email.
Subject line: add a subject for the follow-up email.
Body: add email body text to continue engaging your contact.
Edit email footer: click to customize your company's name and address in your email configuration settings.

Once done, click Save. A brief preview of the email should appear. Marketing Hub Starter, Basic (legacy), Professional, and Enterprise accounts can click Add another email to add up to three follow-up emails.
In the upper right, click Next.

Please note: creating a follow-up email will automatically add a CAPTCHA to the form.

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. Add filters to combine multiple sets of rules about which visitors see your pop-up form.

Website URL

You can add conditional logic for specific webpage URLs and/or query parameter values. By default, the pop-up form will appear on all pages.

To set criteria based on a website URL:
- Click the first dropdown menu and select Website URL.
- Click the second dropdown menu and select is all pages, is,contains, begins with, or matches wildcard and enter your criteria.

You can also set targeting rules to show your pop-up form based on query parameter values. For example, to display the pop-up form on pages where the URL includes the UTM campaign parameter ebook offer , enter the rule utm_campaign = ebook_offer .

To set criteria based on query parameters:
- Click the first dropdown menu and select Query parameter.
- In the first text field, enter the query parameter name.
- In the second text field, enter the query parameter value.

To add another rule, click Add rule.
To exclude the pop-up form on certain pages (e.g., a privacy policy page), click Add exclusion rule.

Learn more about targeting rules.

Visitor information and behavior

Website targeting rules can be customized further based on whether or not the visitor is a tracked contact. Marketing Hub Professional, and Enterprise accounts can create additional filter groups combining rules for when to show or hide your pop-up form.

You can hide or show your pop-up form to specific visitors based on the following information:

Segmented lists: whether the visitor is a tracked contact in your database with specific list memberships.
Visitor: whether the visitor is a tracked contact in your database or a new visitor.
Device type: the type device that the visitor is using when they visit your site.
Browser language: the language the visitor has selected in their browser settings.
Country: the country where the visitor is from, based on their current IP address.
CTA clicked is: whether the visitor clicked a specific CTA.
Days since last visit: the number of days since the visitor last visited your website.
Form viewed is: whether the visitor has viewed a specific form.
Session count: the number of analytics sessions the visitor has had on your website.
Page/s visited: whether the visitor previously visited a specific page URL.
Referral URL: whether the visitor was linked to your website from a specific page URL.
SEO topic: whether the visitor is currently viewing a page or blog post that's linked to a specific topic in the SEO tool.
SEO topic history: whether the visitor previously viewed a page linked to a specific topic in the SEO tool.

Learn more about targeting rules.

To create a filter group:

Select when to show the pop-up form:
- On the Show Pop-Up tile, click the first dropdown menu to choose when visitors see your pop-up form.

- Click the next dropdown menu to select your filtering rules.
- To add more rules for when to show your pop-up form, click Add rule and select your filters.

Select when to hide the pop-up form:
- Click Add exclusion rule.
- Click the first dropdown menu to choose when the pop-up form should be hidden.
- Click the next dropdown menu to select your filtering rules.
- To add more rules for when to hide your pop-up form, click Add exclusion rule and select your filters.
To create another set of filtering rules, click Add filter group and select your filtering rules.

Triggers

Set when the pop-up form should appear on the page. You can select the following options:

On 50% scroll: the form will appear when the visitor has scrolled halfway down the page.
On exit intent (pop-up box only): 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.

When multiple triggers are selected, the form will appear according to whichever trigger condition is met first.

In the upper right, click Next.

Please note: when a contact has filled out your pop-up form they will not see the pop-up form again if they are in the same browsing session.

7. Options - Further customize your pop-up form

On the Options tab, customize the following options:

Scheduling (Professional and Enterprise accounts only): to schedule a pop-up form so it is only active from a specific date, select Schedule for later.
- To publish the pop-up form on a specific date and time, use the Start date and Time dropdown menus.
- To unpublish the pop-up form on a specific date and time, select the Set unpublish date and time checkbox, then use the End date and Time dropdown menus.
Small screen sizes: to disable your pop-up form on mobile devices, select the Turn off pop-up form on small screen sizes checkbox. While pop-up forms are mobile optimized, it's recommended to disable them on mobile.
Show dismissed pop-up form again after: click the dropdown menu to set the amount of time that should pass after a visitor dismisses the pop-up form before they can see it again.
Add contacts to Salesforce campaign: if you're using the Salesforce integration, click the dropdown menu to associate any contact who submits the pop-up form with a Salesforce campaign.
Add contacts to GoToWebinar: if you're using the GoToWebinar integration, click the dropdown menu to register any contact who submits the pop-up form for a specific webinar.
When contacts are captured, send email notifications to: click the dropdown menu to enter an email address, or select a user or team to receive notifications when contacts are captured.
Send opt-in emails: if double opt-in is enabled, to manage double opt-in settings for your pop-up forms, click Manage in settings.
Follow-up subscription type: if GDPR settings are enabled, click the dropdown menu to select a subscription type for your email send.
Push new contacts to your email provider (optional): to set up an email provider to push contacts to, click Manage in settings. Learn more about pushing contacts to MailChimp lists.

In the upper right, click Next .

8. Preview - View a preview of your pop-up form

On the Preview tab, you can test an interactive preview of your pop-up form.

To see how your pop-up form will appear on different devices, click the Desktop, Tablet, or Mobile buttons in the upper left.
To view each step of the pop-up form, click theleftrightleft/right arrow icons.t

Publish

In the top right, click Publish to take your pop-up form live.

View full post