Send form submissions as parameters through the URL

NOTE: The code in this article is for passing form submission values through the URL. If you are looking to pass existing URL parameters through a redirect, we have a native feature for that, as seen here: https://d.pr/wZw6gh 

 

In this article, you will learn how to send the information captured through a form on your landing page to the URL your visitors are redirected to.

1. Create your form and redirect it to the outside URL;

Screenshot_on_2023-02-27_at_11-51-44.png

NOTE: It is mandatory to set the redirect as an outside URL in order for this to work, even if the page is an Instapage page.

2. Add the following code in Settings > Javascript, footer section of your landing page:

NOTE: The "instapageFormSubmitSuccess" function can only be present on the page once, regardless of how many forms you have or how many actions you want to trigger after form submission. In case you have multiple snippets that need to fire after form submission, you must add all of them under the same Form Submit Callback function. If the snippets are not added under the same Form Submit Callback script, only the last function in the source code will be triggered.

3. Replace the first three pieces of highlighted text in the image below with the names of your own form fields and the last three with the names of the parameters you want to have in the URL. The last three do not have to match the names of the fields, these are the parameters you want to use in the URL.

image showing how to edit the UTM parameter code snippet

Note: The code above doesn't work for sending parameters through Text Area, Radio Button, Checkbox, and Dropdown field types.

If you also want to pass parameters appended to the URL, not only the ones related to the visitor submitting the form, you can enable the Pass URL param toggle as seen here: https://d.pr/l5NzMf. 

 

Using the passed parameters on the destination page

Passing parameters through the URL in this way can be used in multiple ways. One of the most likely uses that we see with our customers is capturing the values of the parameters on the second page to be stored or displayed. 

You can use URL parameters on your Instapage landing page in two ways: first, as text on the page, and second, by capturing them in hidden fields in a form. Both of these use the built-in feature of Dynamic Text Replacement.
Please note that DTR is only available to some of our subscriptions. More information about our currently available subscriptions can be found here: https://instapage.com/plans 

1. Using URL parameters as text on the page

Type the name of the parameter in between square brackets in the body of the text on your page. 

Example:

  • The parameters in the URL are ?firstname=John&lastname=Doe
  • You type the following in the page editor: "Welcome [firstname] [lastname]! We can provide the best solution for the [lastname] family."
  • The text on the live page displays: "Welcome John Doe! We can provide the best solution for the Doe family."

Screen Capture on 2023-02-16 at 02-41-32.gif

2. Capturing URL parameters in a hidden field

Type the name of the parameter between square brackets in the Input section of the hidden field when creating/editing the form.

Example:

  • The parameters in the URL are ?firstname=John&lastname=Doe
  • You create a hidden field called with the label Name and the input [firstname] [lastname]
  • When someone submits the form the value "John Doe" will show up for the hidden field Name in your leads.
  • Depending on how you intend to use the data, you may use a single parameter per hidden field (as shown in the screenshot below) or add several parameters to the same field, as shown in the current example.

September 17, 2024 3_44_54 pm - Screenshot.png

For more in-depth information about Dynamic Text replacement, please consult the dedicated guide here: https://d.pr/c6Yyy6

 

In case you need help with custom functionality or any code customization that is not provided through our Help Center articles, we have a Professional Services team that can help our Convert users. The Convert plan includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/convert-benefits.