Blog
04 Nov 2014
by Andrea Zoia

Customizing Your Testimonial Submission Form

Keeping a consistent brand image is important, which is why we’ve given you the option to customize your Boast submission form. You can hide certain fields and use CSS styles to ensure the form matches the look of the rest of your website. Currently, we don’t have a control panel setting for this, but you can achieve it with a little bit of web development.

How to Hide Form Fields

Each entry field is customizable and can be hidden. To hide specific fields, follow these steps:

  1. From the dashboard, click “My Campaigns” on the left
  2. Find the campaign you want to edit and click “Edit Campaign”
  3. Open the section that says “Customize Form”
  4. Paste the code below, using the class names you would like to hide.

 

The code below hides the “Phone”, “Headline”, “Description”, and the “Include a Photo” fields.

.kudo_phone,.kudo_title,.kudo_description,.kudo_photo_field{visibility:hidden;position:absolute;}

 

Boast-Submission-Form

This is your submission form before the code.

This is your submission form after the code.

This is your submission form after the code.

 

To hide other fields, just swap out those classes with any of these:

  • .kudo_name = Name field
  • .kudo_phone = Phone field
  • .kudo_email = Email field
  • .kudo_title = Headline field
  • .kudo_description = Description field
  • .kudo_video_field = Include a video recording field
  • .kudo_photo_field = Include a Photo field

How to Customize the Look of Your Form Fields

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. With some CSS style codes, the fonts, colors, borders and background colors can be changed.

Font Color

To change the font and font color of the heading labels on your Boast submission form,  you can use the code below. Feel free to change the font family and color code to match your website.

Code
label{color: #FF0099; font-family: century gothic;}

Customize submission form

Text Entry Border

To change the border of the text boxes, use the code below. You can change the weight of the line and color by changing the “2px” and “#000”.

Code
div.input input, div.input textarea{border: 2px solid #000;}

customize form

Text Entry Background Color

You can also change the background color of the input boxes by adding a background CSS style code to the same code above. Remember that these are just examples, and the colors and fonts can be swapped with ones that match your brand.

Code
div.input input, div.input textarea{border: 2px solid #000; background: #CCC}

customize gray background

Keep in mind, if you have multiple Boast campaigns, the styles are only adapted to the campaign in which you enter the code. If you want all of your Boast submission forms to look the same, you will have to copy and paste the code into each campaign individually.

Launch a Business Boosting Testimonial Campaign in 30 Days

Access the Guide »

Leave a Comment:

* - required fields