Edit and embed the support form on your website

HubSpot is a popular CRM that brings together all the required elements to provide an optimal customer experience. It caters to all the marketing and sales requirements of a business to help it scale. 

HubSpot allows you to utilize numerous customization abilities to enhance the customer experience. One of them is that you can create, edit, and embed a support form on your website directly from HubSpot in easy and simple steps. This article covers a detailed step-by-step guide to do the aforementioned.

Create a Support Form in HubSpot

This section covers the details of how to create a support form in HubSpot. The steps are as follows:

1. Log in to your HubSpot account. Navigate to Marketing and select Forms from the dropdown of Lead Capture.

1. Click on Create a free form button.

1. Choose the relevant form type. In this case, we’ll be choosing Embedded form.

1. You can either create a form from a blank template to customize it as per requirements or choose a pre-defined form template. We’ll select Support as the form template to start creating the form.

1. Write the name of the form in the input field.

2. You can drag and drop the form properties onto the template to set up the form.

1. If you want to create a ticket out of your form submissions, enable the toggle button of Ticket Properties.

1. If the required property isn’t available in the Existing properties, you can add a new one by going to Create new tab.

2. Select the data type of the form field you intend to create.

1. Add the Label of the property.

2. Add the Description of the new field. Note that it's optional to add the description.

1. Select the conditions for the new property.

1. Drag the Header Text, Paragraph (Rich Text), and Image properties on the form for a better look and feel.

2. You can edit the Header Text by clicking on it after dragging it onto the form.

1. Click on the Header Text to edit the formatting in terms of Size, Font, and more.

2. Enter the text of the heading in the text box.

1. For the editing of any field, navigate to the Basic tab.

2. Under the Basic tab, you can edit the Label, Help Text, Placeholder text, and more.

1. To edit the field from a logical perspective, click on the Logic tab.

1. So far, the basic settings of the form are completed. To edit the further options about it, navigate to the Options tab.

2. You can enable the toggle button of the Collect payments if you want to add the payment options for the user after the completion of the form.

3. To display the thank you message after the form completion, edit the details here.

1. You can also enable additional submission settings for the form, such as Always create contact for new email address, Set contacts created as marketing contacts, and Add link to reset the form.

1. To edit the style of the form, navigate to the Style & preview tab.

2. You can change the input options of the form under this section.

1. You can also edit the Link color and text color of the message.

2. To Preview the form or thank you message page, select the respective from the dropdown.

3. Select the preview from Desktop, Tablet, and Mobile.

1. Navigate to the Automation tab to enable the automation flows.

2. You can create automation workflows by clicking on the Create this workflow button.

1. The form setup is complete. To view the created form, select View from the Actions dropdown.

1. Click on the View form button when the prompt appears.

1. The created form will open in the new tab.

1. Review the form details and complete the setup.

1. Navigate to the Embed code tab to access the HTML code to embed the form on your website. Click on the Copy button to copy the embed code.

Edit the HubSpot Support Form

This section covers the details of editing the HubSpot support form. The steps are as follows:

1. Navigate to the Forms. Hover over the form you want to edit.

1. Click on the Edit button. 

1. It will open the editing options. Edit the form as per requirements and save the changes.

Embed the HubSpot Support Form

In the previous sections, we covered the detailed step-by-step guide for creating and editing a HubSpot support form. This section covers the steps of embedding a HubSpot support form on the website. The steps are as follows:

1. Navigate to Marketing and select Website Pages from the dropdown of the Website.

1. Click on the Website page from the dropdown of the Create button.

1. Select the Website you want to embed the form on.

2. Enter the Page name and click on Create page.

1. Select the web page template by clicking on Select template for the required one.

1. Navigate to the Content tab to edit the content for the web page.

2. Find the Form field in the Add tab and drag it onto the web page.

1. The form field will be added to the webpage.

2. Enter the Form Title.

3. Select the form you want to add from the Choose a form dropdown.

4. Click on the Create new form button, if you want to create a new one instead of adding the pre-created form.

1. The form will be added to the web page.

1. Navigate to the Settings tab to change the settings of the added form.

2. Add the Page title to publish the page.

1. Click on the Publish page now button to complete the publishing of the page.

1. The page has been published. To view it, select View from the dropdown of the More button.

1. The added form on the respective page will appear.

Sharing a HubSpot Support Form

This section covers the steps of sharing the HubSpot form. The steps are as follows:

1. Navigate to Marketing and select Forms from the dropdown of Lead Capture dropdown.

1. Hover over the form you want to share.

2. Click on the Actions button.

1. Select Share from the dropdown.

1. Since the form setup is complete, navigate to the Share link tab. Click on the Copy button to copy the link and share it as per requirement.

All in all, this was all about creating and embedding the HubSpot support form. The article also covered the details of editing and sharing the HubSpot support form. 

For further assistance, contact Learners.ai.