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.

Note: You can easily edit your form’s fonts, colors and button style in the Design tab of the form creator. For more advanced customization, see the details below.

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 Custom CSS Class.

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.

Basic CSS Styling

These are some of the most-used general styles. 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. Each form will be slightly different, so consult your site styles for direction.

You will want to find the hex codes for the colors you would like to use:

• You can use this tool to find the color hex code of your choice.
• You can use this tool to find the hex code for a color on a logo or image file.

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

/* Form Container - use the following if a form background color is needed */
#madForm {
background: #FFFFFF;
padding: 40px;
border: 1px solid #000000;
box-shadow: 2px 2px 15px rgba(0, 0, 0, .40); /* adds drop shadow to form, delete no shadow is needed */
}

/* Headlines - modifies any 'heading' field with spacing & border */
.h2-field-wrapper {
border-bottom: 1px solid #B1B1B1;
padding-top: 1rem;
}

/* Input Field Styles - modifies the corner radius for all input fields */
input.form-control {
border-radius: 0px; 
border-color: #000000;
border-width: 2px;
background-color: #d1d1d1;
color: black;
}

/* Button Styles - modifies the look of the submit button */
.madform-submit {
color: #FFFFFF;
background-color: #666666;
background-image: linear-gradient(to bottom, #666666, #333333); /*use for a gradient button, delete if a flat button*/
border-color: #666666;
padding: 10px;
border-radius: 0px; 
width: 100%; /*makes a full width button, delete for standard width button*/
}

/* Button Hover Styles - modifies the look of the button on hover */
.madform-submit:hover {
color: #FFFFFF;
background-color: #333333;
background-image: linear-gradient(to bottom, #333333, #000000);  /* use gradient button, delete for flat button */
border-color: #333333;
}

/* Label Color - modifies the label on input fields */
label {
color: #2E2E2E;
}

/* Sub-Label Color - modifies the description on input fields */
.text-muted {
color: #2E2E2E!important;
}

Advanced CSS Styling Options

If you are attempting to add different styles of CSS, then you may want to check out this website for more advanced CSS styling options - Click Here.

/********************
MAKE INPUTS/BUTTON INLINE
*******************/
/* Base Styles - mobile first */
.default-form {
display: grid;
grid-template-columns: 1fr;
grid-gap: 50px;
}
.default-form > .row > .form-group {
flex: 0 0 100%;
max-width: 100%;
}
.default-form > .madform-submit {
height: 48px;
width: 100%;
position: relative;
bottom: 20px;
align-self: end;
justify-self: end;
border-radius: 5px;
}
/* Responsive - Larger screens */
@media only screen and (min-width: 768px) {

.default-form {
grid-template-columns: 4fr 1fr;
grid-gap: 20px;
}

.default-form > .row > .form-group {
flex: 0 0 50%;
max-width: 50%;
}

}

Payment Form Styles

Use the following styles if you need to place a payment form in a container that uses a background color to resolve this issue (https://madshot.net/19b25b905a86.png) where the credit card and total field display a white background. 

/* Overwrite white backgrounds on credit card and total fields */
.form-control.payments-quantity,
.form-control.payments-credit-card,
.form-control.total-row { background-color: transparent!important; }