Styling a form

Customize the look of the forms you create using CallRail's form builder. We offer basic styling options, like choosing the fonts and colors for your form.

Basic styling options

Each change you make to a form's style shows in real-time on the form preview on the right hand side of your screen. Follow these instructions for each form you'd like to style.

1. Select the Settings icon on the left navigation bar.
2. Choose the company where you'd like to style a form.
3. Choose Custom Forms from the Forms & Chats header on the left.
4. Select a form template to build and style a new form, or use the Edit (pencil) icon to change an existing form.
5. When you reach the editing step, select the Edit Styles tab.
6. Use the drop-downs to select the font and font size for the text on your form. You can also pick your font and button color by entering a specific color's hex code or by making a selection in the color picker.
   
7. Select Create Form to save your styling options on a new form, or select Save Form if you change an existing one.

Inheriting a style

You can generate a plain HTML version of your form that inherits the styling in your website's HTML. Using this option is a more advanced way to customize your form outside of CallRail, since the form will rely on the styling you have in place on your website. 

1. Select the Settings icon on the left navigation bar.
2. Choose the company where you'd like to style a form.
3. Choose Custom Forms from the Forms & Chat header on the left. 
4. Select a form template to build and style a new form, or use the Edit (pencil) icon to change an existing form.
5. When you reach the editing step, select the Edit Styles tab.
6. Choose the option for No Style. Your form should look similar to the image below.
   
7. Select Create Form to finish the setup process, or use Save Form if you change an existing form.
8. Copy the code generated on the final step and paste it to the places on your site or landing page where you'd like your form to show.

FAQs

I need to add more styling than what's available by default. How can I customize my form further?

We have a specific place in the form builder where you can insert custom CSS to style your form. Check out our CSS Selectors for Custom Forms article for more information.