Skip to main content

Add Form to Website

After you create a form, you can use it on your website.

Open the Form Endpoint​

  1. Open your form dashboard.
  2. Open the Code or Integration area.
  3. Copy the Form Submission Endpoint.

Three Common Ways to Use the Form​

The dashboard supports three common paths:

  • Webpages (Hosted with us)
  • BYOW (Bring Your Own Website)
  • Other Website

Option 1: Webpages Hosted With Us​

Use this when your website is built or hosted on our platform.

  1. Open the form dashboard.
  2. Go to the integration area.
  3. Choose Webpages (Hosted with us).
  4. Open your webpage editor.
  5. connect the page form to the endpoint

This is usually the easiest option.

Option 2: BYOW​

Use this when you brought your own website and manage its content yourself.

  1. Open the form dashboard.
  2. Go to the integration area.
  3. Choose BYOW.
  4. open your site code or editor
  5. use the provided endpoint in your existing form

This works well for custom HTML websites and custom front-end apps.

Option 3: Other Website​

Use this when your site is hosted somewhere else.

  1. Copy the endpoint.
  2. Open your website platform.
  3. find the form settings or code
  4. add the endpoint where the form submits data

Code Section​

Form code In the Code area, you may see different code tabs depending on which features are enabled for your form. The available tabs in the UI include HTML, Fetch, AJAX, React, CURL, File Upload, Turnstile, Google Sheet Setup, and HTML with Honeypot.

When Turnstile Is Enabled If Turnstile is enabled for your form, you will see a Turnstile tab in the Code area. That tab shows an example with the Turnstile widget added to the form.

When Honeypot Is Enabled If Honeypot is enabled for your form, you will see a Honeypot tab in the Code area. That tab shows an HTML example with a hidden honeypot field for spam protection.

When Google Sheet Is Enabled If Google Sheet integration is enabled, you will also see a Google Sheet Setup tab in the Code area. That section provides the setup steps and sample Apps Script needed to send submissions into Google Sheets.

Form Tabs

Important Rule for Form Fields​

Every field in your form should have a name.

Examples:

  • name
  • email
  • phone
  • message

Without a field name, the system may not save that value in the submission.

Typical Form Fields​

Common fields include:

  • name
  • email
  • phone
  • company
  • subject
  • message

Test the Form​

After connecting the form:

  1. open the live website page
  2. fill out the form
  3. submit a test message
  4. confirm the submission appears in your dashboard or email

If the Form Does Not Work​

Check these items:

  • confirm you copied the correct endpoint
  • confirm your website form is using that endpoint
  • confirm each form field has a name
  • confirm you saved your website changes
  • submit another test entry

Best Practice​

Create the form first, test it on one page, and only then reuse it more widely across your site.

Code Examples​

In the Code area, you may see different example tabs depending on which features are enabled for your form.

Available examples can include:

  • HTML
  • Fetch
  • AJAX
  • React
  • CURL
  • File Upload
  • Turnstile
  • Google Sheet Setup
  • HTML with Honeypot

HTML​

Use a simple HTML form that posts directly to your form endpoint.

<form action="https://api.cloudmysite.com/forms/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Fetch​

Use JavaScript fetch() to send the form as JSON.

<script>
fetch("https://api.cloudmysite.com/forms/f/YOUR_FORM_ID", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "John",
    email: "[email protected]",
    message: "Hello"
  })
});
</script>

AJAX​

Use XMLHttpRequest if your site uses older JavaScript patterns.

<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.cloudmysite.com/forms/f/YOUR_FORM_ID", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Form submitted");
  }
};

xhr.send(JSON.stringify({
  name: "John",
  email: "[email protected]"
}));
</script>

React​

Use this in a React component to submit the form with JavaScript.

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");

  const submit = async (e) => {
    e.preventDefault();

    const formData = {
      name: e.target.name.value,
      email: e.target.email.value
    };

    const res = await fetch("https://api.cloudmysite.com/forms/f/YOUR_FORM_ID", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(formData)
    });

    if (res.ok) {
      setStatus("Message sent!");
      e.target.reset();
    }
  };

  return (
    <form onSubmit={submit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" required />
      <button type="submit">Send</button>
      {status && <p>{status}</p>}
    </form>
  );
}

CURL​

Use this for testing from the command line.

curl -X POST https://api.cloudmysite.com/forms/f/YOUR_FORM_ID \
  -H "Content-Type: application/json" \
  -d '{"name":"John","email":"[email protected]"}'

File Upload​

Use this when your form includes file uploads such as resumes, documents, or images.

<form id="careerForm">
  <input name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <input type="file" id="resumeFile" name="resume" />
  <button type="submit">Send</button>
</form>

<script>
document.getElementById("careerForm").addEventListener("submit", async function (e) {
  e.preventDefault();

  const form = e.target;
  const fileInput = document.getElementById("resumeFile");

  let uploadedFiles = [];

  if (fileInput.files.length > 0) {
    const multipart = new FormData();
    multipart.append("resume", fileInput.files[0]);

    const uploadRes = await fetch("https://api.cloudmysite.com/forms/f/YOUR_FORM_ID/upload", {
      method: "POST",
      body: multipart
    });

    const uploadJson = await uploadRes.json();

    if (!uploadRes.ok || !uploadJson.success) {
      alert(uploadJson.error || "File upload failed");
      return;
    }

    uploadedFiles = uploadJson.files || [];
  }

  const submitRes = await fetch("https://api.cloudmysite.com/forms/f/YOUR_FORM_ID", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      name: form.name.value,
      email: form.email.value,
      message: form.message.value,
      files: uploadedFiles
    })
  });

  if (submitRes.ok) {
    document.body.innerHTML = await submitRes.text();
  } else {
    alert("Form submission failed");
  }
});
</script>

Turnstile​

If Turnstile is enabled for your form, use the Turnstile widget in your form.

<form action="https://api.cloudmysite.com/forms/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message"></textarea>

  <div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

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

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

HTML with Honeypot​

If Honeypot protection is enabled, add a hidden field to reduce spam submissions.

<form action="https://api.cloudmysite.com/forms/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message"></textarea>

  <div style="position:absolute; left:-9999px;">
    <label>Leave this field empty</label>
    <input type="text" name="_honeypot" />
  </div>

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

Google Sheet Setup​

If Google Sheet integration is enabled, you can send submissions into a Google Sheet using Apps Script.

function doPost(e) {
  try {
    var data = JSON.parse(e.postData.contents);
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
    sheet.appendRow([
      new Date(),
      data.name,
      data.email,
      data.message,
      data.formName,
      data.date,
      data.timestamp,
      data.ip
    ]);

    return ContentService
      .createTextOutput(JSON.stringify({ status: "success" }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService
      .createTextOutput(JSON.stringify({ status: "error", message: err.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Setup steps:

Open Google Sheets and create a new sheet or use an existing one. Go to Extensions → Apps Script. Paste the script above. Save and deploy it as a Web app. Set access to Anyone with the link. Copy the Web App URL. Paste that URL into your form settings.

Do not use the normal Google Sheet URL. Use the Apps Script Web App URL.

Notes Replace YOUR_FORM_ID with your real form endpoint. Replace YOUR_SITE_KEY with your real Turnstile site key when Turnstile is enabled. Every field should include a name attribute. Test your form after setup to confirm submissions are received.