Form Style 4

Add form-style-4 to any form component you wish to style, like the image above. 

Step 1

Add the following code to the header of your app.

<style>
  .form-style-4 .af-form h3{
    font-weight: 500;
    font-size:2rem;
    color: #181c32ba;
    margin:0rem -3rem 2rem -3rem;
    background: #f3f6f9;
    padding: 3rem;
}
.form-style-4 .form-submit.row {
    margin-left: -3rem;
    margin-right: -3rem;
    padding-left: 14px;
    border-top:1px solid #ddd;
    margin-top: 2rem;
}

.form-style-4 .form-submit.row .col-md-12 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.form-style-4 .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-4 .form-control{
    color: #3F4254;
    background-color: #f3f6f9;
    border: none;
    box-shadow: none;
}
.form-style-4 .af-form-submit{
    border-radius:0.8rem;
    color: #ffffff;
    background-color: #1BC5BD;
    border-color: #1BC5BD;
}
.form-style-4 .af-form-submit:hover{
    color: #ffffff;
    background-color: #0BB7AF;
    border-color: #0BB7AF;
}
.form-style-4 span.lbl{
    color: #3F4254;
    font-size: 14px;
    font-weight:400;
}


/* 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 "form-style-4" to any form you wish to style. 

Original Community Post:

UI/UX CSS works - Community Discussions / Getting Started - Tadabase Community