Example Contact Form

This page demonstrates how to embed the contact form in another page. The form below is the same one used on the main contact page.

How to Use

To embed the contact form in any page, you need to:

1. Create a custom layout template that includes the contact form partial
2. Set the page’s layout to use your custom template

For example, you could create a layout file at layouts/_default/contact-page.html with:

{{ define "main" }}
<article class="post-single">
  <header class="post-header">
    <h1 class="post-title">{{ .Title }}</h1>
    {{ if .Description }}
    <div class="post-description">
      {{ .Description }}
    </div>
    {{ end }}
  </header>

  <div class="post-content">
    {{ .Content }}
  </div>
</article>
{{ end }}

Then set your page’s layout to contact-page in the front matter.

Example Form

Below is the embedded contact form:

Notes

• The form uses the same function worker as the main contact page
• It relies on the same KV store for rate limiting
• It collects the same data fields (name, email, message)
• It works with the current build command in the Cloudflare project