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.

This is a premium feature available on the Forms Essentials plan.

Using Developer View

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

  1. Select Tracking at the top of the page.

  2. Choose Custom Forms in the left menu.

  3. 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.

  4. When you reach the editing step, select the Edit Styles tab.

  5. Click on the link that says, "Go to developer view."

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

  7. 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.

 

Comments