Url Query String - Passing liquid values to fill out form on another page

Question

On my shopify website I have a product page with a request button, that when clicked should redirect the user to another page which has a form on it.

Clicking the button on the product page should pass the product title from that page to the other page and place that string variable into the form for the user to see and so that they can fill out the rest of the form with their information.

This is my link:

<a href="/pages/other-page#request-form">REQUEST ITEM</a>

What needs to be passed:

{{ product.title }}

Where it needs to be placed ( #form_text ):

<form id="request-form" method="post">
    <input id="first_name" name="firstName" placeholder="First Name*" type="text" value="" /> 
    <input id="last_name" name="lastName" placeholder="Last Name*" type="text" value="" /> 
    <textarea id="form_text" name="content" placeholder="What item do you want?"></textarea> 
    <input id="requestFormSubmit" type="submit" value="SUBMIT" /> 
</form>

How would I go about writing a url query string to pass this liquid variable?

Edit:

---

Thank you to @TylerSebastion, I was able to get it to work.

The link:

<a href="/pages/other-page#request-form?product={{ product.title | url_param_escape }}">REQUEST ITEM</a>

Here is the code I used on the form page:

$(function() {
    var product = getParameterByName('product');
    $("#form_text").text(product);

    function getParameterByName(product) {
        url = window.location.href;
        product = product.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + product + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
});

Answer 1

You can pass it in via a query parameter.

<a href="/pages/other-page#request-form?product={{ product.title }}">REQUEST ITEM</a>

As for getting it into the form, use the method from this post and

$(function() {
    $("form #form_text").val(getParameterByName("product"));
});

I would also suggest, if at all possible in the templating engine you're using, to url encode the product name before appending it to the url.

If looks like there is a request object, though, in the Shopify/Liquid templating engine - I would try something like

<textarea id="form_text" name="content" placeholder="What item do you want?">{{ request.params.product }}</textarea> 

and ditch the JS altogether (for this example)