Pass form values to a url

  • 3 September 2014
  • 12 replies
  • 54 views

Hi,

I have 2 fields defined in a form: first_name and last_name.
When hitting the submit button, I want to call a url and pass the values of this 2 fields as parameters. The general syntax of the url would be http://mydomain.com?param1=first_name…

I didn’t find any direct way to do this so I guess some scripting will be necessary.
Hope someone did this before and can help me further.
Many thanks in advance.


12 replies

Userlevel 3
Badge +1

Hi Marc - you can actually do this right in Unbounce. If you change the form action to “go to another URL” and then check the box to append the form answers, any form fields and the respective responses will be appended to the URL on form submit as parameters with that syntax.

Hi Quinn,

Thanks for your answer! That seems to work but meanwhile my problem has changed a bit.
How can I call the following url:

http://www.mydomain.com/page?rawdata=…

first_name and last_name would then be the field values of the form fields.

Is it possible to do that without scripting? And if not how would that script look like?

Many thanks in advance !!

Userlevel 3
Badge +1

Hi Marc,

You would need some custom scripting to do that–I’ll ask a member of our technical team to take a gander at it and have them chime in here with what we can come up with.

Userlevel 2

Hi Marc,

As you probably know, the ‘Append form data to a URL’ option will use your existing field names as the URL parameter keys. So, it’ll look like this:

/?first_name=Marc&last_name=Van+de+perre

If this isn’t the format you’re looking for Ð which it sounds like it isn’t Ð unfortunately there’s no straightforward way to change it.

The only way I can think of achieving this would be to create a hidden field in your Unbounce form called ‘rawdata’, and then write a piece of JavaScript that, upon form submission, sets this field’s value based on the first_name and last_name field. Unbounce will then automatically send this field and its new value as a URL parameter. It’s something you could do with jQuery. Unfortunately we don’t have any pre-written scripts to get you started, though.

It’s also a bit of a hack Ð I would also recommend exploring ways that your ‘mydomain.com/page’ endpoint could accept URL parameters like ‘first_name’ and ‘last_name’ instead of that ‘rawdata’.

“any form fields” is not accurate. only works with text fields when passing values to another form. any way to do it with checkboxes, drop-downs?

Userlevel 3
Badge +1

Hi Robert - sorry, you’re correct, if you’re passing checkbox or drop down values they won’t autofill a corresponding checkbox or drop down field on the following page. The values themselves do pass through in the query string, but we need to pass them through as text like this http://screencast.com/t/dhuljgxg

There wouldn’t be a really straightforward way of autofilling a checkbox or dropdown (you would have to do something like grab the text value and have an array that translates that to the corresponding drop down value and then fills it in).

That said, if you’re just looking to capture the selected value at the end of your funnel, if your second step has a hidden text field with the same field name as the checkbox or drop down on your first page, that value will be saved. Here’s a quick video wit that in action (I used non-hidden fields, so you can see them autofilling, but it works the same with hidden ones) http://screencast.com/t/EAGE1ZPCSY

@Mark

Found this helpful except for one issue i am having.  For one of my drop downs, the text i want to display in the form is different than the value i want to pass to the URL.  

for example, “Married - Filing Jointly” must be “MARRIEDJOINTLY” in the url for the script to work.  

as you can imagine, i can’t use MARRIEDJOINTLY in the form field on the front end. 

Please help! 

@Mark

Found this helpful except for one issue i am having.  For one of my drop downs, the text i want to display in the form is different than the value i want to pass to the URL.  

for example, “Married - Filing Jointly” must be “MARRIEDJOINTLY” in the url for the script to work.  

as you can imagine, i can’t use MARRIEDJOINTLY in the form field on the front end. 

Please help! 

Hi Ilan,

Unfortunately there’s no built-in way to modify the dropdown options to be distinct from the shown labels.

However, if you’re comfortable with adding a piece of JavaScript and modifying it slightly, it’s possible!

Here’s the script: https://gist.github.com/markwainwright/9f864508517141a3ecc5

You’ll just need to paste it in as a JavaScript and change the map of old to new values on lines 10-13.

Please let us know if you have questions!

Userlevel 2

Hi Ilan,

Unfortunately there’s no built-in way to modify the dropdown options to be distinct from the shown labels.

However, if you’re comfortable with adding a piece of JavaScript and modifying it slightly, it’s possible!

Here’s the script: https://gist.github.com/markwainwright/9f864508517141a3ecc5

You’ll just need to paste it in as a JavaScript and change the map of old to new values on lines 10-13.

Please let us know if you have questions!

I just drop this script in the body using the javascript insertion tool? 

That’s correct, Ilan! Just follow the steps here: 
http://documentation.unbounce.com/hc/en-us/articles/203879070-Using-Custom-JavaScript-and-CSS-on-You…

Reply