Jekyll/Liquid form template with variables

Question

Is there a way to design a form template that is used by content pages with various parameters? Something like this:

_layouts/form.html

---
layout: default
---

<form method="POST" action="/info/{{ page.action }}">
  {% for question in page.questions %}
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="question{{ question.id }}">
    <label class="form-check-label" for="question{{ question.id }}">{{ question.text }}</label>
  </div>
  {% endfor %}
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
  $("form").submit(function(event) {
    var inputElems = $("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
      if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
          count++;
      }
    }
    if (count > {{ page.count }}) {
      return;
    } else {
      event.preventDefault();
      alert("Alert");
    }
  });
</script>

And a content page could consist of only a front matter that defines variables used by the template:

---
layout: form
title: Title
action: /results
questions: site.data.questions1
count: 10
---

The nicer solution would be to create some YAML file with variables definitions that are injected into the template accounting for the permalink of the form page. This file would be used to generate the end form pages.

Michael Currin Michael Currin · Accepted Answer · 2021-06-07T07:02:02

Do you know about includes files in Jekyll?

Rather than determining the layout of a page so its hard to add stuff to it, the includes functionality is like a function or piece of reusable code. Which you can use on pages or layouts.

And it works well with parameters.

From the docs

_include/image.html

<figure>
   <a href="{{ include.url }}">
   <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
      alt="{{ include.alt }}"/>
   </a>
   <figcaption>{{ include.caption }}</figcaption>
</figure>

Call like

---
---
{% include image.html url="http://jekyllrb.com"
max-width="200px" file="logo.png" alt="Jekyll logo"
caption="This is the Jekyll logo." %}

Or pass variable names instead of values, as defined in frontmatter or data file. Be careful not to override URL on the page with an image url or it can break things.

---
my_image:
  url: '...'
  alt: '...'
---
{% include image.html url=page.my_image.url alt=page.my_image.html ... %}

From _data/gallery.yaml

{% include image.html url=site.data.gallery.my_image.url 
... %}

Or pass an object with attributes on it.

---
my_image:
  url: '...'
  alt: '...'
---
{% include image.html image_attributes=page.my_image %}

Jekyll/Liquid form template with variables

1 Answers