Demo: Gravity Forms Center Fields on Background

The objective is to recreate this:

Form Setup

CSS

/* Override title style */
.gform_title {
  background: red;
  text-align: center;
	font-size: 3em;
	font-weight: 900;
}

/* Center submit button */
.gform_footer.top_label {
  justify-content: center;
}

/* Override submit button style */
#gform_submit_button_17 {
  background: white;
  border: red;
  color: red;
  border-radius: 25px;
}

Additional Comments

  • I use Genesis Blocks Pro for layouts. I selected a layout with a solid background, changed the columns to 1, and changed the background to red.
  • I edited field settings to hide the field label (found under appearance of each field setting)
  • I used HTML fields to center the last form field. These fields would need to be hidden when viewing on Mobile Device.
  • I added ‘ ’ to each html field so that they had content