HubSpot Faq Module

The FAQ module in the HubSpot CMS allows you to add frequently asked questions to your website pages easily. 

It includes a question-and-answer format with expandable sections for each question. You can customize the colors, styles, and layout of the FAQ module to match your website design.

The FAQ module is a great way to 

• Provide quick answers to common questions.
• Helps to establish trust and credibility with potential customers by providing clear and accurate information.
• Increases website engagement and reduces bounce rate by keeping visitors on your site longer.
• Improve the user experience on your website.
• Potentially reduce the number of support tickets or inquiries your team receives.
• Improves SEO by using relevant keywords and phrases in the questions and answers.
• Enables you to gather insights into your customers’ concerns and questions, which can help inform your marketing and product development strategies.
• It can be easily updated and maintained, ensuring your content remains relevant and up-to-date.

1. Customizable colors and styles for the accordion and text.
2. Mobile-responsive design for optimal viewing on different devices.
3. Ability to add, delete, and reorder questions and answers.
4. Search functionality to easily find specific questions or keywords.
5. Codeless drag-and-drop FAQ module.
6. Marketer-friendly module with a clean and simple design.
7. Lets you add endless questions & answers. 

We’re an Elite HubSpot Solution Partner with highly experienced experts. Contact us if you’re stuck with any HubSpot module or need a customization solution. Your first meeting is free!

Let’s begin setting up the FAQ module on your HubSpot CMS website. You’ll edit an existing theme page or create one as you wish.

• Log in to your HubSpot portal.
• Navigate to the Marketing tab > Select Website > Choose Website Page.

• If creating a new page, click the Create option on the top left of the screen > Name the page.

• Select a theme template. At this point, you can also change the current theme. Here, for instance, I’ve used the Infinity HubSpot theme.

• On the left side panel of the Edit Page, enter the name ‘FAQ,’ and our module will come up.
  

• Drag and drop the FAQ module anywhere on the page and start editing. Our FAQ module is compatible with all HubSpot themes. This ensures a seamless editing experience.

When you start editing the FAQ module, you’ll come across two tabs: Content and Styles. Each tab has separate settings that allow you to customize the FAQ section on your website pages completely.

The content tab of this HubSpot theme module deals with the actual content that will be displayed on the front end of a website under the frequently asked questions tab. It further has a few sub-settings:

1. Content 

Under this setting, you can edit the content you want to be displayed in your FAQ section. 

Mini Title

The mini title is just above the FAQ section’s main title. It is a shorter version of a main title or headline that summarizes the content or topic of a section or subsection. The mini title makes it easier for readers to skim and find relevant information.

You can simply 

1. Check the checkbox to enable or disable a mini title on your section
2. Edit the mini title text to whatever you like.

Title 

A title of a section is a short phrase or sentence that summarizes the content of that section. It is used to give readers an idea of what to expect from the content that follows. A good section title should be clear, concise, and accurately reflect the main theme or topic of the section. 

Here on the title part, you can:

1. Enable or disable the title on the FAQ section by checking the checkbox
2. Edit the title as you please.

Description 

Under the mini title & the heading, you can also provide a few liner contents to further elaborate what you’re trying to convey. 

1. You can enable or disable it anytime you like by checking the checkbox 
2. Edit the description of the FAQ section.

On the front end, this is what it will look like:

2. Search

The search functionality on the FAQ section, allows the visitors to enter keywords and get queries related to that keywords. It is mainly given to give your users a better experience.

From the search option you can:

1. Enable or disable the search function above the FAQ section by switching the toggle button.
2. Change the placeholder text on the search bar, as it appears in the section. 

This is how each column will look like:

One Column

Two Column 

4. FAQs

This is the section where you will actually add all the questions along with the answers and format them. Here you can:

1. Add, edit, clone, or delete multiple questions. 
2. Drag and drop to move the questions chronology.

For editing the FAQs you must hover over the questions and find the edit (looks like a pencil icon) option. Click on it and proceed with editing the FAQ you’d like to edit.

1. Add your question in the box under the Question heading. 
2. Edit the answer for the question added. You have all the formatting options present.
   
3. Click next to edit the next FAQ from here itself. 

5. Icon

The icon is visible on the individual FAQ for visitors to toggle and check the answer of each question. You can:

• Change the icon position to left or right. 

For instance here is an example of the icon position:

• Replace or remove the icon image. This option is available for both the opening and closing icons. 

You can select & choose any icon you like. For instance, you can check it here:

6. Custom ID

Using a toggle button you can enable or disable the custom ID. This custom ID should be unique on one page. Do not use the same id name for more than one module.

Style settings on a HubSpot module refer to the options available for customizing the appearance of the module. These settings can include options for changing the module’s background color, font size, font type, alignment, padding, and more. 

By adjusting the style settings, you can ensure that your module matches your website’s overall design and branding. Additionally, you can use these settings to create different styles for different modules on your website, allowing you to create visual interest and draw attention to important information.

The settings under the styles option include the following sub-settings.

1. Content 

Here, you can change the look and feel of the content. 

– Container

• Enter the content bottom spacing that will show on both the mobile and desktop. ‘
• Max width prevents an element from becoming wider than a certain size, even if more space is available. The maximum width can be set in pixels, ems, or as a percentage of the viewport width. Toggle to button to enable maximum width and set a number.

– Alignment

Alignment refers to the positioning of elements within a design or layout. It can involve the vertical and horizontal positioning of text, images, and other visual elements.

Alignment is an important aspect of design as it helps to create a sense of order and balance, making the content easier to read and understand. 

Good alignment also contributes to the overall aesthetic of a design, making it more visually appealing. So we have added options to select the desktop and mobile content alignment.

Three options are available. You can choose between left, right & center.

– Mini Title

Change the style of the mini title for both desktop and mobile. For the desktop, you can 

• Select desktop font. There is a list of fonts available. You can also browse from Google. 

• Other options include changing the font color, size, and line height. 

• For mobile views, you can alter the font size and line height of the content. Line height is the vertical space between lines of text in a block of text or paragraph.
• It is measured as the distance between the baseline of one line of text to the baseline of the next line of text.

Here is an image for example:

– Title

The settings on the title option are similar to those of the mini title. Here also you change the:

• Font size, font type, font size, line height, etc., for desktop users
• Line height and font size for mobile view.

– Description

Similar to the settings of the title and sub-title, you can make changes in the following areas of the description:

• Font size, font type, font size, line height, etc., for desktop users
• Line height and font size for mobile view.

2. Search

Here you can change the look and feel of the search section using the following settings:

– Spacing

Alter the bottom spacing on the desktop and mobile view. Just put in the number and save settings for both views.

– Input field

Here you can change the search input fields’ text color and background color. You can input the hex code for the same.

Additionally, you can change the border style and border color,

– Icon

Here, you can change the icon color and background color of the icon. You just have to input the hex code and set the percentage of color you want to be visible.

– Hover 

While hovering over the icon, you can change colors for both the icon and background.

3. Accordion 

For changing the style of the accordion, you can leverage the following options:

– Background

To change the background color of the accordion, you can input the hex code and it will be reflected on the screen.

– Spacing 

This section deals with the spacing of the accordions. Each FAQ shall be at an equal distance from each other. 

You can adjust the desktop spacing & padding for the margin above and below the accordions. Similarly, you can change the mobile view spacing of the accordions.

– Border 

This option allows you to edit the accordion border style. You can change the border style, color, and width. Additionally, you can tick the checkbox to apply these same settings to the bottom only. 

– Corner

Corner radius refers to the roundedness of the corners on an object, such as a button, image, or box. It defines how much the corners are rounded, typically measured in pixels. 

A larger corner radius value results in a more rounded corner, while a smaller value creates a sharper, less rounded corner. 

You can simply drag the slider to increase the border width.

– Max width 

To enable the maximum width for the accordion, use the toggle button and set the width to whatever you please.

– Box Shadow 

Box shadow makes the element appear elevated or floating above the page. 

It can be used to add depth and dimension to website designs. The box-shadow property allows designers to control the shadow’s size, color, and positioning.

• So, you can enable or disable the box shadow with the help of the toggle button.

4. Question

All styles for questions can be edited here. 

– Typography Desktop 

Under this setting, you can change the typography of the desktop view, including font, color, line height, etc. of the questions.

– Typography Mobile 

Under this setting, you can change the typography of the mobile and line height for the mobile view of the questions. 

– Spacing 

Here, you can adjust the spacing of the margin above and the margin below, along with the padding for each question.

– Icon

Under the icon setting, you can change the icon colors. Just mention the hex code for the color you want. 

After making all the changes, you’re ready to publish the module. Just remember to hit the apply changes button. 

Make sure to name the page title before publishing it. You can schedule the page.

We hope you’ll love working with our FAQ module and create a seamless experience for both your users and marketers on your team. Here at MakeWebBetter, we strive to make your experience with HubSpot a better one! 

Just in case you have a custom HubSpot module requirement or need a customized HubSpot CMS or CRM setup, hit us up.