Adding Choice Bubbles to HubSpot Forms: A Guide (4 Steps)

HubSpot Customize Form

To customize a form in HubSpot, including adding choice bubbles (multiple choice, checkboxes, or radio buttons), start by navigating to Marketing > Lead Capture > Forms in your HubSpot account. Click Create form or select an existing form to edit. Use the form editor to add or modify fields. For choice bubbles, look for field types such as multiple checkbox, radio select, or dropdown select. These field types allow you to present multiple options to your form respondents.

Automate your HubSpot form creation and management with Bardeen to ensure data accuracy and save time. Download the Bardeen app to get started.

Customize HubSpot Form CSS

To apply custom CSS to a HubSpot form, you have two main approaches depending on where your form is hosted. If your form is on a HubSpot page, you can add custom CSS directly in the page's advanced options. Navigate to the page where the form is located, and in the page editor, go to the Settings tab. Here, you can add custom CSS snippets that will apply to the form. For forms on external sites, you'll need to embed the form as raw HTML and then apply CSS styling within your external site's stylesheet. This method requires toggling the Set as raw HTML form option in the form editor and using your site's CSS to style the form.

HubSpot Customize Form Embed Code

To customize the embed code of a HubSpot form for external websites, access the form in your HubSpot account and select the Share option. Here, you can copy the embed code. To further customize this code, including adding CSS directly or modifying the form's HTML structure, you'll need to have knowledge of JavaScript, as HubSpot forms are built with JavaScript. You can add parameters such as css:"" to the embed code to link to your custom CSS or use the cssClass:"YOUR-FORM-CLASS" parameter to apply specific CSS classes defined in your external site's stylesheet.

Looking to integrate HubSpot with Salesforce, LinkedIn, or Slack to enrich and speed up multi-channel outreach? Bardeen offers seamless integration solutions.

Customize Pop Up Form HubSpot

For customizing pop-up forms in HubSpot, navigate to Marketing > Lead Capture > Forms and select or create a pop-up form. In the form editor, you can customize the callout text, featured image, and form fields. To apply advanced customizations such as custom CSS, you should use the form's embed code on an external site and style it using your site's CSS. Note that as of July 17th, HubSpot will phase out the ability to create or clone pop-up forms for Starter, Professional, and Enterprise users, recommending the use of the new CTAs tool for creating sticky banners, pop-up boxes, or slide-ins instead.

While adding choice bubbles in HubSpot forms can be done manually as described, automating your HubSpot workflows can significantly enhance efficiency and data accuracy. Automating tasks like ticket creation, contact enrichment, and deal management not only saves time but also ensures a seamless flow of data within your CRM. Here are some ways you can automate your HubSpot processes using Bardeen:

1. Create HubSpot ticket: Automate the creation of HubSpot tickets directly from customer interactions or internal triggers, ensuring timely response to customer inquiries.
2. Enrich and update a HubSpot contact's record with new information: Automatically enrich HubSpot contact records with additional information from Clearbit, keeping your CRM data up-to-date and accurate.
3. Create a HubSpot contact from an email: Convert emails directly into HubSpot contacts, streamlining lead capture and ensuring no potential contact is missed.

By leveraging these automations, you can focus more on strategic tasks and less on manual data entry. Start automating by downloading the Bardeen app.