How to Style Gravity Forms with Bootstrap 5

Posted in: ,
Published: January 6, 2021

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

Thanks gravityhelp.com!

/**
 * 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()