CSS selectors for custom forms

When creating a custom form, you can use our advanced developer tools to apply CSS selectors to style your form. When editing the CSS for a form, you can define specific rulesets or add additional elements to your form. CallRail has a predetermined set of rulesets that can be used in the form builder.

Using developer view

Set your custom CSS rules in the form builder by using the developer view available in the styling tab.

  1. Click the Settings icon on the left navigation bar.

  2. Choose the company where you'd like to create or edit a custom 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. Click on the link that says, "Go to developer view".

  7. Update your CSS using the rulesets listed in the table below.

  8. When you're finished editing your form's CSS, click Create Form to complete your setup.

Available rulesets

CSS Selector Name/Type Description
div.container
Class The parent class for all content, including the form itself.
#form
ID The ID used for the form element.
input.form-control
Class The input class for text input types.
h6.form-header
Class The class for a header at the top of your form.
div.form-check
Class The wrapper DIV for field types that include checkboxes.
label.form-check-label
Class The label class for field types that include checkboxes.
input.form-check-input
Class The class for checkbox inputs.
div.form-radio
Class Wrapper DIV for checkbox field types.
label.form-radio-label
Class The label class for radio field types.
input.form-radio-input
Class The class for radio inputs.
textarea.form-control
Class The textarea class used for multi-line text inputs.
div.form-group
Class The wrapper DIC used for each form field. Pre-formatted fields that contain multiple inputs (like name or address) may have multiple .form-group classes.
button.btn
Class  The class for buttons. We currently only support a "Submit" button.
label.form-label
Class  The label class used for each form label.

 

Was this article helpful?
1 out of 3 found this helpful

Articles in this section

See more
Ask the Community
Find best practices, post, and learn from CallRail users.
CallRail Support Hours
Weekdays 8:00am - 8:00pm EST
CallRail Classroom
Your go-to resource for brief, expert-led video tutorials.