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.
- Click Analytics in the navigation bar on the left.
- Select Tracking at the top of the page.
- Choose Custom Forms in the left menu.
- 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.
- When you reach the editing step, select the Edit Styles tab.
- Click on the link that says, "Go to developer view."
- Update your CSS using the rulesets listed in the table below.
- 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. |