Track Your Contact Form Use
Track which features prompt feedback from your web site visitors.
A single contact form can be used site-wide to provide feedback from visitors on any number of features on your site - and the email you receive can automatically track the specific feature that prompted the visitor feedback.
When visitors are invited to comment about an article or photo or other item published on a web page, a special code that identifies the item can be embedded into the "Click to Comment" link and automatically inserted into the contact form.
The identifying code can be inserted into a hidden field or simply used to pre-fill a "subject" text field.
A two step process provides the tracking information:
The link URL has the identifying code appended.
JavaScript is used to automatically fill the form field.
Here is how to do it.
Appending Text To a Link
The link is a normal link except the link URL contains a question mark and some text at the end. Example:
A "gotcha"
If the text you append to the link URL contains a quotation mark (a double quote character), it can play havoc with your link. Because the link URL is between quotation marks, a quotation mark within the link itself can cause the browser to determine the link URL ends right there, and the rest of the URL is dropped.
The normal way to embed a quotation mark within a quoted HTML attribute (an HTML tag attribute with a value between quotation marks) is with the latin entity code "
That would work okay — except that the text in this case will also be within a quoted HTML attribute when it's pre-filled into a form field on the comment page. If " is used here, it would turn into a regular quotation mark character by the time it arrives at the form, and play the kind of havoc we're trying to avoid in the first place.
The solution is to create the text in the link URL in such a way that the " latin entity code will arrive at the page with the comment form.
The way to implement the solution is to use & in the link URL instead of just the character &
Here is anxample:
Pre-filling a Form Field with JavaScript
When the above link is clicked, the browser will have the entire link URL, including the appended question mark and text, in its browser address bar. JavaScript will be used to copy the text following the question mark.
The browser may convert some characters into a percent symbol followed by two digits when the link is clicked, which is mentioned not because you need to do anything with it, but to indicate it's normal browser behavior. For example, spaces would automatically be converted to %20
The first step in allowing a form field to be pre-filled in is to locate that field. As an example, let us suppose this is the field:
JavaScript will be used to write that form field to the web page.
However, because some browsers have JavaScript disabled, a method needs to be used to present the form field to those browsers. It's done with the NOSCRIPT tag:
Continuing with the same example form field, here is the JavaScript. The JavaScript may be above or below the NOSCRIPT tag, whichever you prefer.
As the above indicates, the form field will be replaced with both the NOSCRIPT and JavaScript sections.
In other words, replace this:
With this:
This simple two step method turns your contact form into a site-wide feedback tracking system.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
