Form Style 5
Here is a solution to customize your form to the image by adding "form-style-5" to any form component you want to style.
Step 1
Add the following code to the header of your app.
<style>
.form-style-5 .af-form h3 {
font-weight: 500;
font-size: 2rem;
margin: 0rem -3rem 1rem -3rem;
background: linear-gradient(40deg, #ffd86f, #fc6262) !important;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
color: #fff;
padding: 3rem;
}
.form-style-5 .form-submit.row {
margin-left: -3rem;
margin-right: -3rem;
padding-left: 14px;
border-top: 1px solid #ddd;
margin-top: 2rem;
border-bottom: 1px solid #ddd;
}
.form-style-5 .form-submit.row .col-md-12 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.form-style-5 .af-form form {
padding: 0rem 3rem;
background: #ffffff;
border-radius: 1rem;
display: grid;
webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.form-style-5 span.lbl {
font-weight: 400;
color: #777
}
.form-style-5 .form-control {
color: #3F4254;
background: none;
border: 1px solid #ddd !important;
border-radius: 1rem;
border: none;
box-shadow: none;
}
.form-style-5 .af-form-submit {
color: #fff;
background-color: #1BC5BD;
border-color: #1BC5BD;
background: linear-gradient(40deg, #ffd86f, #fc6262) !important;
border: none;
border-radius: 1rem;
}
.form-style-5 .af-form-submit:hover {
color: #ffffff;
background-color: #0BB7AF;
border-color: #0BB7AF;
}
/* hide form field title */
.field-hide-title span.lbl {
display: none;
}
/* button round border */
.btn-round-border .af-form-submit {
background: none;
color: #1BC5BD;
border: 2px solid #1BC5BD;
}
.btn-round-border .af-form-submit:hover {
color: #ffffff;
background-color: #0BB7AF;
border-color: #0BB7AF;
}
</style>
Step 2
Add the CSS selector "form-style-5" to any form component you would like to style.
