How to customize the testimonial collection form

Add required fields, remove fields, and customize the testimonial collection form with CSS.

Entry fields on your submission form are easily customizable. You can customize or remove the form heading, description, option to collect video or photos, star ratings, email and more. Follow these steps:

  1. From the dashboard, click “Collect Testimonials” on the left
  2. Add a new form, or select the Edit button on an existing one
  3. In the “Form” tab take a look at the section “Customize Form Fields”
  4. Decide which fields you’d like to display and what they should say.

customize testimonials on Hubspot

Using CSS to Hide Form Fields 

There are seven form fields that you can keep, make required, or hide completely on your testimonial submission form. There are two ways that you can hide form fields in Boast.

form fields on Hubspot

Hide Headline, Description, Etc.

You can choose to hide most of the available form fields by toggling them off in the Customize Form Field section of the Edit Form area (see previous section). When you uncheck any of the Collect Headline, Collect Description, Collect Video, Collect Photo, or Collect Star Rating, and then you click the blue Update Form button at the bottom, these will not show up on your form. Note that unchecking Require Email will not eliminate Email from the form, it will only make this field optional.

Hide Name, Phone, or Email 

What if you do not want the fields Name, Phone, or Email  to appear at all? While we do not recommend eliminating these form fields, we understand that you may need to hide them in some circumstances. So, you can also use a bit of CSS code to hide these elements. (Please note that the Phone field is automatically optional, and email can be made optional, so customers do not have to submit this information if they do not want to.)

  1. In the Edit Form area, select Settings.
  2. At the bottom, you’ll see a box for Custom CSS Styles. C
  3. Copy and paste any of the following code snippets to hide particular fields. Separate snippets with commas. Then, place this code at the end: {display:none;}

form fields on Hubspot 4

Use these code snippets to hide any of the following fields:

  • Hide Name field: .kudo_name
  • Hide Phone field: .kudo_phone
  • Hide Email field: .kudo_email
  • Hide Headline field: .kudo_title
  • Hide Text Description field: .kudo_description
  • Hide Video recording field: .kudo_video_field
  • Hide Photo field: .kudo_photo_field

    For example, to hide the Phone and Name fields, but leave everything else the same, enter the following code snippet into the Custom CSS box: .kudo_phone,.kudo_name {display:none;}. (Shown in the picture above).

Note that you may use either tool, the CSS code or the selection boxes, to hide form fields. If you are using the Javascript embed code to display the Boast testimonial collection form on your own site, you’ll need to paste the CSS code into your theme as well.

How to Customize the Look of your Form

At Boast, we know the importance of keeping a consistent brand image, which is why we’ve made it possible to change the colors and fonts of your Boast submission form. This is similar to the previous step, except you’ll find these options under a different tab. You can also customize your form with HTML or CSS code, but this is only recommended if you are experienced.

  1. From the dashboard, click “Collect Testimonials” on the left
  2. Add a new form, or select the Edit button on an existing one
  3. Go to the “Settings” tab.
  4. Select your background color, image, header or footer HTML, or CSS

As you scroll down, you’ll see different ways that you can customize your form, including settings that may be helpful for you as the owner, like reminders, and settings that will determine the appearance of your submission form.

In the adjacent tab, “Thank You Messages” you can also customize the thank you message of your form. You can even create different messages based on the star rating a user provides. Finally, with the last tab, “Preview” you can take a look at your form and make sure it looks right.