Gravity Forms has been my contact form builder of choice for years now and the 2.5 release brings a very welcome refresh to the UI. This makes it feel more like Gutenberg and adds a lot of layout customization options to the builder that were not available before without custom coding.
CSS Code for Gravity Forms: https://github.com/permaslug/Gravity-Forms-CSS/blob/master/Base%20Code
/*** MAIN WRAPPER ***/ .gform_wrapper { } /*** FIELD STYLING ***/ .gform_wrapper ul.gform_fields li.gfield, .gform_wrapper .top_label li.gfield.gf_right_half { padding-right: 0; } input[type=text], textarea, input[type=password], [type="search"], [type="date"], [type="tel"], [type="email"] { background: #ffffff; border: solid 1px rgba(225,225,225,0.85); border-radius: 0; color: #4d4d4d !important; font-weight: 400 !important; padding: 15px 12px !important; font: inherit; } .gform_wrapper .gform_body .gform_fields .gfield select { background: #ffffff; border: solid 1px rgba(225,225,225,0.85); border-radius: 0; color: #4d4d4d !important; font-weight: 700 !important; letter-spacing: 1px !important; padding: 17px 15px !important; } /*** FIELD FOCUS STYLING ***/ input:focus, input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2); border: solid 1px rgba(225,225,225,0.75); } /*** MESSAGE BOX TRANSITION ***/ .gform_wrapper textarea.medium { margin-top: 6px; height: 10em; transition: height .3s ease-out; } /*** MESSAGE BOX FOCUS HEIGHT ***/ .gform_wrapper textarea.medium:focus { height: 25em; } /*** BUTTON STYLING ***/ .gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] { } .gform_wrapper input[type=submit] { cursor: pointer; text-transform: capitalize; font: inherit; font-weight: 300; padding: 12px 25px; width: 150px; border-radius: 0; background: #137d7d; color: #f7f7f7; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: 3px; transition: box-shadow .2s ease-in-out; } /*** BUTTON HOVER STYLING ***/ .gform_wrapper input[type=submit]:hover { background: #004D4D; color: #fff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); } .gform_wrapper .gform_body .gform_page_footer .gform_next_button { cursor: pointer; text-transform: capitalize; font-weight: 300; padding: 10px 12px; border-radius: 0; background: #137d7d; color: #f7f7f7; border: none; border-radius: 3px; transition: box-shadow .2s ease-in-out; } .gform_wrapper .gform_body .gform_page_footer .gform_next_button:hover { background: #004D4D; color: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); } .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage { background-color: #43b5ac; }