Can I Have a Form Field Auto-Populated with a Value Based on the URL of the Page Within Which the Form Is Embedded?

Is it possible to have a form or a form field auto populate based on the URL that someone is on?

For example, our website has lots of products and we'd like a contact form on every page - 1 form on multiple product pages. I don't want to design a different form for every page.

Therefore, can a form/field be programmed to recognize it's on "Product Page A" and auto-fill in a blank that says "Product A"? Lastly, can the Email that is sent on submission also reflect the product page that the person is sending the contact form from? This way our representatives know in the subject line?

Does this make sense?

Hi,

Yes you can pass values to a form through URL link, Prepopulating fields to your JotForm via URL parameters. Once you have the field populated in the form, you can use this in a email notification or autoresponder.

Please let us know if your require more information.

Regards

Thanks Victor. However, I'm wanting something more detailed, let me be more specific below:

We have lots of products and I would like to design ONE form to be embedded on ALL our product pages.

For this example, I will use one of our products, the MICROCAST HD Print Pro as the example, the URL for this page is http://optronics.com/products/hd-microscope-video-cameras/microcast-hd-print-pro/ 

Someone goes to this page and can view the contact form I designed and embedded. I would like to have a field or fields on the form that can recognize it is embedded on a certain page URL, in this case http://optronics.com/products/hd-microscope-video-cameras/microcast-hd-print-pro/ and therefore it should display the name of the product page "MICROCAST HD Print Pro"

So in summary:

1. 1 form, embedded on multiple pages

2. the form or form field(s) detects which page it's embedded on based on the URL where it is embedded

3. the form field(s) displays the name of that product page

Yes, this  should be possible if the Get Referrer widget is placed in your form. Here's a thread which explains how one form can be placed on multiple pages and the person notified would depend on the page from which the submission came. While at first glance that solution may seem unrelated to your requirements, the basic idea is the same. Let me look into the feasibility of this further and get back to you.

Thanks

Hi again,

There are a couple of ways I can think of in which this can be accomplished. The first one is done all in the form builder. Then you get its code via the Source Code button

and paste it into the body of each product page.

The other method requires a short script to be added to the bottom of a copy of the form's full source. That entire code would then be embedded in the body of each product's webpage.

Method 1

If you were to clone this form, you'd notice that it has the Get Referrer widget. (Please see How to Clone an Embedded Form from a Webpage and How to Add a Widget to your Form.) You'd also discover that the form has the following conditions:

Since the form's own URL would contain neither super-duper-product nor another-super-product, the Product field will be blank when the form is used at its own URL. However, once the form is embedded in a page whose URL has one of the strings noted in the conditions, the Product field will display either Super Duper Product or Another Super Product, depending on the page. This functionality is demonstrated at the following pages:

Super Duper Product

Another Super Product

Have a look at the source of each page and you'll see that just one line of code was used to embed the form. All of this is great but from what I can tell, you have several products. This means that a separate condition would need to be created in the Conditions Wizard for each page.

Method 2

Forms employing this method don't need the Get Referrer widget. Instead, a short script does the job. That script can be found at the bottom of the code in the following pages:

An Excellent Product

Another Excellent Product

This is the form embedded in both pages. If you clone and examine it, you'll see that not only does it not have the Get Referrer widget but it also doesn't have any conditions. Now, if you look at the source of each of the pages where this form is embedded you'll see a lot more code than what the earlier demos had. That's because instead of just a single line, the form's full source is being used. It needs to be, in order for the aforementioned script to work. This method lets you place the form in as many pages as desired without having to create a separate condition for each one. Great! However, one disadvantage with using the full source of the form is that should you ever need to change anything in the form (add a field or move an existing one, for instance), you will need to replace each instance of the code in your product pages with the updated code generated by the form builder.

You've probably noticed that the format of the text displayed in the Product field of these latter demos differs from those in the forms used in first method. If necessary, the script can be edited to replace the dashes with spaces and capitalize the first letter of each word.

As far as having the subject of the email reflect the product page from which the submission came, if you look at the notifiers of each cloned form, you'll see that the subject line contains the tag for the product field:

That way, whatever that field contains will be displayed in the subject. Incidentally, the product field can be hidden from the form by clicking its Properties button and then clicking Hide Field:

The only reason I left them visible in the demos was for you to see the values being captured.

That's pretty much it. The only thing is that if you decide to go the full source route, the script would need to be changed a bit because your product field would probably have a different ID to input_7 and instead of removing the last five (5) characters from the URL, the script should remove just the last (the trailing slash).

That's all for now but if you need clarification on anything, please inform us.

Thanks

While lying in my bed it struck me that if embedding the form's full source, there's a better way to capture the product name. Instead of trying to parse the page's URL to extract the product name, why not just get the name from the heading which contains it? In the demo form's case, shortening the script to the following would do that:

(function () {
   $('input_7').value = $$('.entry-title')[0].innerHTML;
}());

I tested the solution with a copy of one of your product pages and it works fine and it should work with all of the product pages because in each instance the product name is wrapped in the first element on the page having a class of entry-title.

Thank you so much for the information! It's been very helpful. I've had a few days now to play with the options you presented. At first I created a checkbox for all the products and conditions that say if the URL ends with whatever the products URL is to display that product checkbox with it selected and an option for "other" in the case they might be interested in something else. Then I talked to the sales team who receives the emails and they said just including the "Get Referrer" info in the email they get will tell them what they need to know. I'm going to create a couple of "sample forms" and keep playing with this.

Again, I appreciate all the answers, links and help!

David