Easy Steps to Add Dropdown to HubSpot Form (2023)

Adding Dropdown to HubSpot Form

To add a dropdown to a HubSpot form, navigate to Marketing > Lead Capture > Forms in your HubSpot account. If you're creating a new form, select Create form, or click Actions > Edit for an existing form. In the form editor, click +Add to insert a new field, then choose Dropdown select from the field options. Customize your dropdown options by adding the choices you want to appear in the dropdown menu.

Streamline your HubSpot workflows and ensure data consistency with Bardeen. Automate processes to save time and reduce human error. Download the Bardeen app to get started.

Customizing HubSpot Form

For further customization of your HubSpot form fields, including dropdowns, navigate to the form editor as described above. Here, you can add, edit, or remove fields. To customize dropdown options specifically, click on the dropdown field in the form editor. In the left panel, you can add or remove options as needed. Remember, any changes made to contact properties associated with the dropdown field will reflect across all forms using that property.

Customizing HubSpot Form CSS

To customize the appearance of your HubSpot form, including dropdowns, with CSS, 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 editor, and under the Advanced Options or Settings tab, look for a section to add custom CSS. For forms on external sites, you can modify the form's embed code to include your custom CSS. Add the css: "" parameter to the embed code and specify your CSS rules within those quotes, or use the cssClass: "your-custom-class" parameter to apply a specific CSS class defined in your site's stylesheet.

Enhance your multi-channel outreach by automating HubSpot with LinkedIn, or sync HubSpot with Salesforce and Slack for instant alerts.

HubSpot Edit Form Embed Code

For advanced customization, including adding custom JavaScript or CSS directly to the form embed code, access the form's embed code by navigating to Marketing > Lead Capture > Forms. Hover over the form and select Actions > Share. Here, you can copy the embed code to modify. To insert custom CSS, add the css: "" parameter within the hbspt.forms.create() function in the embed code and include your CSS rules. Alternatively, use the cssClass: "your-custom-class" parameter to apply CSS classes defined in your external stylesheet. This method allows you to style the form to match your website's design closely.

Adding a dropdown to a HubSpot form can be easily done manually, as described above. However, for those looking to streamline their HubSpot workflows and ensure data consistency across platforms, automation via Bardeen can be incredibly valuable. Automating these processes not only saves time but also reduces the risk of human error. Let's explore how Bardeen can enhance your HubSpot experience:

1. Add a new row to Airtable, when a HubSpot product is created: Seamlessly integrate HubSpot with Airtable to automatically add new product data, ensuring your teams always have the latest information at their fingertips.
2. Add a new row to Airtable, when a HubSpot company is created: Keep your company data synchronized across HubSpot and Airtable, automating the flow of information to enhance your sales and marketing strategies.
3. Add a new row to Airtable, when HubSpot contact is created: Automatically capture new contact details in Airtable whenever they're added in HubSpot, making sure your databases are always up-to-date.

By leveraging these automation playbooks, you can ensure that your data is consistently synchronized across your tools, freeing up time to focus on strategic tasks. Begin automating your HubSpot workflows by downloading the Bardeen app.