Advanced Form Styling Options

You can add custom site branding and styles to your forms using CSS styling. You have the ability to add custom CSS during the Form Creation process.

 

Modify Your Form Field Size/Layout with CSS

You can customize how your form fields appear on different devices. To customize the layout of your form fields, you will want to navigate to the Edit Form tab of the form builder wizard, select +Add Field, then select the type of field you would like to modify. Scroll down to the section labeled Form Field Display Options and find the text box labeled Add Custom CSS Classes.

Adding CSS here will define the form's display structure. You can insert CSS that can create inline columns, mobile stacking, or other display options. Use the bootstrap grid system to set up columns. The system works by applying a class that will work from that device size and up. By default, everything will appear 100% wide on all devices. It is based on a 12 column system, so to get your different sized column, you will use divisions of 12 ( 6 = 50%, 4 = 33%, 3 = 25%, etc.) When adding the class, do not include the “.” class selector and separate multiple classes with a space.

• col-4 is 33% wide on all devices
• col-sm-4 is 100% on mobile and 33% on Tablet and Desktop
• col-md-4 is 100% on mobile and Tablet and 33% on Desktop

Modify Your Form's Visual Look/Feel with CSS

You can modify the look and feel of your form to match your website and branding. To change the appearance of your form using custom CSS, navigate to the tab labeled Settings in the form builder, then scroll down to the section labeled Advanced Styling. This is where you will insert your custom CSS.

Below are the general styles that should be used. Each form will be slightly different so consult your site styles for direction:

/**General CSS **/

body {

margin: 10px; /*must use if you are putting a drop shadow around the form container */ 

}

 

/* Input Field Styles */

.form-control {

border-radius: 0; /* changes the form input boxes’ corner radius */ 

}

 

/*   Button Styles   */

.madform-submit {

color: #ffffff;

background-color: #000000;

         background-image: linear-gradient(to bottom, #246c8c, #113a66); /* use for a gradient button, delete if a flat button */

border-color: #2e2e2e;

padding: 10px;

border-radius: 0px;

width: 100%; /* makes a full width button */

}

 

/*   Button Hover  Colors  */

.madform-submit:hover {

color: #000000;

background-color: #ffffff;

background-image: linear-gradient(to bottom, #2e2e2e, #2e2e2e);  /* use for a gradient button, delete if a flat button */

border-color:#2e2e2e;

}

 

/*   Label Color    */

.madform-label-wrapper {

    color: #868686; /* use to switch between light and dark text, depending on your background  */

}

 

/* Form Container  */

#madForm {

padding: 40px;

background:  #ffffff;

border: 2px solid #000000;

box-shadow: 5px 5px 8px rgba(0, 0, 0, .66);

margin-bottom: 10px;

}

 

These are general styles, and some of the most used. Use this as a starting point and change/delete/add what you need to style your form appropriately. If you add headings, subheadings, or paragraphs to the form structure, you will need to style them in here as well.