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.
- Click the Settings icon on the left navigation bar.
- Choose the company where you'd like to create or edit a custom form.
- Choose Custom Forms from the Forms & Chats header on the left.
- 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. |