Simplify

WordPress Development

Gravity Forms

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

Dynamically populate an html field or a form input field on page 2 with a value obtained from an input field on page 1

Click here to see an example

Form Fields

  • Page 1
    • Text field
  • Page 2
    • HTML Block (contains javascript)
    • HTML Block (contains paragraph with element to insert the value obtained from page 1
    • Text Field (value obtained from page 1 is inserted into this field.

The Code

HTML Block 1 Javascript

<script type="text/javascript">
    jQuery(document).on('gform_post_render', function (event, form_id, current_page) {

        // code to trigger on form or form page render
        if (current_page == 2) {
            // Get the value from page 1
            var x = document.getElementById("input_7_14").value;
            // form_id == 7
            // field id == 14 
            //   this is the field on page 1
            // field id == 14 
            document.getElementById("bs_insert_word").innerHTML = x;
            document.getElementById("input_7_9").value = x;
        }
    })
</script>

HTML Block 2 with paragraph setup to include input from form 1

The word '<span id="bs_insert_word"></span>' from page one has been inserted in this paragraph.

Screenshot of form