DEV Community: PostMyForm

How to add a contact form to Astro

PostMyForm — Thu, 30 Jul 2026 18:00:00 +0000

Add a working form to a static Astro site

Astro generates static HTML by default. That makes it a good fit for PostMyForm: Astro publishes the page, and PostMyForm receives and processes the form submission.

You do not need to add an Astro server adapter, API route, or server action just to receive a contact form.

1. Create the form in PostMyForm

Configure:

A recognizable form name.
The email address that should receive notifications.
The allowed origin for the deployed Astro site.
An optional success redirect URL.

For a production site such as:

https://www.example.com/contact/

enter this allowed origin:

https://www.example.com

An origin contains the scheme, hostname, and optional port. It does not contain the page path.

When testing locally, add the exact origin printed by the Astro development server, such as:

http://localhost:4321

Use the actual URL shown in the terminal if Astro selects a different hostname or port.

2. Add the fields

Add the fields required by the form.

A typical contact form includes:

Name
Email
Message

PostMyForm supports text, email, textarea, select, and checkbox fields. Mark fields as required where appropriate.

3. Create an Astro form component

Create a component such as:

src/components/ContactForm.astro

Open the form detail page in PostMyForm and copy the complete generated HTML snippet into that component.

Astro processes normal <script> elements during the build. The PostMyForm snippet uses a small script that must remain in its original position inside the form.

Change only the generated opening script tag from:

    <script>

to:

    <script is:inline>

The is:inline directive tells Astro to leave the script in the rendered HTML exactly where it appears.

A shortened component example looks like this:

    <form action="https://postmyform.com/f/your-endpoint-id" method="POST">
      <div>
        <label for="contact-name">Name</label>
        <input id="contact-name" name="name" type="text" required>
      </div>
      <div>
        <label for="contact-email">Email</label>
        <input id="contact-email" name="email" type="email" required>
      </div>
      <div>
        <label for="contact-message">Message</label>
        <textarea
          id="contact-message"
          name="message"
          required
        ></textarea>
      </div>

      <!-- Keep the generated honeypot and timing fields here. -->

      <button type="submit">Send message</button>

      <script is:inline>
        // Keep the complete script generated by PostMyForm here.
      </script>
    </form>

Do not use this shortened example as the finished form. Use the complete snippet from the PostMyForm dashboard so the unique endpoint, randomized honeypot, timing field, and initialization script are preserved.

4. Add the component to an Astro page

Import the component into the page where the form should appear.

For example, in src/pages/contact.astro:

    ---
    import ContactForm from "../components/ContactForm.astro";
    ---

    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        >
        <title>Contact us</title>
      </head>

      <body>
        <main>
          <h1>Contact us</h1>
          <ContactForm />
        </main>
      </body>
    </html>

When the project already uses a shared layout, place inside that layout instead of creating another complete HTML document.

5. Test the form locally

Start the Astro development server using the command configured by the project, commonly:

npm run dev

Open the contact page and confirm:

The form is visible.
The form action points to the PostMyForm endpoint.
The development origin is allowed in PostMyForm.
The generated honeypot and timing fields are still present.
The generated script uses is:inline.

Send one normal test submission. It should appear in the PostMyForm dashboard and trigger a notification attempt.

6. Build and deploy the Astro site

Create the production build using the project's normal build command, commonly:

npm run build

Deploy the generated Astro site using the existing hosting workflow.

After deployment, open the public contact page and send another test submission. Confirm that the public site's exact origin is included in the form's allowed origins.

Wrap-up

You now have a working contact form on a static Astro site without running an application server or deploying a separate serverless function.

Before considering the setup complete, verify that:

the form appears correctly on the deployed site,
the browser origin matches the allowed origin in PostMyForm,
a test submission appears in the PostMyForm dashboard,
the notification email is delivered,
and the configured success redirect works.

For additional details and troubleshooting guidance, review the complete guide:

Read the complete Astro contact-form guide

How to add a contact form to GitHub Pages

PostMyForm — Sun, 26 Jul 2026 17:23:00 +0000

GitHub Pages is ideal for publishing fast, low-maintenance static websites, but it cannot process contact-form submissions on its own.

In this guide, we’ll add a working HTML contact form, connect it to a hosted form endpoint, restrict submissions to the correct GitHub Pages origin, and test the complete flow—without deploying a server or serverless function.

Add a working form without a backend

GitHub Pages publishes static HTML, CSS, and JavaScript. It does not provide application code that can receive and process a form submission.

PostMyForm supplies the hosted form endpoint while your website remains a normal GitHub Pages site.

1. Create the form in PostMyForm

Configure:

A recognizable form name.
The email address that should receive notifications.
The allowed origin for the GitHub Pages site.
An optional success redirect URL.

For a project site such as:

https://username.github.io/project-name/

Use the following allowed origin:

https://username.github.io

The project path is not part of the browser origin.

When the site uses a custom domain, enter the exact origin shown in the browser, such as:

https://www.example.com

2. Add the fields

Add the fields required by the contact form.

A typical contact form includes:

Name
Email
Message

Mark fields as required where appropriate.

3. Copy the generated form

Open the form detail page and copy the complete generated HTML.

A shortened example looks like this:

<form action="https://postmyform.com/f/your-endpoint-id" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send message</button>
</form>

Use the complete snippet from the dashboard. It contains the unique endpoint and anti-spam controls required by your form.

4. Add the form to the repository

Paste the generated HTML into the page or template where the contact form should appear.

For a simple HTML site, this may be index.html or contact.html.

Commit and push the change to the publishing source configured for GitHub Pages. That source may be a repository branch or a GitHub Actions deployment workflow.

5. Confirm the published URL

Wait for the GitHub Pages deployment to finish and open the published page in a browser.

Confirm that:

The form is visible.
The page uses HTTPS.
The browser origin matches the allowed origin in PostMyForm.
The form action points to the generated PostMyForm endpoint.

6. Send a test submission

Submit the published form once.

A clean submission should appear in the PostMyForm dashboard and trigger an email notification attempt. The submission history records the notification result.

If a success redirect is configured, PostMyForm redirects the browser after processing the submission.

7. You now have a working contact form

You now have a working contact form on a static GitHub Pages site without maintaining a separate backend.

Before considering the setup complete, test the form from the published HTTPS URL and confirm that:

the submission appears in the PostMyForm dashboard,
the notification email arrives,
the configured success redirect works,
and the browser origin matches the allowed origin.

For common problems and additional details, see the full troubleshooting guide:

Review the complete GitHub Pages guide and troubleshooting steps