How to style the button for Opt-In forms?

Turn this standard form

Into this…

Create your form, save it, and add it to the webpage.

Copy the code below into Page Setting > CSS

/* Button code*/
.default .btn-primary.disabled, .default .btn-primary:disabled, .default .btn:not(:disabled):not(.disabled){
    background: red !important; /*use a hex color code*/
    box-shadow: 0px 0px 6px 0px black !important;
    border: none !important;
    height: 75px !important;   
    font-family: "Poppins" !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    opacity: 1 !important; /* disabled button looks the same as normal*/
    width: 100% !important;
}

/*button hover code*/
.default .btn-primary.disabled, .default .btn-primary:disabled:hover, .default .btn:not(:disabled):not(.disabled):hover {   
    background: green !important;   
    transition-duration: 0.2s !important;   
    transition-timing-function: ease !important;
}

/*input fields*/
input.form-control {   
    border-radius: 0px !important;   /*Rounded or square corners*/
    border-top: none !important; /*If you want the full outline, delete this row*/   
    border-left: none !important;   /*If you want the full outline, delete this row*/   
    border-right: none !important;   /*If you want the full outline, delete this row*/   
    border-bottom-color: black !important;   /*If you want the full outline, delete this row*/   
    border-bottom-width: 2px !important;   /*If you want the full outline, delete this row*/   
    font-family: "Poppins" !important;   
    font-size: 20px !important;   
    width: 100% !important;
}

/*placeholder - text in box before you type anything*/
input.form-control:placeholder {   
    font-family: "Poppins" !important;   
    font-size: 20px !important;
}

/* Change checkbox color*/
input.form-check-input {
    accent-color: black !important; /*Use hex or rgb color*/
}


/*Button code mobile*/
@media only screen and (max-width: 480px) {
.default .btn-primary.disabled, .default .btn-primary:disabled, .default .btn:not(:disabled):not(.disabled) {
    font-size: 18px !important;
    font-weight: 700 !important;
    width: 100% !important;
    height: 50px !important;
  }
}

/*input field mobile*/
@media only screen and (max-width: 480px) {
input.form-control {   
    font-size: 18px !important;
    width: 100% !important;
  }
}

Scroll to Top

Custom solutions for your entire sales team

Let us show you how our accurate B2B company and contact data can help you reach the right decision makers and close more deals.

What can you expect?