How to Chain Forms Using Shortcodes

This article explains how you can chain two forms together by placing the shortcode for another form inside the confirmation of the first form.

This results in the second form displaying upon submission of the first form. Data from the first form may be carried over to the second using parameters.

Below are the steps to follow:

1. Create the first form.
2. Edit the Confirmation

3. Set the Confirmation Type to Text and enter the shortcode for the second form as the Message.
   

       [[gravityform id="82" title="false" description="false" ajax="true" field_values="param_email={:2}"]]    

   • It is very important that the ajax attribute is included and set to true for the shortcode to the second form. If not, upon submission of the second form, the first form will load again.
   • If any data is meant to carry over and populate fields on the second form, add the field_values attribute to the shortcode. The parameter names used will be created on the second form so make sure the same names are used. The values listed will also depend on the field ids on the second form. This step could be done after the second form is created if the field ids or parameter names are unknown. For more information about the field_values attribute or how to pass data, see the following documents:
     • Form Shortcode
     • Using Dynamic Population
     • Using Confirmation Query Strings To Populate A Form Based On Another Submission.
4. Create a page for the first form.
5. Add the shortcode for the form to the page. The most important part here is that the ajax attribute is set to false, or not included because it defaults to false. If ajax is set to true, then submitting the second form will cause the first form to be loaded again.
   

       [[gravityform id="7" title="true" description="true" ajax="false"]]    

6. Create the second form. If there is any data that should carry over from the first form to be displayed in fields on the second form, set the fields on the second form to Allow field to be populated dynamically and enter a Parameter name.

After following the steps above, load the page of the first form and submit. The second form displays with any chosen data populated. Submit the second form and its confirmation page displays.

Bonus: When the second form is submitted, the header from the first form still displays. This can be removed by doing the following:

1. Add an HTML field to the second form.
2. Add the following code to the Content. This jQuery code simply finds the HTML “h1” tag and replaces the text with nothing. The page header is inside the “h1” tag so it is removed. The script can be modified to target a specific element in the page as needed.
   

<script type="text/javascript">
var $ = jQuery.noConflict();
$("h1").text('');
</script>