<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lamofel</title>
    <description>The latest articles on DEV Community by Lamofel (@lamofel).</description>
    <link>https://dev.to/lamofel</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4172215%2F4dc714dc-fa96-4912-b6b5-127907b852ad.jpg</url>
      <title>DEV Community: Lamofel</title>
      <link>https://dev.to/lamofel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lamofel"/>
    <language>en</language>
    <item>
      <title>Add a contact form to GitHub Pages or Cloudflare Pages</title>
      <dc:creator>Lamofel</dc:creator>
      <pubDate>Thu, 29 Oct 2026 20:33:34 +0000</pubDate>
      <link>https://dev.to/lamofel/add-a-contact-form-to-github-pages-or-cloudflare-pages-4450</link>
      <guid>https://dev.to/lamofel/add-a-contact-form-to-github-pages-or-cloudflare-pages-4450</guid>
      <description>&lt;p&gt;A contact form needs somewhere to send its data. HTML sends the submission to the address in the form's action attribute; the page itself has no mailbox. A thank-you message alone does not establish that an email arrived.&lt;/p&gt;

&lt;p&gt;GitHub Pages and Cloudflare Pages can publish your static HTML. To receive submissions by email without writing your own server, point the form at a service endpoint.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Choose a form backend
&lt;/h2&gt;

&lt;p&gt;Choose a form backend that accepts a plain HTML POST and gives you an endpoint URL. You will use that URL in your form's action attribute.&lt;/p&gt;

&lt;p&gt;For a name, email address and message, the form has this structure. Replace YOUR_ENDPOINT_URL with the endpoint provided by your chosen backend.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;form&lt;/span&gt; &lt;span class="na"&gt;action=&lt;/span&gt;&lt;span class="s"&gt;"YOUR_ENDPOINT_URL"&lt;/span&gt; &lt;span class="na"&gt;method=&lt;/span&gt;&lt;span class="s"&gt;"POST"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"field-name"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Name&lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"field-name"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"name"&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"field-email"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Email&lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"field-email"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"email"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"email"&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"field-message"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Message&lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;textarea&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"field-message"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"message"&lt;/span&gt; &lt;span class="na"&gt;rows=&lt;/span&gt;&lt;span class="s"&gt;"5"&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/textarea&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"_gotcha"&lt;/span&gt; &lt;span class="na"&gt;tabindex=&lt;/span&gt;&lt;span class="s"&gt;"-1"&lt;/span&gt; &lt;span class="na"&gt;autocomplete=&lt;/span&gt;&lt;span class="s"&gt;"off"&lt;/span&gt; &lt;span class="na"&gt;hidden&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Send message&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Paste the form into a page in the folder you publish, such as contact.html.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Keep the hidden spam trap
&lt;/h2&gt;

&lt;p&gt;A hidden field can act as a spam trap when the backend supports honeypot filtering. If a bot fills it in, the backend can identify the submission as spam.&lt;/p&gt;

&lt;p&gt;Field names differ between backends; use the one your backend documents for spam. The example uses _gotcha, which may need changing.&lt;/p&gt;

&lt;p&gt;When testing, leave the hidden field empty.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Configure your endpoint
&lt;/h2&gt;

&lt;p&gt;Use the endpoint URL and any setup instructions provided by your chosen backend. Check whether email verification or additional configuration is required before submissions can reach your inbox.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Publish on your host
&lt;/h2&gt;

&lt;p&gt;For GitHub Pages, commit and push the updated file to your repository. Changes can take up to 10 minutes to appear after a push. GitHub Pages serves static files and does not support server-side PHP, Ruby or Python.&lt;/p&gt;

&lt;p&gt;For Cloudflare Pages, push the updated file to the Git repository connected to your Pages project. Pages supports GitHub and GitLab repositories.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Test the published page
&lt;/h2&gt;

&lt;p&gt;Open the live contact page and submit a test message. Check that it arrives in your inbox. Test the deployed form, with the real endpoint in its action.&lt;/p&gt;

&lt;p&gt;Before choosing a backend, check how long submissions are stored and whether file uploads are supported.&lt;/p&gt;

&lt;p&gt;This article was prepared with AI assistance.&lt;/p&gt;

</description>
      <category>html</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>tools</category>
    </item>
  </channel>
</rss>
