Astro Integration

Astro Contact Form with only Frontend Code

Start collecting form submissions from your Astro site with Forms in 2 minutes. Create your form in Forms and paste your unique URL inside your form. Look at the code examples and detailed tutorial below to get started.

VS Code

---
import { onMount } from 'astro';
let email = '';
let message = '';
let submitted = false;
let error = '';

const handleSubmit = async () => {
  error = '';
  try {
    const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ email, message })
    });
    const data = await res.json();
    if (data.code === 200) submitted = true;
    else error = data.message || 'Something went wrong';
  } catch (err) {
    error = err.message;
  }
};
---

  Email:
  

  Message:
  

  Send

  {submitted && Form submitted successfully!

}
  {error && {error}

}

How to Integrate Code

What is Astro?

Astro is a modern framework for building fast websites using a component-based architecture. It allows you to mix different frontend frameworks and deliver static HTML by default. Forms works seamlessly with Astro for frontend-only form submissions.

Forms Setup with Astro using Fetch

You can use the native Fetch API in Astro to submit forms. Make sure to replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

---
let email = '';
let message = '';
let submitted = false;
let error = '';

const handleSubmit = async () => {
  error = '';
  try {
    const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ email, message })
    });
    const data = await res.json();
    if (data.code === 200) submitted = true;
    else error = data.message || 'Something went wrong';
  } catch (err) {
    error = err.message;
  }
};
---

Forms Setup with Astro using Axios

You can also use Axios in Astro to send form submissions. Replace the mockapi with your Forms URL.

VS Code

---
import axios from 'axios';
let email = '';
let message = '';
let submitted = false;
let error = '';

const handleSubmit = async () => {
  error = '';
  try {
    const response = await axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message });
    if (response.data.code === 200) submitted = true;
    else error = response.data.message || 'Something went wrong';
  } catch (err) {
    error = err.message;
  }
};
---

Forms Setup for File Uploads in Astro

You can upload files in Astro using a native file input and FormData. Replace the mockapi with your Forms URL.

VS Code

---
let email = '';
let file = null;
let submitted = false;
let error = '';

const handleFileChange = (event) => {
  file = event.target.files[0];
};

const handleSubmit = async () => {
  if (!file) return error = 'Please select a file';
  error = '';

  const formData = new FormData();
  formData.append('email', email);
  formData.append('file', file);

  try {
    const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
      method: 'POST',
      body: formData
    });
    const data = await res.json();
    if (data.code === 200) submitted = true;
    else error = data.message || 'Something went wrong';
  } catch (err) {
    error = err.message;
  }
};
---

Set Up Forms in 60 Seconds

Create Your Form

Get Your Endpoint

Forms gives you a unique endpoint. Point your form's action attribute (or a fetch/axios call) at it.

Start Receiving Submissions

Submissions land instantly in your dashboard inbox, with spam filtering and alerts built in.

Get Started Now

USE CASES

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites.

Simple Contact Form

Survey Form

Book a Demo Form

News Letter Form

Registration Form & more...

Learn More