ConversionBase

Turn More Traffic Into Customers

CSS Notes

Below you will find all of the CSS rules which make up the LeadGenerator form. You can use your browser Inspector to change any of the CSS rules to customise your form, however we have added all of the current selectors and settings below so you can easily find what you wish to change. You then simple add your changes to the Custom CSS field at the bottom of the Form Settings page.

Main Container

.conversionbase-box {
width: 100%;
font-size: inherit;
font-family: “Open Sans”, Arial, sans-serif;
font-weight: normal;

}

.conversionbase-box * {padding: 0; margin: 0;}
.conversionbase-box a {text-decoration: none;}
.conversionbase-box a:hover {text-decoration: underline;}
.conversionbase-box input[type=text], .conversionbase-box input[type=password] {box-sizing : border-box;}
.conversionbase-box .clearfix {clear: both;}

Layout

.conversionbase-box>.conversionbase-form {
border: 1px solid $box_border_color;
background-color: $box_color;
opacity:0.8;
margin: 0 auto;
position: relative;
align-items: center;
justify-content: center;
text-align: left;
padding: 1.5em 3em;
max-width: 1000px;
}

Header Styles

.conversionbase-box>.conversionbase-form {
h1, h2, h3, h4, h5 {font-family: “Open Sans”, Arial, sans-serif; text-align: center; padding: 0; margin: 0.5em auto;}
h1 {color: $h1_color!important;}
h3 {color: $h3_color!important; font-weight:500; }
h4 {color: $h4_color!important; font-weight: 500; }
h5 {color: $h5_color!important; font-weight: 500;}
hr {margin: 1.5em auto; clear: both; max-width: 25%;}
}

Question Box

.conversionbase-box>form .questionbox {
padding: 0.5em 0.5em;
margin: 1.5em auto;
background-color: $question_box_color
}
.conversionbase-box>form .conversionbase-tab {
display: none;
}

.conversionbase-box>form .tab-form-wrap label { color: $label_color; font-weight: normal; }
.conversionbase-box>form .conversionbaseBox-right {float:right; width: calc(50% – 0.5em);}
.conversionbase-box>form .conversionbaseBox-left {float:left; width: calc(50% – 0.5em);}
.conversionbase-box>form .conversionbase-privacy-consent {
float: left;
display: inline-block;
text-align: left;

}

Privacy Policy

.conversionbase-box>form .conversionbase-privacy-policy {
text-align: right;
}
.conversionbase-box>form .conversionbase-privacy-consent label,
.conversionbase-box>form .conversionbase-privacy-policy a {
font-size: smaller;
color: $label_color;
line-height: 1em;
}

.conversionbase-box>form .conversionbase-privacy-policy .fa-lock {
color:white;
}

.privacy-consent-row {
margin-bottom: 1em;
}

.conversionbase-box>form input[type=”checkbox”] {
width: auto;
height: auto;
display: inline-block;
margin: 0;
}

Radio button items

.conversionbase-box>form .conversionbaseBox-item {
background-color: $box_tab_bg;
border-radius: 1em;
margin: 0 0 1.5em 0;

&:hover {
background-color: $form_item_color;
}
label {
font-weight: normal;
position: relative;
padding: 0.4em 0.4em 0.4em 2.4em;
font-size: 1.2em;
color: $label_color;
display: block;
width: 100%;
line-height: 1em;
margin: 0;
&:hover::before {
background: $form_item_color_hover;
}
&:before {
content: “”;
display: block;
position: absolute;
top: 50%;
height: 1em;
width: 1em;
margin-top: -0.5em;
border-radius: 100%;
background: $form_item_circle_color;
cursor:pointer;
margin-left: -1.8em;
}
}
input[type=”radio”] {display: none;}
}

CTA Buttons

.conversionbase-box>form button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
line-height: normal;
color: $label_color;

.conversionbase-box>form #prevBtn {
margin-bottom: 1.5em;
}
.conversionbase-box>form input[type=”submit”].submit-cta {
background-color: $submit_cta_color;
color: $label_color;
margin: 0 auto 1em auto;
display: block;
width: 10em;
max-width: 100%;
height: 2.5em;
font-size: 1.5em;
border-radius: 0.5em;
border: none;

}

Progress Dots

.conversionbase-box>form #circleSteps {
text-align:center;
padding-bottom: 1.5em;
justify-content: center;
display: flex;

.

Progress Bar

.conversionbase-box>form #gn-progress-bar {
border: 1px solid $progress_bar_border;
width: 100%;
height: 1em;
margin: 0 0 1.5em 0;
#gn-progress {
background: $progress_bar_color;
height: 1em
}
}

 

Additional Pages

.conversionbase-box>form #conversionbase-callback {
background-color: $submit_cta_color;
color: $label_color!important;
margin:auto;
display:block;
height:auto;
font-size: 1.5em;
border-radius: 0.5em;
margin-bottom: 2em;
max-width: 100%;
padding: 0.5em;
border:none;
}
.conversionbase-box>form #submition-slide {
display: none;
}

.conversionbase-box>form input[type=text],.conversionbase-box>form input[type=email] {
padding: 0.5em 1em;
margin: 0 0 1em 0;
display: block;
width: 100%!important;
line-height: 2em;
height: auto;
background-color: white;
}

 Error messages

.conversionbase-box>form .conversionbaseerrorconsent,
.conversionbase-box>form #conversionbaseerrornamecss,
.conversionbase-box>form #conversionbaseerroremailcss {
text-align:left;
color:red;
font-size: smaller;
}

Media Queries (for Mobile Responsiveness)

@media only screen and (max-width: 1366px) {
.conversionbase-box {width: 65%!important; margin:0 auto;}

}

@media only screen and (max-width: 1200px) {

.conversionbase-box > .conversionbase-form {padding: 1em 1em;}
.conversionbase-box > .conversionbase-form .conversionbaseBox-item label {font-size: 1.2em;}
.conversionbase-box > .conversionbase-form input[type=”text”], .conversionbase-box > form input[type=”email”] {line-height: 2em;}
.conversionbase-box > .conversionbase-form input[type=”submit”].submit-cta {height: 2em;}
h1, h2, h3, h4, h5 {font-family: “Open Sans”, Arial, sans-serif; text-align: center; padding: 0; margin: 0.5em auto;}
h1 {font-size:1.9em; font-weight: 500;}
h3 {font-size:1.5em; font-weight: 500; }
h4 {font-size:1.3em; font-weight: 500; }
h5 {font-size:1.2em; font-weight: 500;}

.conversionbase-box {width: 80%!important; margin:0 auto;}

}

@media only screen and (max-width: 992px) {

.conversionbase-box > .conversionbase-form {padding: 1em 1em;}
.conversionbase-box > .conversionbase-form .conversionbaseBox-item label {font-size: 1em;}
.conversionbase-box > .conversionbase-form input[type=”text”], .conversionbase-box > form input[type=”email”] {line-height: 2em;}
.conversionbase-box > .conversionbase-form input[type=”submit”].submit-cta {height: 2em;}
h1, h2, h3, h4, h5 {font-family: “Open Sans”, Arial, sans-serif; text-align: center; padding: 0; margin: 0.5em auto;}
h1 {font-size:1.7em; font-weight:400;}
h3 {font-size:1.2em; font-weight: 400; }
h4 {font-size:1em; font-weight: 400; }
h5 {font-size:0.9em; font-weight: 400;}

.conversionbase-box {width: 85%!important; margin:0 auto;}

}

@media only screen and (max-width: 768px) {

.conversionbase-box > .conversionbase-form {padding: 1em 1em;}
.conversionbase-box > .conversionbase-form .conversionbaseBox-item label {font-size: 0.8em;}
.conversionbase-box > .conversionbase-form input[type=”text”], .conversionbase-box > form input[type=”email”] {line-height: 2em;}
.conversionbase-box > .conversionbase-form input[type=”submit”].submit-cta {height: 2em;}
h1, h2, h3, h4, h5 {font-family: “Open Sans”, Arial, sans-serif; text-align: center; padding: 0; margin: 0.5em auto;}
h1 {font-size:1.5em; font-weight:400;}
h3 {font-size:1em; font-weight: 400; }
h4 {font-size:0.8em; font-weight: 400; }
h5 {font-size:0.7em; font-weight: 400;}

.conversionbase-box {width: 90%!important; margin:0 auto;}

}

@media only screen and (max-width: 480px) {
.conversionbase-box > .conversionbase-form .conversionbase-privacy-policy {text-align: right; font-size: 0.8em;}
.conversionbase-box {width: 95%!important; margin:0 auto;}

}

Colours

/* Settings */
$box_border_color: #333;
$box_color: #000;
$h1_color: #FFFFFF;
$h3_color: #FFFFFF;
$h4_color: #FFFFFF;
$h5_color: #FFFFFF;
$label_color: #FFFFFF;
$question_box_color: #1a7b71;
$poweredby_color: lightgrey;
$box_tab_bg: grey;
$form_item_color: lightgrey;
$form_item_color_hover: #f25a2b;
$form_item_circle_color: #fff;
$form_item_circle_color_hover: #F57B55;
$next_btn_color: #f25a2b;
$next_btn_hover_color: #ff7038;
$prev_btn_color: #1C2531;
$submit_cta_color: #f25a2b;
$placeholder_color: gray;
$progress_bar_color: #449083;
$progress_bar_border: #000;