2021-01-06 15:53:52
Mindshare Labs, Inc
How to Style Gravity Forms with Bootstrap 5
Posted in:Gravity Forms Settings
Navigate to Forms > Settings from the WordPress admin screen.
- Change Output CSS to No
- Change Output HTML5 to Yes
This helps to clean up some of the wonky stuff Gravity Forms includes in their CSS.
SCSS
//Optional, include bootstrap.
@import bootstrap.scss;
//We're using scss variables here, make sure they've been defined.
.gform_wrapper {
.validation_error {
@extend .mt-3;
@extend .alert;
@extend .alert-danger;
}
.gform_body {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 20px 0 0 0;
.gfield_description {
font-size: .8em;
margin-bottom: 15px;
}
label {
text-transform: uppercase;
color: lighten($dark, 20%);
font-size: .7em;
line-height: 1.8em;
padding-left: 0;
margin: 0;
}
label.gfield_label {
text-transform: unset;
font-size: .9em;
line-height: 1.3em;
color: $dark;
font-weight: bold;
}
select {
@extend .form-select;
}
&.checkbox, &.radio {
label {
display: block;
}
}
.ginput_container_fileupload {
input {
@extend .form-control;
}
}
.clear-multi {
display: flex;
.ginput_container_time {
@extend .input-group;
margin-right: 1%;
&:last-child {
margin-right: 0;
}
i, label {
@extend .input-group-text;
}
i {
font-style: normal;
}
input {
@extend .form-control;
}
}
}
.gfield_creditcard_warning_message {
@extend .alert;
@extend .alert-danger;
}
}
}
.ginput_complex {
@extend .input-group;
input {
@extend .form-control;
}
&.gf_name_has_2 {
span {
display: block;
width: 50%;
&:first-child {
padding-right: 10px;
}
}
}
.ginput_full {
width: 100%;
}
.ginput_left {
width: 50%;
padding-right: 1%;
}
.ginput_right {
width: 50%;
}
}
.gform_page_footer {
margin-top: 30px;
input.gform_button {
@extend .btn;
@extend .btn-primary;
@extend .btn-lg;
}
input.gform_previous_button, input.gform_next_button {
@extend .btn;
@extend .btn-dark;
@extend .btn-lg;
}
input.gform_previous_button {
@extend .btn-sm;
}
}
.gfield_error {
label.gfield_label {
color: $danger;
}
input, select, textarea {
border-color: $danger;
}
.validation_message {
color: $danger;
font-weight: bold;
}
}
.gfield_radio, .gfield_checkbox {
li {
@extend .form-check;
padding: 0;
margin-left: 20px;
font-size: 1.1em;
input {
width: .8em;
height: .8em;
@extend .form-check-input;
margin-top: 4px;
}
label {
@extend .form-check-label;
margin: 3px;
padding: 0 0 0 25px;
}
}
}
}
.gform_footer {
text-align: right;
}
.gf_progressbar_wrapper {
.gf_progressbar {
@extend .progress;
.gf_progressbar_percentage {
@extend .progress-bar;
@extend .bg-success;
}
}
}
.screen-reader-text {
@extend .visually-hidden;
}
}
#ui-datepicker-div {
background: #fff;
padding: 10px;
font-size: .9em;
-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
box-shadow: 0 0 6px 0 rgba(0,0,0,.5);
.ui-datepicker-header {
display: flex;
flex-wrap: wrap;
font-size: .8em;
.ui-datepicker-prev {
display: block;
width: 50%;
}
.ui-datepicker-next {
display: block;
width: 50%;
text-align: right;
}
}
.ui-datepicker-title {
width: 100%;
display: flex;
select {
@extend .form-select;
width: 50%;
&:first-child {
width: 49%;
margin-right: 1%;
}
}
}
table.ui-datepicker-calendar {
@extend .table;
@extend .table-sm;
}
}
PHP Code to Put into Function.php
/**
* Gravity Forms Bootstrap Styles
*
* Applies bootstrap classes to various common field types.
* Requires Bootstrap to be in use by the theme.
*
* Using this function allows use of Gravity Forms default CSS
* in conjuction with Bootstrap (benefit for fields types such as Address).
*
* @see gform_field_content
* @link http://www.gravityhelp.com/documentation/page/Gform_field_content
*
* @return string Modified field content
*/
add_filter("gform_field_content", "bootstrap_styles_for_gravityforms_fields", 10, 5);
function bootstrap_styles_for_gravityforms_fields($content, $field, $value, $lead_id, $form_id){
// Currently only applies to most common field types, but could be expanded.
if($field["type"] != 'hidden' && $field["type"] != 'list' && $field["type"] != 'multiselect' && $field["type"] != 'checkbox' && $field["type"] != 'fileupload' && $field["type"] != 'date' && $field["type"] != 'html' && $field["type"] != 'address') {
$content = str_replace('class=\'medium', 'class=\'form-control medium', $content);
}
if($field["type"] == 'name' || $field["type"] == 'address') {
$content = str_replace('<input ', '<input class=\'form-control\' ', $content);
}
if($field["type"] == 'textarea') {
$content = str_replace('class=\'textarea', 'class=\'form-control textarea', $content);
}
if($field["type"] == 'checkbox') {
$content = str_replace('li class=\'', 'li class=\'checkbox ', $content);
$content = str_replace('<input ', '<input style=\'margin-left:1px;\' ', $content);
}
if($field["type"] == 'radio') {
$content = str_replace('li class=\'', 'li class=\'radio ', $content);
$content = str_replace('<input ', '<input style=\'margin-left:1px;\' ', $content);
}
return $content;
} // End bootstrap_styles_for_gravityforms_fields()