Jekyll

HTML Forms with Jekyll

Jekyll builds static HTML from Liquid templates, making it a natural fit for Formward: the form action points directly at your Formward endpoint and Jekyll has nothing else to do.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://formward.eu/f/your-form-id). Optionally, store it as a site variable in _config.yml so you can reference it from multiple templates.

   # _config.yml
   formward_endpoint: "https://formward.eu/f/your-form-id"

2. 02Add the form to a page or layout

   Create or edit a page (for example contact.html in your Jekyll root) and add the Liquid template below. The {{ site.formward_endpoint }} tag inserts the endpoint URL from _config.yml at build time.

   ---
   layout: default
   title: Contact
   permalink: /contact/
   ---
   
   <main>
     <h1>Contact</h1>
   
     <form action="{{ site.formward_endpoint }}" method="POST" class="contact-form">
       <div class="field">
         <label for="name">Name</label>
         <input id="name" type="text" name="name" required />
       </div>
   
       <div class="field">
         <label for="email">Email</label>
         <input id="email" type="email" name="email" required />
       </div>
   
       <div class="field">
         <label for="message">Message</label>
         <textarea id="message" name="message" rows="5" required></textarea>
       </div>
   
       <!-- honeypot: keep hidden -->
       <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
   
       <button type="submit">Send</button>
     </form>
   </main>

3. 03Style the form

   Add CSS for .contact-form, .field, and the input elements to your project's stylesheet (typically assets/css/style.scss or main.scss). Jekyll processes SCSS automatically if the file has front matter (two lines of --- at the top).

4. 04Test and view submissions

   Run bundle exec jekyll serve, open http://localhost:4000/contact/, and submit the form. The browser posts to Formward and redirects to the confirmation page. Log in to the Formward dashboard to confirm the submission arrived. The same form works identically when deployed to GitHub Pages, Netlify, or any other static host.