When a user submits a form, how can we automatically obtain the url of the page?The form is on the product page.I want to automatically obtain the link or product name of the product when the user submits the form.
Hello.
If you've added a custom form via the Form Manager, you can do this by adding a hidden input field to your form, then filling it with JavaScript when the page loads.
Hi Basara,
where should we put the javacript?
Hello.
Put the JavaScript in an HTML block and assign that block to the page layout where the form is shown.
There are other ways to add JavaScript too, such as directly in the template files, but using an HTML block is usually the easier method for this kind of task.
If the form is embedded directly on the product page, you can usually capture the current product URL or product ID when the form is submitted rather than asking the user to enter it.
For example, on the client side, `window.location.href` will give you the current page URL. If you need the product name, it would be better to pass the product ID/name from the product page into a hidden form field and submit it along with the other form data.
In AbanteCart, I'd recommend using the product ID as the reliable value and looking up the product name afterward. URLs and product names can change, while the product ID should remain stable. If you're handling the submission in a controller, you can then use that ID to retrieve the corresponding product information.
Quote from: Marvin C. on August 10, 2025, 11:57:43 PMWhen a user submits a form, how can we automatically obtain the url of the page?The form is on the product page.I want to automatically obtain the link or product name of the product when the user submits the form.
I am wondering the same question, and curious if the way to do this has changed since this was originally posted.
This requirement is very common: the form is embedded on the product page, and you want to know which product the user was viewing when they submitted the form. The core approach is to use "hidden fields" plus frontend JavaScript to write the current page URL or product name into the form before submission.
However, the specific implementation depends entirely on which form tool you are using. The capabilities and extension methods vary greatly across different platforms.
General Universal Solution (With Code Control)
If your website allows you to add JavaScript, this is the most reliable method:
Add a hidden field to the form (e.g., page_url, product_name).
Before page load or form submission, use JavaScript to obtain window.location.href (page URL) or product information from the page, and assign it to the hidden field.
Example code:
javascript
// Execute after form is loaded
document.addEventListener('DOMContentLoaded', function() {
var hiddenField = document.querySelector('input[name="page_url"]');
if (hiddenField) {
hiddenField.value = window.location.href;
}
});
Note: If the form is dynamically loaded via a popup or AJAX (loaded only when the user clicks), the above code may not capture it. In such cases, you need to use MutationObserver to monitor the form being inserted into the DOM, or bind the assignment logic to the form's submit event.
Built-in Features of Common Form Tools
If you are using a SaaS form builder, check whether it has built-in capabilities:
Form Tool Built-in Feature Notes
Jotform "Get Form Page URL" Widget Built-in, no coding required, automatically captures the embedding page URL
Gravity Forms gform_source_id_pre_save_entry Hook Can obtain the page ID where the form is located via PHP, suitable for WordPress
Constant Contact Modify embed code + custom fields Need to manually add var url = document.location.href; to the embed code
Microsoft Forms Not supported Officially confirmed no native capability to obtain the submission page URL
Product Name Acquisition
If you want product name instead of the URL, you need to read it from the page structure. For example, extract it from the product title element on the page, or use Liquid/template variables on e-commerce platforms (such as Shopify's {{ product.title }}).
Key Pitfalls
HTTP_REFERER is unreliable: Relying on server-side Referer may result in empty values or lost data due to browser privacy settings or AJAX popups.
Iframe embedding complications: If the form is embedded via iframe, window.location.href in the parent page is not directly accessible; you need to pass it through URL parameters or postMessage.