Help Center

Menu

Custom CSS

Advanced Forms' form builder gives you all the tools to design the perfect form. If you have a unique customization requirement for your online form or PDF template that is not available in the form builder, you can add your styling code to the custom CSS section of the form builder.

  1. Add custom CSS to your form.

  2. Open your form in Edit mode.

  3. On the left-hand side of the Form Builder, select the Styling & Themes tab.

  4. Click Custom CSS to expand that section.

  5. Enter or paste the code into the text box.

  6. Save and view your form.

Commonly used CSS

The following table lists commonly used CSS examples to copy and paste into your form’s custom CSS.

CSS code snippets that contain fieldname must be updated to reference the short-code for the relevant field within your form; otherwise, the CSS will not be applied.

CSS for online forms

Common requirements CSS code

Increase font size

 
form {font-size: 24px;}

Increase font size inside specific input fields

 
.snap-field[data-fieldname="comment"] input{font-size:25px; !important; height: auto!important;}

Make the signature field width the entire length of the form.

 
.signature-outer { max-width: 100%!important; }

Make the Submit button full width of the form.

 
button[type="submit"] {width: 100% !important;}

Force field names, button names, and responses to be capitalized

 
input, textarea, * {text-transform: uppercase !important;}

Force input text response only to be capitalized

 
input, textarea {text-transform: uppercase !important;}

Narrow form

 
.panel-default { max-width:700}

Change mandatory asterisk color (replace with your preferred color)

 
.snap-field .text-danger { color: #B895F1 !important; }

Customise further instruction text color (replace with your preferred color)

 
.help-block {color: #0000FF !important;}

Change text color on drop-down list field to match text type fields

 
.countrylabel {margin: 0 !important;}

Make the background of a read-only field more transparent so it looks like a label instead of a read-only text field

 
.readonlyfield {background:none !important; border: none !important;}

Change text direction for RTL languages

 
body.snapform {direction:rtl}

Disable copy URL option for Save and Complete later

 
modal-body #continueForm, .modal-body hr, .modal-body p {display:none !important;}

CSS for PDF templates

Common requirements CSS code

Change font size of response text on PDF

 
.pdfpage textarea,.pdfpage input[type], .pdfpage .form-control {font-weight: light !important;font-size: 14px !important;}

Adjusts specific field widths on PDF

 
.pdfpage [data-fieldname="location"].snap-field {width: 75%;}

Adjust margins on PDF

 
.pdfpage {padding: 50px 50px;}
The first 50px is for top and bottom margins, and the second 50px is for left and right margins

Hide a specific field on PDF

 
.pdfpage .snap-field[data-fieldname="first name"] {display:none !important;}

Hide a field inside a field table on PDF

 
.pdfpage .tableresponse td:nth-child(2), .pdfpage .tableresponse th:nth-child(2) { display:none;}

Show ALL hidden calculation fields on PDF only

 
.pdfpage [data-calculated-field] {display:block !important;}

Show a specific calculation field on PDF only

 
.pdfpage [data-fieldname="score"] [data-calculated-field] {display:block !important;}

Hide specific fields on the form but show on PDF only

 
[data-fieldname="total score"] {display:none;}
.pdfpage [data-fieldname="score"] {display:block;}

Show a specific hidden reference field on PDF only

 
.pdfpage [data-fieldname="job number"] .hidden-field {display:block !important;}

Hide a heading for a specific field on PDF

 
.pdfpage .snap-field[data-fieldname="department"] {display:none !important;}

Hide all heading 1 (H1) fields on PDF

 
.pdfpage .snap-field h1 { display:none !important;}

Hide ALL rich text (formatted) fields on PDF

 
.pdfpage [data-fieldname*="wysiwyg"] { display:none !important; }

Hide further instructions on PDF

 
.pdfpage .help-block { display:none !important; }

Darken text for input fields on PDF

 
.pdfpage textarea, .pdfpage input[type], .pdfpage .form-control { font-weight: bold !important; font-size: 14px !important; }

CSS for mobile

Common requirements CSS code

Fit lengthy questions into one line for choice matrix fields

 
@media (min-width: 769px) {
    .snap-field .matrix-group > label {
        width: 75% !important;
    }
    .snap-field .matrix-group .radio-group {
        width: 25%;
    }
    .snap-field .matrix-header .headingleft {
        width: 75%;
    }
    .snap-field .matrix-header .headingright {
        width: 25%;
    }
}

Remove page background on mobile

 
@media only screen and (max-width: 768px) { body { background: none !important; } }

Adjust field widths on normal screens

 
@media only screen and (min-width: 768px) { [data-fieldname="first name"].snap-field {width: 75%;} [data-fieldname="last name"].snap-field {width: 25%;} }

Enable scrolling on the Long Answer field on mobile

 
textarea { overflow:scroll !important; }

Prevent formatted text table from cutting off on mobile screen

 
table { table-layout: fixed; }

Adjust field size for mobile

 
div[data-fieldname="department"] input{ width: 50%;}