Eleventy Edge: Forms

• Zero client-side JavaScript required. Disable JavaScript and try it out!
• Uses the Post Redirect Get method to eliminate pesky duplicate POST-submission alerts.
• For demo purposes, we save your name to a cookie without JavaScript (Secure/HttpOnly). You’ll probably want to use a database instead.

Learn more on 11ty.dev: Eleventy Edge Plugin documentation

Source Code

Username Display

{% edge %}{% if eleventy.edge.cookies.username.size > 0 %}<h2>Welcome {{ eleventy.edge.cookies.username | url_decode }}! 👋🏻 🌊</h2>{% endif %}{% endedge %}

Hybrid Edge Form

<form action="{{ page.url }}" method="post">
  <label>Your Name <input type="text" name="username" value="{% edge %}{{ eleventy.edge.cookies.username | url_decode }}{% endedge %}"></label>
  <button type="submit">Save</button>
</form>

Edge Function