How To: Get the Referrer from a Formstack Form

by Kurt Milam on August 6, 2010
http://xioup.com/s/603

Formstack (aka FormSpring) is an innovative service that enables people with little or no technical skills to create powerful web forms.

Currently, Formstack forms don’t collect referrer/referer information. The referrer is the web page on which a visitor clicked the link that took him to the form page. This piece of information can be very useful if you’ve got links to a single form from several different sites or pages, because it tells you which pages are the most important sources of visitors to the form.

A formstack employee has stated on the official Formstack feature request forum that the company plans to add this functionality to its forms in the future, but if you can’t wait until then, I’ll show you here how you can start collecting this data immediately.

This short tutorial applies to forms hosted at Formstack, but the instructions in it can be modified for use on other forms, as well. The steps in this tutorial have been tested on multiple forms, and they also work with formstack’s hosted multi-page forms.

Step 1: Add a new Short Answer field to your form. I suggest that you set the label to “myreferrer.” We’ll hide this field later, after we’ve tested to make sure it’s working, but I’d leave it visible at first.

Step 2: Load up your form and view its source. Search for “myreferrer” in the source. You want to find the input or field that you’ve just added. You should see something like this in the source:

<td id="field1234567">
<label for="field1234567">myreferrer</label>
<input id="field1234567" name="field1234567" size="50" type="text" />
</td>

You need to grab the input ID for use in the next step. In the example code above, the input ID is field1234567.

Step 3: Add a new Description Area to your form. You have to make sure this description area comes after the myreferrer field that we created in Step 1, otherwise the javascript won’t work. In the description area, you should paste the following javascript (make sure to use the correct input ID that you got in Step 2):

<script type="text/javascript">
var theReferrer = document.referrer;
var theReferrerField = document.getElementById('field1234567');
if (theReferrer != '') {
theReferrerField.value = theReferrer;
}
</script>

Step 4: Test – open up a page in your browser that links to your form. Click on the link to visit the form. You should see the referrer URL displayed in the new myreferrer field that we created in Step 1. If you don’t see it, you’ll need to retrace your steps and make sure you didn’t make any errors. If you do see it, fill out and submit the form to make sure the referrer is being submitted with the form.

Assuming your tests were successful, you can go back to the Formstack form editor and set the myreferrer field that we added in Step 1 to “hidden”. Test again, to make sure everything still works.

Voilà! Your Formstack form is now capturing valuable referrer information. That was pretty easy, wasn’t it?

Just in case you’re wondering, you can use this same trick to insert just about any kind of javascript that you’d like into your hosted Formstack forms. Google Analytics code is one example, but the possibilities are pretty much endless.

Share this page:
  • Facebook
  • Twitter
  • LinkedIn
  • Identi.ca
  • del.icio.us
  • Faves
  • Google Bookmarks
  • Diigo
  • Add to favorites
  • Technorati
  • Ping.fm
  • Reddit
  • Digg
  • StumbleUpon
  • Posterous
  • Tumblr
  • Live
  • email

Related posts:

  1. WebFormGlue offers Formstack to BatchBook Integration

{ 4 comments… read them below or add one }

Tom Lewis October 21, 2010 at 20:00

You Sir are a legend- I am one of the people asking for this on the FormStack forums, and was told it was ‘coming’ (months ago), but your method works perfectly. I wasn’t even looking for this, I was looking for details of how to insert a url string into a hidden field, but your answer came up and I’ve just tried it- cheers!

Kurt Milam October 21, 2010 at 21:16

Hi Tom – glad I could help out. If you still need help on your second question, let me know. I can answer that one for you, too.

Tom Lewis October 22, 2010 at 19:21

Hey mate, yeah I’ve just been raving to Formstack CS about your blog post and how well it works. They are helping me with the hidden form thing, but they gave me some code and told me to add it to the bottom of the page with the form, but I went ahead and put it in a hidden summary field, and I’ve broken the Formstack functionality- I’ve lost my build buttons altogether! Just issued a cry for help on that front!

The other thing I am trying to work out- the refer thing is great, and it’s writing to a Google spreadsheet beautifully. It’s just rather a long string, so I’m trying to work out how to parse it and just pull out the keywords. Any ideas before I put it on a freelancer site (i’m a PM/ideas man, not a coder!)

Cheers

Tom

Kurt Milam October 22, 2010 at 19:28

Hi Tom,

Take a look at the js on this South Africa travel website for an example of parsing out the querystring values. We didn’t write that js, but Wild Expeditions is a customer of ours, and I recall that they’re using some js to do what you’re looking for.

Look at the function getValue(varname) function on that page, specifically.

Kurt

Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

{ 1 trackback }

Previous post:

Next post: