How to Add a Working Contact Form in Framer (WhatsApp)

          <script src="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script>

<script>
  FormsReach.init({ apiKey: 'YOUR_API_KEY' });
</script>

<form data-formsreach>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Submit Form</button>
</form>
        

<script src="https://unpkg.com/@formsreach/js/dist/formsreach.min.js"></script>
<script>
  FormsReach.init({ apiKey: 'YOUR_API_KEY' });
</script>

<form data-formsreach>
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Submit</button>
</form>

          // npm install @formsreach/react
import { useFormsReach } from '@formsreach/react';

function ContactForm() {
  const { submit, submitting } = useFormsReach('YOUR_API_KEY');

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={submitting}>Submit Form</button>
    </form>
  );
}
        

// npm install @formsreach/react
import { useFormsReach } from '@formsreach/react';

function ContactForm() {
  const { submit, submitting } = useFormsReach('YOUR_API_KEY');

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={submitting}>Submit Form</button>
    </form>
  );
}

          // npm install @formsreach/react
'use client';

import { useFormsReach } from '@formsreach/react';

export default function ContactForm() {
  const { submit, submitting } = useFormsReach('YOUR_API_KEY');

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={submitting}>Submit Form</button>
    </form>
  );
}
        

// npm install @formsreach/react
'use client';

import { useFormsReach } from '@formsreach/react';

export default function ContactForm() {
  const { submit, submitting } = useFormsReach('YOUR_API_KEY');

  return (
    <form onSubmit={submit}>
      <input type="text" name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={submitting}>Submit Form</button>
    </form>
  );
}

          <!-- npm install @formsreach/vue -->
<script setup>
import { useFormsReach } from '@formsreach/vue';

const { submit, submitting } = useFormsReach('YOUR_API_KEY');
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="submitting">Submit Form</button>
  </form>
</template>
        

<!-- npm install @formsreach/vue -->
<script setup>
import { useFormsReach } from '@formsreach/vue';

const { submit, submitting } = useFormsReach('YOUR_API_KEY');
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="submitting">Submit Form</button>
  </form>
</template>

          <!-- npm install @formsreach/vue -->
<script setup>
import { useFormsReach } from '@formsreach/vue';

const { submit, submitting } = useFormsReach('YOUR_API_KEY');
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="submitting">Submit Form</button>
  </form>
</template>
        

<!-- npm install @formsreach/vue -->
<script setup>
import { useFormsReach } from '@formsreach/vue';

const { submit, submitting } = useFormsReach('YOUR_API_KEY');
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="submitting">Submit Form</button>
  </form>
</template>

          ---
// src/components/ContactForm.astro
---
<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>
        

---
// src/components/ContactForm.astro
---
<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>

          <!-- ContactForm.svelte - plain form POST, no Svelte SDK package -->
<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>
        

<!-- ContactForm.svelte - plain form POST, no Svelte SDK package -->
<form action="https://api.formsreach.com/submit" method="POST">
  <input type="hidden" name="api_key" value="YOUR_API_KEY" />
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>

  <button type="submit">Submit Form</button>
</form>