Adding Form Styles

Adding Form Styles

You are here:
< Back

What is form styling?

3B Forms allows you to add custom styling to forms by either light Field Customisation or by completely overhauling the form layout. This is usually achieved in one of 2 ways:

  • Disabling Bootstrap and adding your own styles via CSS
  • Keeping Bootstrap and applying small layout changes via CSS

Form styling is different than Customizing the product with CSS because the styles only will apply to the built form presented to the end user.

Use Cases

Here are some examples of what you can do with the ability to apply custom CSS styles to forms:

  • Brand forms – add your company logo, add your company colors
  • Standardize forms, so they look like like your website – this is especially useful when creating forms that will be embedded on your website

Setting up custom styles

Follow the below instructions to create custom styles

Salesforce Classic UI Salesforce Lightning UI
Step 1 – Navigate to the “Form Styles” tab

  • In Lightning, you can find Form Styles in your App Launcher or in the 3B Forms App
  • In Classic, you can find the Form Styles tab in the 3B Forms app or click on the + option in the Navigation bar and search for Form Styles
Step 2 – Create a new Form Style

  • In Classic, click on the button “New Form Style”
  • In Lightning click on “New” button on the right of the table
Step 3 – Assigning the newly created style to a form

  • Open a form (or create a new one) in the form builder.
  • Expand the section Posting Settings
  • Assign the new style under Custom Styles

 

Once you have selected a custom style, it will be applied to the form and you can see a preview of what the form will look like in the Form Builder

Other Settigns

You can opt out of using Bootstrap infrastructure to create truly custom forms. This method is only really applicable for those of you who have a lot of experience with CSS as you will be starting with a blank canvas.

To switch off Bootstrap follow these instructions:

  • Open a form in the form builder
  • Expand the Advanced Settings section
  • Check off the checkbox “Use Bootstrap”