Astro Integration

Astro Contact Form with only Frontend Code

Start collecting form submissions from your Astro site with FormAPI in 2 minutes. Create your form in FormAPI 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;
  }
};
---

<div>
  <label>Email:</label>
  <input type="email" bind:value={email} />

  <label>Message:</label>
  <textarea bind:value={message}></textarea>

  <button on:click={handleSubmit}>Send</button>

  {submitted && <p>Form submitted successfully!</p>}
  {error && <p style="color:red">{error}</p>}
</div>

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. FormAPI works seamlessly with Astro for frontend-only form submissions.

FormAPI 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 endpoint 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;
  }
};
---

FormAPI Setup with Astro using Axios

You can also use Axios in Astro to send form submissions. Replace the endpoint with your FormAPI 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;
  }
};
---

FormAPI Setup for File Uploads in Astro

You can upload files in Astro using a native file input and FormData. Replace the endpoint with your FormAPI 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 Checks in 60 Seconds

Choose HTTPS Monitor

Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.

Enter Site URL & Options

Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.

Activate & Get Instant Status

We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.

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. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.