Copy/Paste Styling For Opt-in Forms
Copy/Paste code you can use as a template to edit for yourself:
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: grey !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 5px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 5px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: #117aeb !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: #000000 !important; /* Use any hex or rgb color code */
border-size: 0px !important; /* Any px value */
border-radius: 5px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 8px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 10px 20px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/The above code is designed for you to be able to easily edit for yourself.
If you want to add icons to the buttons, you need to use the names such as "fa fa-check-circle" from the Font Awesome 5 library using this link -> Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome
Below are some styles that you can simply copy and paste based off the images.
The below copy/paste code should go in Page Settings > CSS and gives you a fantastic starting point. In most cases it's very easy to just switch out the color using your own hex or rgb color codes. If you don't know what those color codes are, you can just Google "Hex Color Picker" and they have a native one you can use in Google Search.
Opt In Form Style 1
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: grey !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 5px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 5px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: #117aeb !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: #000000 !important; /* Use any hex or rgb color code */
border-size: 0px !important; /* Any px value */
border-radius: 5px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 8px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 10px 20px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/
Opt In Form Style 2
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: grey !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 100px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 5px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: #dc0000 !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: #000000 !important; /* Use any hex or rgb color code */
border-size: 0px !important; /* Any px value */
border-radius: 100px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 24px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 10px 0px #00000070 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 10px 20px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/
Opt In Form Style 3
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: grey !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 10px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 5px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: black !important; /* Any hex or rgb color code for the background of the field */
color: white !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: yellow !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: black !important; /* The font color */
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: yello !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 10px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 24px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 10px 0px #00000070 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 10px 20px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/
Opt In Form Style 4
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-bottom: 2px solid black !important;
border-top: 0px solid black !important;
border-left: 0px solid black !important;
border-right: 0px solid black !important;
border-radius: 0px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 0px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: green !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
border-type: solid !important; /* Choose from solid, dashed, dotted, double, groove, ridge, inset, outset, none, and hidden */
border-color: yello !important; /* Use any hex or rgb color code */
border-size: 2px !important; /* Any px value */
border-radius: 10px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 24px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 10px 0px #00000070 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 10px 20px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/
Opt In Form Style 5
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-bottom: 2px solid black !important;
border-top: 0px solid black !important;
border-left: 0px solid black !important;
border-right: 0px solid black !important;
border-radius: 0px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 0px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: #dc0000 !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
text-transform: uppercase !important;
border-bottom: 6px solid #a50000 !important;
border-top: 0px solid black !important;
border-left: 0px solid black !important;
border-right: 0px solid black !important;
border-radius: 10px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "lexend", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 900 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 32px !important; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 10px 0px #00000070 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 15px 30px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 22px !important;
padding: 10px 10px !important;
}
}
Opt In Form Style 6
To achieve this 2 line effect, you need to add <br> in the form builder in the button label field.
E.g.
GET INSTANT ACCESS
Just $97 Today
With different font sizes, you will need the below button label code:
<b>GET INSTANT ACCESS</b><br>Just $97 Today
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
.form-control {
border-bottom: 2px solid black !important;
border-top: 0px solid black !important;
border-left: 0px solid black !important;
border-right: 0px solid black !important;
border-radius: 0px !important; /* 0px = square corners, the higher the value, the more curved the corners */
box-shadow: 0px 0px 0px 0px #00000020 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
background: white !important; /* Any hex or rgb color code for the background of the field */
color: black !important; /* The text color in the field */
width: 100% !important;
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: #dc0000 !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: white !important; /* The font color */
border-bottom: 6px solid #a50000 !important;
border-top: 0px solid black !important;
border-left: 0px solid black !important;
border-right: 0px solid black !important;
border-radius: 10px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "lexend", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 500 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px !important; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
box-shadow: 0px 0px 10px 0px #00000070 !important; /* 1st value is L/R, 2nd value is Up/Down, 3rd value is size of the shadow (blur-radius), 4th is spread radius, the color code at the end is the color for the shadow */
padding: 15px 30px !important; /* first value is top/bottom, 2nd value is left/right */
width: 100% !important;
font-style: italic !important;
}
/* This is for the bold text inside the <b> tags */
button.btn-primary b {
font-weight: 900 !important;
font-size: 32px !important;
text-transform: uppercase !important;
font-style: normal !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 18px !important;
padding: 10px 10px !important;
}
button.btn-primary b{
font-size: 24px !important;
padding: 10px 10px !important;
}
}
Opt In Form Style 7
On hover: (The font gets larger and the button gets taller)
/* !important has been added to every style to ensure it overrides the defaults */
.col-form-label {
display: none !important; /* Hides the form field labels. If you use this, you will want to add placeholder text for all fields in the form builder*/
}
button.btn-primary {
opacity: 1 !important; /* By default, fields that aren't completed will cause button to be opacity .6. This makes the button fully opaque. */
background: white !important; /* The background color of the button. If you want to use gradients, use cssgradient.io and copy their code over this line */
color: black !important; /* The font color */
border: 5px solid black !important;
border-radius: 0px !important; /* 0px = square corners, the higher the value, the more curved the corners */
font-family: "Poppins", sans-serif !important; /*Depending on if the font is Serif, Sans, or Sans-Serif, change it as required. Change the font inside the "" */
font-weight: 700 !important; /* Any round number value from 100 to 900 - E.g. 300, 400, 500, 600 etc */
font-size: 20px; /* Self explanatory, but check the size on different screen sizes, anything over 24px is usually too large on mobile */
width: 100% !important;
}
button.btn-primary:hover {
background: black !important;
color: white !important;
border: 5px solid black !important;
font-size: 24px !important;
}
/*If you require different font sizes or padding, use the code below and remove the /* and */
/*Typical screen breaks are 480px for mobile, 768px for tablet and 960px */
/*
@media (max-width: 768px) {
.form-control {
font-size: 18px !important;
padding: 4px !important;
}
button.btn-primary {
font-size: 20px !important;
padding: 5px 10px !important;
}
}
*/Opt In Form Style 8 - Side By Side
Make sure your form has columns, with email left and button right:
Apply the code below:
.form-control {
font-family: "Poppins" !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-right: none !important;
height: 70px !important;
}
button.btn-primary {
font-family: "Poppins" !important;
opacity: 1 !important;
line-height: 1.2 !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
height: 70px !important
}
button.btn-primary b {
font-weight: 700 !important;
font-size: 24px !important;
}
button.btn-primary i {
font-size: 18px !important;
}
.default .col-md-6 {
padding-left: 0px !important;
padding-right: 0px !important;
}