Adding Form Styles

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Search 3B Knowledge Base

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”

 

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

3B Initiative

Jonathan B – 5 Stars

Get this and simplify your processes Thank you for your review, Jonathan, a happy little acacia tree is planted in your name! The exact coordinates

3B Initiative

Andy K – 5 Stars

Makes forms easy Thank you for your review, Andy, a happy little acacia tree is planted in your name! The exact coordinates of the tree

3B Initiative

Matthew W – 5 Stars

Best Free Forms Product on the AppExchange Thank you for your review, Matthew, a happy little acacia tree is planted in your name! The exact

Innovate, improve, empower. We believe engaged and happy customers make great partners, and see continuous feedback and collaboration as key levers in our shared drive for success. You need a small customisation to fit that nonconforming process step you have? We are more than happy to offer it free of charge. You have a recommendation for improvement/feature implementation? We are happy to listen, and will issue you with a special certificate to credit you for an idea that goes into the product.

As (we hope) you probably guessed yourself already – we want to be the single most flexible and customer-friendly forms solution on the market.