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;
}
}