jekyll passing variable to form page - variables

Question

I try to find a way to create a single booking form with jekyll.
I got for instance a button for booking at my tour details page.
When user click that button, I would love to know if there's a way to pass parameters to the booking page in order to display for example the name -- prices -- etc... of the tour.
I can't figure out how or even if its possible. Anyone clever enough for pointing me the right direction( if there's one) ?

Answer 1

Yes, it's possible, but as Jekyll is static, you have to do this on client side.
Explanation.
The tour page (tour.html):
---
title: tours
layout: page
tour:
name: Flying with eagles
description: text here
price: 120€
---
{% capture url %}n={{ page.tour.name | uri_escape }}&p={{ page.tour.price | uri_escape }}{% endcapture %}
<h2>{{ page.tour.name }} ({{ page.tour.price }}) - Book me for this tour!</h2>
<p>{{ page.tour.description }}</p>
Note that we use page variables to store values like name and price, but you can hard code this in the page body:
<h2>{{ page.tour.name }} ({{ page.tour.price }}) - Book me for this tour!</h2>
then becomes :
<h2>Flying with eagles (120€) - Book me for this tour!</h2>
the form (tour_form.html) :
---
title: tour form
layout: page
---
<form accept-charset="UTF-8" action="" method="POST">
<input type="text" name="tourName" value="">
<input type="text" name="tourPrice" value="">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="name" placeholder="Your Name">
<button type="submit">Submit</button>
</form>
<script>
// this script will automatically fill name and price fields
// depending on what's passed in the url
var fillForm = function () {
var queryString = document.location.search.split("+").join(" ");
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(queryString)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
if (params.n == undefined && params.p == undefined){
// no value in the query string
// here you have to manage this use case : redirect or print a message to user
}else{
// filling form fields with query string values
document.getElementsByName('tourName')[0].value = params.n;
document.getElementsByName('tourPrice')[0].value = params.p;
}
} ();
</script>
This form is automatically filled with parameters passed from tour.html.
It can then be pointed to a form service like http://forms.brace.io/, http://www.jotform.com/ or any form service to deliver submitted datas.
Note: some services need a callback page to redirect to when the form is submitted.
You then need to make another page (eg: thankyou.html) in witch you'll have to parse and present url passed datas to user.