• Skip to primary navigation
  • Skip to content

ConversionBase

Turn More Traffic Into Customers

  • Case Study
  • Example Templates
    • Installation Guide
  • Pricing
    • Download
  • Contact

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;

  • Facebook
  • Twitter
  • YouTube

© ALL CONTENT COPYRIGHT 2019 CONVERSIONBASE

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.