Do you like AbanteCart? Please rate AbanteCart or share your experience with other eCommerce entrepreneurs. Go to Softaculous rating page to add your rating or write a review

When a user submits a form, how can we automatically obtain the url of the page?

Started by Marvin C., August 10, 2025, 11:57:43 PM

Previous topic - Next topic

Marvin C.

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.

Basara

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.

yonghan79


Basara

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.

marktuan

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.

timlight10

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.

Donysterling UK

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.

Forum Rules Code of conduct
AbanteCart.com 2010 -
Powered by SMFPacks Social Login Mod