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. Click 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. Click Create Form to build and style a new form, or click the Edit (pencil) icon if you'd like to make changes to 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 make a selection in the color picker.
   
   
   
   
7. Click Create Form to save your styling options on a new form, or click Save Form if you're changing an existing form.

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. Click 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. Click Create Form to build and style a new form, or click the Edit (pencil) icon if you'd like to make changes to 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. Click Create Form to finish the setup process, or click Save Form if you're changing 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 further customize my form?
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.