How to Chain Forms Using Shortcodes

• Summary
• Steps
• Populating Fields
• Confirmation Types for the Second Form
• Removing the First Form's Header
• Caveats
• Using Ajax as an Alternative

Summary

This article explains how to show a second form right after someone submits a first form, by placing the second form’s shortcode inside the first form’s confirmation.

Data from the first form can be carried over to the second using parameters.

Note: By default, only a Redirect or Page confirmation works reliably on the second form.

Steps

Follow the steps below:

1. Create the first form.
2. Open the first form’s Confirmation settings and add the second form’s shortcode there.

Note: Give the second form a Redirect or Page confirmation. If you need the second form to use a Text confirmation instead, see Using Ajax as an Alternative at the end of this article.

[gravityform id="123" title="false" description="false" field_values="param_email={:2}" theme="orbital"] 

Note: Styles from Form 1 can affect Form 2. Set the theme attribute in Form 2’s shortcode to match the theme used in Form 1. See this article for more on shortcode attributes.

Populating Fields

To carry data over and populate fields on the second form, add a field_values attribute to the shortcode. The parameter names need to match those set up on the second form. The exact values depend on the second form’s field IDs, so if you’re not sure yet, you can come back and fill this in once the second form is built.

See this article for more on the field_values attribute, and this article for details on passing data between forms via query strings.

3. Create a page for the first form and add the first form’s shortcode to it. Leave the ajax attribute off or set to false (this is separate from the confirmation shortcode above — it’s the page visitors use to fill out Form 1 itself).

[gravityform id="123" title="false" description="false" ajax="false" field_values="param_email={:2}" theme="orbital"] 

4. Create the second form. For any field that should be pre-filled from the first form, turn on Allow field to be populated dynamically and set a Parameter name.

5. Set up a confirmation for the second form. See Confirmation Types for the Second Form below to choose the right type.

Once this is done, load the first form’s page and submit it. The second form appears with any chosen data pre-filled. Submit the second form and its confirmation displays.

Confirmation Types for the Second Form

By default, only a Redirect or Page confirmation works reliably on the second form. A Text confirmation will just reload the first form after the second form is submitted.

If you need to use a Text confirmation on the second form, see Using Ajax as an Alternative at the end of this article.

Removing the First Form’s Header

When the second form is submitted, the first form’s header can still show on screen. Remove it by doing the following:

1. Add an HTML field to the second form.
2. Add the following code to the Content box. It clears the text of any H1 element on the page — the page header is typically inside an “h1” tag, so it disappears. Adjust the script if your header lives in a different element.

<script type="text/javascript">
document.querySelectorAll("h1").forEach(function(el) {
  el.textContent = "";
});
</script>

Caveats

You can’t place a second form inside the confirmation message of a Conversational Form. As a workaround, you can:

1. Embed Form 2 on a page and select that page as the Form 1 confirmation, or
2. Enable Conversational Forms for Form 2 and enter its URL in the Form 1 confirmation redirect.

Using Ajax as an Alternative

If you need the second form to use a Text confirmation instead of a Redirect or Page confirmation, enable Ajax submissions site-wide with this code snippet:

add_filter( 'gform_form_args', function( $args ) {
    $args['submission_method'] = GFFormDisplay::SUBMISSION_METHOD_AJAX;
    return $args;
} );

With this snippet in place, a Text confirmation will display correctly on the second form.