DEV Community: Allen Jones

Creating a Fully Functional Contact Form with React and Formgrid API

Allen Jones — Mon, 30 Mar 2026 12:25:58 +0000

A contact form is an essential component
of any website, allowing visitors to reach
out to you with their queries or feedback.

In this tutorial, I will show you how to create a contact form with Formgrid, React, and Styled Components.

We will start by creating the basic form structure and styling it with Styled Components.
Then we will integrate the Formgrid API to handle form submissions.

Formgrid is an open-source form backend and no-code form builder that makes it simple to handle form submissions without any server-side coding. By the end of this tutorial, you will have a working contact form that sends email notifications to your inbox whenever someone submits the form.

Prerequisites
Setting Up the React Project
Creating the Form Page Layout
Creating The Details Bar Component
Creating The Input Side and Input Fields
Declaring The State Variables and Input Handler Functions
Creating a Formgrid Account
Handling Form Submission
Creating The Success Page
Redirecting Users to The Success Page
Conclusion

Prerequisites

Basic knowledge of React and JavaScript
A free Formgrid account

Setting Up The React Project

First, create a new React project using create-react-app. 'Open your terminal, navigate to your desired directory, and
run the following command:

npx create-react-app formgrid-react-contact-form

This will create a new React project named formgrid-react-contact-form.

Once the project is created, navigate to
the project root directory by running:

cd formgrid-react-contact-form

We will be using styled-components for
styling our components and react-reveal
for fade-in animation.

Run the following command to install
the dependencies:

npm i styled-components react-reveal

Creating The Form Page Layout

Now that we have our project set up let us create the page layout. In your project's src folder create a new folder called pages. Navigate to the pages folder and create a new file called
FormPage.js. Add the following code
to FormPage.js:

//FormPage.js
import React from 'react';
import styled from 'styled-components';

const PageWrapper = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  background-color: whitesmoke;
  padding-bottom: 50px;
`;

const PageHeadingWrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 40px;
`;

const FormContainer = styled.div`
  width: 70%;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  height: 70vh;
  @media (max-width: 768px) {
    width: 90%;
  }
`;

const TextOne = styled.b`
  font-size: 30px;
  color: rgb(4, 4, 59);
  text-align: center;
`;

const TextTwo = styled.p`
  color: rgb(4, 4, 34);
  font-size: 15px;
  text-align: center;
`;

const FormPage = () => {
  return (
    <PageWrapper>
      <PageHeadingWrapper>
        <TextOne>Contact US</TextOne>
        <TextTwo>
          Any Question or remarks? 
          Just write us a message
        </TextTwo>
      </PageHeadingWrapper>
      <FormContainer></FormContainer>
    </PageWrapper>
  );
};

export default FormPage;

Creating The Details Bar Component

In your project's src folder create a
new folder called components.
Navigate to the components folder and create a new file called DetailsBar.js. Add the
following code to DetailsBar.js:

//DetailsBar.js
import React from 'react';
import styled from 'styled-components';
import * as Icon from 'react-feather';

const DetailsBarWrapper = styled.div`
  background-color: rgb(8, 8, 63);
  border-radius: 7px;
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  padding-bottom: 100px;
  @media (max-width: 768px) {
    padding-bottom: 80px;
    grid-row: 2;
  }
`;

const TextWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const TextOne = styled.p`
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
`;

const TextTwo = styled.p`
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
`;

const BigCircle = styled.div`
  height: 50px;
  margin-top: 30px;
  width: 50px;
  background-color: rgb(100, 21, 173);
  border-radius: 100%;
  z-index: 22;
  margin-left: 10px;
`;

const SmallCircle = styled.div`
  position: absolute;
  margin-left: 10px;
  background-color: rgb(252, 113, 137);
  border-radius: 100%;
  height: 30px;
  width: 30px;
`;

const ContactsWrapper = styled.a`
  display: flex;
  width: 200px;
  height: 10px;
  margin-top: 50px;
  cursor: pointer;
  text-decoration: none;
`;

const ContactText = styled.div`
  color: #fff;
  font-size: 15px;
  margin-left: 10px;
`;

const SocialsWrapper = styled.div`
  display: flex;
  justify-content: center;
  height: 10px;
  bottom: 30px;
  position: absolute;
  cursor: pointer;
`;

const SocialIconWrapper = styled.a`
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: rgb(252, 113, 137);
  }
`;

const DetailsBar = () => {
  return (
    <DetailsBarWrapper>
      <TextWrapper>
        <TextOne>Contact Information</TextOne>
        <TextTwo>
          Fill up the form and our team 
          will get back to you within 
          24 hours
        </TextTwo>
      </TextWrapper>
      <div>
        <ContactsWrapper href="tel:+233543201893">
          <Icon.Phone 
            size={15} 
            color="rgb(252, 113, 137)" 
          />
          <ContactText>
            +233543201893
          </ContactText>
        </ContactsWrapper>

        <ContactsWrapper 
          href="mailto:aljay3334@gmail.com"
        >
          <Icon.Mail 
            size={15} 
            color="rgb(252, 113, 137)" 
          />
          <ContactText>
            aljay3334@gmail.com
          </ContactText>
        </ContactsWrapper>
      </div>

      <div>
        <BigCircle></BigCircle>
        <SmallCircle></SmallCircle>
      </div>

      <SocialsWrapper>
        <SocialIconWrapper 
          href="https://www.facebook.com"
        >
          <Icon.Facebook color="#fff" size={20} />
        </SocialIconWrapper>
        <SocialIconWrapper 
          href="https://www.instagram.com"
        >
          <Icon.Instagram color="#fff" size={20} />
        </SocialIconWrapper>
        <SocialIconWrapper 
          href="https://www.linkedin.com"
        >
          <Icon.Linkedin color="#fff" size={20} />
        </SocialIconWrapper>
      </SocialsWrapper>
    </DetailsBarWrapper>
  );
};

export default DetailsBar;

In FormPage.js import the DetailsBar
component into it as shown in the
code below:

//FormPage.js
import React from 'react';
import styled from 'styled-components';
import DetailsBar from '../components/DetailsBar';

const FormPage = () => {
  return (
    <PageWrapper>
      <PageHeadingWrapper>
        <TextOne>Contact US</TextOne>
        <TextTwo>
          Any Question or remarks? 
          Just write us a message
        </TextTwo>
      </PageHeadingWrapper>
      <FormContainer>
        <DetailsBar />
      </FormContainer>
    </PageWrapper>
  );
};

export default FormPage;

Creating The Input Side

Let us create the input side and add the input fields.
We will style the input fields with styled components and make them responsive using CSS media queries.

In the components folder create a
new file called InputSide.js and
add the following code:

//InputSide.js
import React from 'react';
import styled from 'styled-components';

const InputSideWrapper = styled.form`
  height: auto;
  padding-bottom: 100px;
  position: relative;
  padding: 10px 10px 100px 10px;
`;

const InputWrapper = styled.div`
  border: 2px solid transparent;
  width: 90%;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
`;

const Input = styled.input`
  color: #333;
  width: 100%;
  font-size: 15px;
  padding: 8px;
  border-bottom: 1px solid rgb(100, 21, 173);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  outline: 0px transparent !important;
`;

const MessageInput = styled.textarea`
  width: 100%;
  color: #333;
  font-size: 15px;
  padding: 10px;
  border-bottom: 1px solid rgb(100, 21, 173);
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  outline: 0px transparent !important;
`;

const SubMitButton = styled.input`
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: rgb(8, 8, 63);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 25px 12px 24px;
  cursor: pointer;
`;

const InputSide = () => {
  return (
    <InputSideWrapper>
      <InputWrapper>
        <p>Name</p>
        <Input 
          type="text" 
          placeholder="Allen Jones" 
        />
      </InputWrapper>
      <InputWrapper>
        <p>Email</p>
        <Input 
          type="email" 
          placeholder="aljay126@gmail.com" 
        />
      </InputWrapper>
      <InputWrapper>
        <p>Phone</p>
        <Input 
          type="number" 
          placeholder="+233546227893" 
        />
      </InputWrapper>
      <InputWrapper>
        <p>Message</p>
        <MessageInput 
          placeholder="Write your message" 
        />
      </InputWrapper>
      <SubMitButton 
        type="submit" 
        value="Send Message" 
      />
    </InputSideWrapper>
  );
};

export default InputSide;

In FormPage.js import the InputSide
component into it:

//FormPage.js
import React from 'react';
import styled from 'styled-components';
import DetailsBar from '../components/DetailsBar';
import InputSide from '../components/InputSide';

const FormPage = () => {
  return (
    <PageWrapper>
      <PageHeadingWrapper>
        <TextOne>Contact US</TextOne>
        <TextTwo>
          Any Question or remarks? 
          Just write us a message
        </TextTwo>
      </PageHeadingWrapper>
      <FormContainer>
        <DetailsBar />
        <InputSide />
      </FormContainer>
    </PageWrapper>
  );
};

export default FormPage;

Declaring The State Variables and

Input Handler Functions

Let us declare the state variables and add the functions for handling
the form inputs:

//InputSide.js
const InputSide = () => {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [message, setMessage] = 
    React.useState('');
  const [buttonLoading, setButtonLoading] = 
    React.useState(false);

  const nameHandler = (e) => {
    setName(e.target.value);
  };

  const emailHandler = (e) => {
    setEmail(e.target.value);
  };

  const phoneHandler = (e) => {
    setPhone(e.target.value);
  };

  const messageHandler = (e) => {
    setMessage(e.target.value);
  };
};

export default InputSide;

In this code, we have used the useState hook to create state variables for the form inputs and the loading state of the submit button.
We have also added the input handler functions.

Creating a Formgrid Account

Go to formgrid.dev
and sign up using Google or Email.
No credit card required.

Once you are logged in click New Form from your dashboard and give your form a name. Click Create Form.

You will be taken to your form's
Overview tab. Here you will find your
unique Endpoint URL. Copy it.
It looks like this:

https://formgrid.dev/api/f/your-form-id

This is the URL you will use to send your form submissions.
Every time someone submits your form, the data is sent to this endpoint, and Formgrid emails you the submission details instantly.

Unlike Formspree, you do not need to
configure anything else. Email notifications are enabled by default
using the email address you signed up with.

Handling Form Submission

Now let us add the function for handling form submission.
Replace the contents
of InputSide.js with the following:

//InputSide.js
import React from 'react';
import styled from 'styled-components';

const InputSide = () => {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [message, setMessage] = 
    React.useState('');
  const [buttonLoading, setButtonLoading] = 
    React.useState(false);

  const nameHandler = (e) => {
    setName(e.target.value);
  };

  const emailHandler = (e) => {
    setEmail(e.target.value);
  };

  const phoneHandler = (e) => {
    setPhone(e.target.value);
  };

  const messageHandler = (e) => {
    setMessage(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setButtonLoading(true);

    const response = await fetch(
      'https://formgrid.dev/api/f/your-form-id',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          name, 
          email, 
          phone, 
          message 
        }),
      }
    );

    if (response.ok) {
      setButtonLoading(false);
      alert('Message sent successfully!');
    } else {
      setButtonLoading(false);
      alert('Failed to send message');
    }
  };

  return (
    <InputSideWrapper onSubmit={handleSubmit}>
      <InputWrapper>
        <p>Name</p>
        <Input
          type="text"
          placeholder="Allen Jones"
          value={name}
          onChange={nameHandler}
          required
        />
      </InputWrapper>
      <InputWrapper>
        <p>Email</p>
        <Input
          type="email"
          placeholder="aljay126@gmail.com"
          value={email}
          onChange={emailHandler}
          required
        />
      </InputWrapper>
      <InputWrapper>
        <p>Phone</p>
        <Input
          type="number"
          placeholder="+233546227893"
          value={phone}
          onChange={phoneHandler}
        />
      </InputWrapper>
      <InputWrapper>
        <p>Message</p>
        <MessageInput
          placeholder="Write your message"
          value={message}
          onChange={messageHandler}
          required
        />
      </InputWrapper>
      <SubMitButton
        type="submit"
        value={buttonLoading 
          ? 'Sending...' 
          : 'Send Message'}
        disabled={buttonLoading}
      />
    </InputSideWrapper>
  );
};

export default InputSide;

Replace your-form-id with the actual endpoint slug from your Formgrid form overview tab.

In this code, we use the fetch API to make a POST request to your Formgrid endpoint with the form data as JSON.
Formgrid receives the submission, saves it to your dashboard, and sends you an email notification instantly.

If the response is successful, the
if block handles it. Otherwise
the else block handles errors.

What happens after submission

When someone submits your form you will receive an email notification that looks like this:

New Submission: Contact Form

Name: Allen Jones
Email: aljay126@gmail.com
Phone: +233546227893
Message: Hello, I would like to 
         get in touch.

Submitted: 10:30 AM, March 22, 2026

Clean. Organized. Ready to act on.

You can also view all submissions in your Formgrid dashboard at any time.
No submission is ever lost, even if the email notification fails to arrive.

Adding spam protection

Formgrid includes built-in spam protection controls in the Security Settings section for each form (available on all plans).

You can protect your form in two ways:

Add a honeypot field to your frontend form, and
Enable protections in Form Details → Settings → Security Settings.

If you are adding a honeypot field manually, use this field name:

<input 
  type="text" 
  name="honeypot" 
  style={{ display: 'none' }} 
  tabIndex={-1}
  autoComplete="off"
  aria-hidden="true"
/>

OR
You can click on the form to visit the:
Form Details page. This is where you can manage everything related to that specific form.

Step 3: Navigate to the form Settings Tab

At the top of the Form Details page, you will see a row of tabs. Click on the Settings tab to open the form's configuration options.

Step 4: Scroll Down to the Security Settings Section

Within the Settings tab, scroll down until you reach the Security Settings section. This is where all of Formgrid's spam and abuse protection tools are located.

You will see the following options:

Enable CAPTCHA:

Adds a Google reCAPTCHA "I'm not a robot" verification step to your form. When enabled, anyone submitting your form will need to complete the CAPTCHA challenge before their submission goes through. Real human users can do this easily. Automated bots typically cannot, which stops the majority of spam submissions before they ever reach your inbox.

Enable Honeypot:

Adds a hidden field to your form that is completely invisible to real users but visible to bots. When a bot fills in the form, it fills in every field it can detect, including the hidden honeypot field. Formgrid detects this and automatically discards the submission as spam. Legitimate users never see or interact with this field, so it has no impact on the experience of real visitors filling in your form.

Allowed Domains (CORS):

Allows you to specify which domains are permitted to submit data to your form. If your form is embedded on a specific website, you can enter that domain here. Any submission coming from a different domain will be rejected. This is particularly effective against bots that submit directly to your form endpoint without visiting your website at all.

Rate Limiting:

Sets a maximum number of submissions allowed per IP address per minute. This prevents any single source from flooding your form with repeated submissions in a short period. If you expect normal users to submit your form occasionally, a limit of 3 to 5 submissions per minute per IP is a reasonable starting point.

Bots that automatically fill every field will fill in this hidden field. Formgrid detects this and automatically rejects the submission.

Creating The Success Page

The success page is where users will
be directed after form submission.
In src/pages/ create a new file
called SuccessPage.js and add
the following code:

//SuccessPage.js
import React from 'react';
import * as Icon from 'react-feather';
import { Fade } from 'react-reveal';
import styled from 'styled-components';

const MessageWrapper = styled.div`
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const SuccessMessage = styled.h2`
  font-size: 25px;
  color: rgb(8, 8, 63);
  @media (max-width: 768px) {
    font-size: 18px;
  }
`;

const SuccessPage = () => {
  return (
    <React.Fragment>
      <Fade bottom duration={700} distance="60px">
        <MessageWrapper>
          <Icon.CheckCircle 
            color="rgb(8, 8, 63)" 
            style={{ width: 50, height: 50 }} 
          />
          <SuccessMessage>
            MESSAGE SENT SUCCESSFULLY
          </SuccessMessage>
        </MessageWrapper>
      </Fade>
    </React.Fragment>
  );
};

export default SuccessPage;

Redirecting Users to The Success Page

We will use react-router-dom to handle
navigation between the form page and
the success page.

Run the following command to install it:

npm install react-router-dom

Open App.js and replace its contents
with the following:

//App.js
import React from 'react';
import { 
  BrowserRouter as Router, 
  Routes, 
  Route 
} from 'react-router-dom';
import FormPage from './pages/FormPage';
import SuccessPage from './pages/SuccessPage';

const App = () => {
  return (
    <Router>
      <div>
        <Routes>
          <Route path="/" element={<FormPage />} />
          <Route 
            path="/success" 
            element={<SuccessPage />} 
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

Now update InputSide.js to redirect
the user to the success page after
a successful submission:

//InputSide.js
import React from 'react';
import { useNavigate } from 'react-router-dom';

const InputSide = () => {

  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setButtonLoading(true);

    const response = await fetch(
      'https://formgrid.dev/api/f/your-form-id',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          name, 
          email, 
          phone, 
          message 
        }),
      }
    );

    if (response.ok) {
      setButtonLoading(false);
      navigate('/success');
    } else {
      setButtonLoading(false);
      alert('Failed to send message');
    }
  };

};

export default InputSide;

Why Use Formgrid Instead of Formspree

Both Formgrid and Formspree handle form
submissions reliably. Here is how
they compare:

Feature	Formspree	Formgrid
Free submissions	50/month	50/month
Form builder	❌	✅
Self-hostable	❌	✅
Open source	❌	✅
Google Sheets native	$90/month	$16/month
Custom email templates	$90/month	$29/month
Submission dashboard	✅	✅
Spam protection	✅	✅

Formgrid gives you everything Formspree
offers on the free plan, plus a no-code
form builder, self-hosting via Docker,
and significantly cheaper paid plans.

Conclusion

In this tutorial, we learnt how to create
a contact form in React using the Formgrid
API and Styled Components. We also added
react-router-dom for navigation between
the form page and the success page.

With Formgrid, your form submissions are
handled reliably, saved to a dashboard,
and emailed to you instantly. No
server-side code. No backend setup.
Just a simple endpoint URL.

👉 Try Formgrid free at formgrid.dev

Tags: #react #webdev #javascript

tutorial #formgrid


markdown

---

Why WordPress Contact Form Emails Go to Spam (And How to Fix It)

Allen Jones — Sun, 29 Mar 2026 08:02:20 +0000

You set up Contact Form 7 on your WordPress site. Someone fills out
your contact form. You never received the email.

Or worse: you receive it two days later, buried in your spam folder.

You are not alone. This is one of the most searched WordPress problems in 2026, and it affects thousands of website owners who have no idea why their contact form emails keep disappearing.

This guide explains exactly why it happens and gives you two ways to fix it permanently.

Why WordPress Contact Form Emails

Go to Spam

WordPress forms do send emails. Contact
Form 7, WPForms, Gravity Forms, and Ninja
Forms all send email notifications when someone submits your form.

The problem is not the form plugin.
The problem is how WordPress sends emails.

By default WordPress uses a PHP function called mail() to send all emails including your form notifications. This function sends emails directly from your web server without any authentication
or encryption.

Email providers like Gmail, Outlook, and
Yahoo has strict spam filters that check whether the server sending an email is authorized to send it. When an email arrives from a random web server with no authentication, those filters mark it as
spam or reject it entirely.

Your form is working perfectly. Your hosting server is sending the email. But it never reaches your inbox because Gmail sees it as suspicious.

The Five Most Common Reasons Your

WordPress Form Emails Are Not Arriving

Reason 1: Your host blocks or throttles
PHP mail

Many shared hosting providers block or severely limit PHP mail to prevent their servers from being used for spam. Bluehost, SiteGround, and other popular hosts have increasingly aggressive restrictions on PHP mail.

If you recently changed hosting providers and your contact form emails suddenly stopped working, this is almost certainly
the reason.

Reason 2: Your domain has no SPF or
DKIM records

SPF and DKIM are email authentication records that tell email providers your server is authorized to send emails from your domain. Without them, your emails look suspicious to spam filters.

Most WordPress PHP mail setups send emails without proper SPF and DKIM authentication, which is why they land in spam.

Reason 3: Contact Form 7 default
settings use WordPress admin email

CF7 by default sends notification emails from your WordPress admin email address using your server's PHP mail.
If your server's IP address has been flagged for spam by any email provider, your notifications will be blocked or filtered.

Reason 4: Your notification email address is different from your domain

If your WordPress site is yoursite.com but your notification email is
yourname@gmail.com the email is
traveling from a server at yoursite.com to Gmail. Gmail is increasingly suspicious of emails that originate from web servers
rather than dedicated email infrastructure.

Reason 5: No submission backup exists

This is not a deliverability problem, but it makes everything worse. When WordPress's PHP mail fails, your submission is lost
permanently. There is no dashboard. No submission history. No way to recover what someone sent you. If the email fails, you never know it happened.

Fix 1: Use an SMTP Plugin

The fastest fix for most WordPress users is to replace PHP mail with a proper SMTP connection using a dedicated email service.

SMTP (Simple Mail Transfer Protocol) sends your emails through a proper authenticated email server instead of your web host's PHP mail function. Email providers trust SMTP emails from known
services significantly more than PHP mail.

Step 1: Install WP Mail SMTP

WP Mail SMTP is the most popular WordPress SMTP plugin with over 3 million active installs. Install it from WordPress
plugin directory.

Step 2: Choose an SMTP provider

WP Mail SMTP works with several free and
paid SMTP providers:

Gmail SMTP (free)
If you have a Google Workspace account, you can use Gmail's SMTP server. Free for basic usage. Best for small sites
with low form volume.

Brevo (formerly Sendinblue) (free tier)
300 emails per day free. Good deliverability.
Easy to set up.

Mailgun (free tier)
100 emails per day free. Excellent
deliverability. Requires domain verification.

Resend (free tier)
3,000 emails per month free. Modern API.
Excellent deliverability. Strong DKIM
and SPF setup.

Step 3: Configure WP Mail SMTP

Go to WP Mail SMTP settings in your WordPress dashboard. Enter your SMTP credentials from whichever provider
you chose. Send a test email to confirm
it is working.

Once configured, all WordPress emails, including your contact form notifications, will be sent through your SMTP provider
instead of PHP mail. Deliverability
improves immediately.

Fix 2: Use Formgrid as Your

Form Backend

If you want more than just reliable email delivery, a submission dashboard, Google Sheets sync, file uploads, and spam protection, consider replacing your WordPress form plugin with Formgrid.

Formgrid is a form backend and form builder that handles your submissions independently of WordPress. It uses Resend for email delivery, which means your notifications go through proper, authenticated email infrastructure with excellent deliverability.

Here is how to use Formgrid with your
WordPress site:

Option A: HTML Form in WordPress

Custom HTML Block

This is the most reliable approach. Instead of using a form plugin, you write a simple HTML form in a WordPress Custom HTML block and point it at your Formgrid endpoint.

Step 1: Sign up at
formgrid.dev
and create a new form.

Step 2: Copy your Formgrid endpoint URL
from the form overview tab. It looks like:

https://formgrid.dev/api/f/your-form-id

Step 3: In your WordPress page editor, add a Custom HTML block and paste
this code:

<form action="https://formgrid.dev/api/f/your-form-id" 
      method="POST">

  <div>
    <label for="name">Your Name</label>
    <input type="text" 
           id="name" 
           name="name" 
           required />
  </div>

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

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

  <!-- Honeypot spam protection -->
  <input type="text" 
         name="_honey" 
         style="display:none" />

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

</form>

Replace your-form-id with your actual
Formgrid endpoint slug.

Step 4: Publish your page and submit a test entry. Your notification email will arrive instantly through Resend with reliable, authenticated delivery.

Option B: Embed the Formgrid

Form Builder

If you do not want to write any HTML, you can build your form using Formgrid's drag-and-drop form builder and embed it in WordPress using an iframe.

Step 1: Build your form in the Formgrid form builder. Drag and drop your fields, customize labels, and click Save.

Step 2: Copy your shareable form link from the Overview tab.

Step 3: In your WordPress page editor
add a Custom HTML block and paste
this embed code:

<iframe 
  src="https://share.formgrid.dev/f/your-form-id"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;">
</iframe>

Your form is now embedded in your
WordPress page and all submissions go
directly to Formgrid.

Why Formgrid Solves More Than

Just Deliverability

The SMTP plugin approach fixes your email deliverability. Formgrid fixes deliverability and gives you several things WordPress form plugins cannot:

A submission dashboard
Every submission is saved in your Formgrid dashboard regardless of
whether the email was delivered. You never lose a submission again.

CSV export
Download all your submissions as a
spreadsheet anytime. No plugin needed.
No data loss.

File uploads
Accept resumes, images, and documents
up to 1GB per file on the Premium plan.

Google Sheets sync
On the Professional plan, every submission appears automatically in a Google Sheet in real time. No Zapier. No plugins.
No Google API setup.

Spam protection
Built-in honeypot and rate limiting catch bots before they reach your inbox. Advanced CAPTCHA on the Premium plan.

Custom email templates
On the Business plan, you can design exactly how your notification emails look with full HTML control.

Which Fix Should You Use?

You want the simplest fix with minimal setup, and you are happy with your current form plugin:
→ Use WP Mail SMTP with a free 
  SMTP provider

You want reliable emails AND a submission dashboard AND Google 
Sheets sync AND spam protection:
→ Use Formgrid as your form backend

You are a non-technical user who 
does not want to touch any code:
→ Use Formgrid's form builder 
  embedded via iframe

The Honest Limitation of Formgrid

for WordPress

Formgrid is not a WordPress plugin. You cannot install it from the WordPress plugin directory. It requires either adding a custom HTML form to your page or embedding the form builder via iframe.

For users who are comfortable with WordPress Custom HTML blocks, this is a one-time 5-minute setup. For users who want a fully integrated WordPress plugin experience, WP Mail SMTP is the simpler choice.

Both fixes solve the core problem. Choose the one that matches your
technical comfort level.

Frequently Asked Questions

Will this fix Contact Form 7 emails
going to spam?

If you use WP Mail SMTP with a proper SMTP provider, yes. CF7 will send through your SMTP connection instead of PHP mail
and deliverability improves immediately.

If you switch to Formgrid, your CF7 plugin becomes optional. You can use a simple HTML form instead and bypass CF7 entirely.

Do I need to pay for an SMTP provider?

Most SMTP providers have generous free tiers. Brevo gives you 300 emails per day free. Mailgun gives you 100 emails per day free. For most small business contact forms, these free tiers are
more than enough.

Does Formgrid work with any
WordPress theme?

Yes. Formgrid uses a standard HTML form or an iframe embed. Both work with any WordPress theme, including Astra, Divi,
Elementor, GeneratePress, and Kadence.

What happens if I miss a submission?

With a standard WordPress form plugin and PHP mail, a failed email means a lost submission. With Formgrid, every submission is saved to your dashboard regardless of email delivery. You can
always log in and see every submission
ever received.

Final Thoughts

WordPress contact form emails going to spam is a PHP mail problem not a form plugin problem. The fix is straightforward:

Replace PHP mail with a proper SMTP connection using WP Mail SMTP and a free SMTP provider. Your emails will reach inboxes reliably from today.

Or switch to Formgrid for a form backend that handles reliable email delivery, submission storage, Google Sheets sync, and spam protection all in one place.

Either way, your contact form emails will stop disappearing.

👉 Try Formgrid free at formgrid.dev

Full disclosure: I built Formgrid. Written as honestly as I could.
Let me know in the comments if
anything looks off.

Tags: #wordpress #webdev #tutorial

contactform #email


markdown

---

How to Send Webflow Form Submissions Directly to Google Sheets (No Zapier Required)

Allen Jones — Fri, 27 Mar 2026 16:43:09 +0000

Webflow is an excellent tool for building professional websites without writing code. Its built-in form builder lets you add contact forms, enquiry forms, and registration forms to any page in minutes. But when it comes to where those submissions actually go, Webflow's native options are limited.

By default, Webflow sends form submissions to your email inbox. That works well enough when you are receiving a handful of messages a month. But the moment you need your team to collaborate on responses, filter submissions by type, track patterns over time, or simply keep everything organised in one place, an inbox falls short.

The solution most people reach for is Zapier. Set up a Zap, connect Webflow to Google Sheets, and submissions flow across automatically. It works, but it adds a monthly subscription on top of what you are already paying, introduces a delay between submission and spreadsheet row, and creates a dependency on a third service that can break independently of both Webflow and Google Sheets.

This guide shows you a more direct approach. Using Formgrid, you can point your Webflow form at a custom endpoint and have every submission land in Google Sheets automatically, in real time, with no Zapier account required.

What You Will Need

Before starting, make sure you have the following in place:

A Formgrid Professional plan account:

Google Sheets integration is available on the Professional plan at $16/month. If you do not have an account yet, you can sign up for free at formgrid.dev and upgrade to Professional when prompted during the integration setup.

A Webflow site with a form:

You will need an existing Webflow form that you want to connect to Google Sheets. Any Webflow form works, whether it is a simple contact form with three fields or a detailed multi-field enquiry form.

A Google account:

You will need access to Google Sheets to create the spreadsheet that will receive your submissions. Any standard Google account works.

How This Works

The setup replaces Webflow's default form submission handling with Formgrid's backend. Instead of Webflow catching the submission and forwarding it to your email, the form sends its data directly to a Formgrid endpoint URL. Formgrid receives the submission, saves it to your dashboard, sends you an email notification, and writes a new row to your connected Google Sheet instantly.

The key change on the Webflow side is a single setting: the form action URL. You point it at your Formgrid endpoint instead of leaving it on Webflow's default handler. That is the only configuration change you make in Webflow. Everything else happens inside Formgrid.

Part One: Set Up Your Formgrid Form and Get Your Endpoint URL

Step 1: Log In to Formgrid and Create a New Form

Log in to your Formgrid account at formgrid.dev. From your dashboard, create a new form and give it a name that corresponds to the Webflow form you are connecting. For example, "Contact Form" or "Service Enquiry Form."

You are not building a form inside Formgrid here. You are registering a form entry in your dashboard so that Formgrid knows where to route the incoming submissions from Webflow. Your actual form fields remain exactly as they are in Webflow.

Step 2: Copy Your Formgrid Endpoint URL

Once your form is created, open it in your Formgrid dashboard. You will see your unique endpoint URL displayed prominently. It will follow this format:

https://formgrid.dev/api/f/your-form-id

Copy this URL. You will need it in the next section when you update your Webflow form settings.

This URL is permanent. It does not change when you update your form settings, connect integrations, or make any other changes inside Formgrid. You set it once in Webflow and never need to touch it again.

Part Two: Update Your Webflow Form to Use the Formgrid Endpoint

Step 3: Open Your Webflow Form Settings

Log in to your Webflow account and open the project containing the form you want to connect. In the Webflow Designer, click on your form element to select it. Then open the form settings panel.

Step 4: Set the Form Action URL

In the form settings panel, locate the Action field. By default, this is either empty or set to Webflow's internal submission handler.

Replace the existing value with your Formgrid endpoint URL:

https://formgrid.dev/api/f/your-form-id

Set the Method to POST if it is not already.

Step 5: Check Your Field Names

Formgrid uses the name attribute of each form field to create the column headers in your Google Sheet. Webflow assigns name attributes to every field automatically, but it is worth reviewing them before you connect your Sheet to make sure they are clear and descriptive.

In the Webflow Designer, click on each input field in your form and check the name value in the element settings panel. Field names like "Name," "Email," "Phone," and "Message" will produce clean, readable column headers in your spreadsheet. Webflow's default auto-generated field names are sometimes less intuitive, so update any that are unclear.

Step 6: Publish Your Webflow Site

Once you have updated the form action URL and reviewed your field names, publish your Webflow site to push the changes live. The Formgrid endpoint will not receive any submissions until your site is published.

Step 7: Submit a Test Entry

Before connecting Google Sheets, confirm that submissions are reaching Formgrid correctly. Visit your live Webflow site, fill in your form with test data, and submit it.

Open your Formgrid dashboard and check the submissions list for your form. The test entry should appear within a few seconds.

If the submission does not appear, go back to your Webflow form settings and confirm that the action URL is set correctly and that the method is POST. Also, confirm that you published the site after making the change, as unpublished changes in Webflow do not take effect on the live site.

Part Three: Connect Google Sheets

Step 8: Open the Integrations Tab in Formgrid

In your Formgrid dashboard, open the form you just connected and click on the Integrations tab at the top of the page.

You will see the Google Sheets integration section. Since you are on the Professional plan, the Connect interface is active and ready to use.

Step 9: Create a Blank Google Sheet

Click the Create blank Google Sheet button in the Formgrid integrations panel. This opens a new blank spreadsheet in Google Sheets in a separate browser tab.

Give your sheet a clear, identifiable name. Something like "Contact Form Submissions" or "Enquiries 2026" works well. If you manage multiple Webflow forms and plan to connect each one to its own sheet, a consistent naming convention will help you stay organised.

Do not add any column headers or set up any structure in the spreadsheet. Formgrid creates the column headers automatically from your Webflow field names on the very first submission. The sheet should be empty when you connect it.

Step 10: Share the Sheet With the Formgrid Service Account

In your Google Sheet, click the Share button in the top right corner. The share dialog will open.

You need to add the Formgrid service account email address as an editor. Go back to your Formgrid dashboard, where the service account email is displayed with a Copy button next to it. Copy it directly from there to avoid any chance of a typing error.

Paste the email into the share dialog and make sure you select Editor access, not Viewer. Formgrid needs Editor access to write new rows to your sheet. If you add it as a Viewer, the connection will fail with a permissions error.

Click Send or Done to confirm.

Step 11: Paste Your Sheet URL Into Formgrid

Go back to your Formgrid dashboard. Copy the full URL of your Google Sheet from the browser address bar of the tab where your sheet is open. The URL will look like this:

https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms/edit

Paste the full URL into the sheet URL field in your Formgrid dashboard. Make sure you are copying from the address bar and that the URL contains the full spreadsheet ID, which is the long alphanumeric string between /d/ and /edit.

Step 12: Choose Whether to Sync Existing Submissions

Before connecting, you will see the following option:

Sync existing submissions to this sheet?

If you already have submissions, Formgrid can add them all to your
Google Sheets now, so your entire history is in one place.

[ ] Yes, sync my existing submissions

If you have been collecting Webflow form submissions through Formgrid for a while and want your full history in the sheet from day one, check this box. Formgrid will write all past submissions to the sheet before it begins syncing new ones.

If you only want submissions going forward, leave it unchecked.

Step 13: Click Connect

Click the Connect Google Sheets button.

Formgrid will verify that it can access your sheet and that the service account has the correct permissions. If everything is in order, you will see a success confirmation:

Connected successfully

Your sheet is ready. Every new submission will appear as a new row automatically.

Part Four: Verify the Full Flow Is Working

Step 14: Submit Another Test Entry Through Your Webflow Form

Visit your live Webflow site and submit another test entry through the form. Use realistic-looking data so it is easy to identify in your spreadsheet.

Open your Google Sheet. Within a few seconds, you should see:

Row 1: Column headers created automatically from your Webflow field names.

Row 2: Your test submission data, with a timestamp in the final column showing exactly when the submission was received.

From this point forward, every submission made through your Webflow form will appear as a new row in your Google Sheet in real time. You do not need to log into Formgrid, export anything, or take any manual action. The data moves automatically the moment someone fills in your form.

What Happens on Every Submission

Here is the complete flow from the moment a visitor fills in your Webflow form to the moment a row appears in your spreadsheet:

Visitor fills in your Webflow form and clicks Submit
              ↓
The browser sends a POST request to your Formgrid endpoint
              ↓
Formgrid receives and saves the submission to your dashboard
              ↓
Email notification sent to you and any other configured recipients
              ↓
A new row added to your Google Sheet instantly
              ↓
Spam protection runs in the background to filter out bot submissions

Your submission is available in three places simultaneously: your Formgrid dashboard, your email inbox, and your Google Sheet. If any one of those ever has an issue, you still have the other two as a complete record.

Managing Your Google Sheets Connection

Once connected, the Integrations tab in your Formgrid dashboard gives you full control over your Google Sheets connection:

Pause the integration:

Use the Active toggle to pause syncing at any time. When paused, new submissions are still saved to your Formgrid dashboard, and email notifications still go out, but new rows are not written to your sheet. Toggle it back on to resume at any time.

Disconnect:

Removes the connection entirely. Your existing sheet data stays exactly as it is in Google Sheets. New submissions will not be synced until you reconnect.

Open Sheet:

Takes you directly to your connected Google Sheet with a single click, without having to search for it in your Google Drive.

Troubleshooting

Submissions not appearing in Formgrid after publishing Webflow:

Confirm that you published your Webflow site after changing the form action URL. Changes made in the Webflow Designer do not go live until you publish. Also, confirm that the action URL is your full Formgrid endpoint and that the method is set to POST.

"Could not access this sheet" error when connecting:

This means Formgrid does not have write access to your sheet. Open Google Sheets, click Share, and confirm that the Formgrid service account email is listed as an Editor. If it is listed as a Viewer, remove it and re-add it with Editor access, then try connecting again.

Column headers missing or showing unexpected values:

Column headers come from the name attribute of your Webflow form fields. If a column is missing, the corresponding field likely does not have a name attribute set. If a header looks incorrect, update the field name in your Webflow Designer, republish, and submit a new test entry. Note that existing headers in your sheet will not update automatically. You would need to clear the sheet and reconnect if you want the headers to reflect updated field names.

Submissions appearing in Formgrid but not in Google Sheets:

Open the Integrations tab in your Formgrid dashboard and check that the Google Sheets integration is showing as Active. If it shows as Paused, click the toggle to resume. If it shows as Active but submissions are still not appearing, try disconnecting and reconnecting the integration.

Webflow's default success message is still showing, but no submission in Formgrid:

This usually means the form is still being handled by Webflow's own submission system rather than being sent to your Formgrid endpoint. Double-check that the Action URL in your Webflow form settings contains your Formgrid endpoint and that you did not accidentally revert it during a subsequent Webflow Designer session.

What the Formgrid Professional Plan Includes

Google Sheets integration is available on the Professional plan at $16/month. The Professional plan at $16/month includes:

Google Sheets native integration (this guide)

Webhooks: connect to Zapier, Make, Slack, Notion, Airtable and 5,000+ more

10,000 submissions per month

Everything in the Premium plan

No contracts. Cancel at any time.

Start your Professional plan at formgrid.dev

Final Thoughts

Webflow makes it easy to build forms. Formgrid makes it easy to do something useful with what those forms collect.

Connecting your Webflow form to Google Sheets through Formgrid requires one change in Webflow, one shared spreadsheet, and a few clicks in your Formgrid dashboard. Once it is set up, every submission lands in your spreadsheet automatically and in real time, without a Zapier subscription, without a Google Apps Script, and without any ongoing maintenance on your part.

If your team is currently managing Webflow form submissions out of an email inbox, this setup will save you time from the first submission it processes.

Get started at formgrid.dev

Why Your Contact Form Is Getting Spam (And How to Stop It)

Allen Jones — Fri, 27 Mar 2026 13:03:58 +0000

You built a contact form, published it on your website, and started waiting for enquiries. Then one day, your inbox delivers something unexpected: a wall of foreign text, a string of suspicious links, and a name that does not match any real person you have ever heard of.

This is contact form spam, and if you have a public-facing form on the internet, it is only a matter of time before it finds you.

In this post, we will explain exactly what contact form spam is, how bots find your form in the first place, what the real-world consequences of ignoring it are, and most importantly, how to stop it completely using Formgrid's built-in security tools.

What Is Contact Form Spam?

Contact form spam is the practice of using automated software, commonly referred to as bots, to submit unsolicited and irrelevant content through web-based contact forms. Unlike email spam, which arrives directly in your inbox from an external mail server, contact form spam is generated by a bot that visits your website, locates your form, fills it out programmatically, and submits it just like a real user would.

The content of these submissions varies widely. Some are promotional, some are gibberish, and some are loaded with links pointing to external websites. What they all have in common is that they are not genuine enquiries from real people. There is no human on the other end waiting for your reply.

Here is a real example of a contact form spam submission received by a contact form:

Name: DannyNef

Email: guerfupe@mail.ru

Message: Автоматы газированной воды серии «АТЛАНТИКА» АП-60, АП-100 https://vendavtomat.ru/... Автоматы газированной воды «АТЛАНТИКА»: А-150 Эконом https://vendavtomat.ru/... Редуктор углекислотный https://vendavtomat.ru/...

At first glance, this might look confusing or even alarming. But once you understand what is happening, it becomes much easier to deal with.

Let us break it down:

The name "DannyNef" is not a real person. It is a randomly generated or recycled name used by the bot to fill in the required name field. It bears no relation to the actual operator behind the spam campaign.

The email "guerfupe@mail.ru" is a throwaway address. The .ru domain indicates it is a Russian email service, and the random string of characters before the @ symbol is a strong indicator that this address was generated automatically. No real business or individual would use an address like this for professional correspondence.

The message itself is a block of Russian promotional text interspersed with URLs pointing to a vending machine supplier website. The text talks about carbonated water machines, product dimensions, and the history of the company. None of it is directed at you or your business. It was not written for you. It was assembled by a bot and blasted across thousands of contact forms automatically.

The phone number "88254351266" follows a Russian phone number format and is almost certainly fake or belongs to an unrelated party.

This type of submission is entirely harmless in terms of your website's security. The bot has not hacked you, stolen your data, or compromised your system in any way. But it is a sign that your form has no protection in place, and that will have consequences over time.

How Do Bots Find Your Form in the First Place?

This is one of the most common questions people ask when they receive their first spam submission. You may not have shared your form widely. Your website may be relatively new. So how did a bot find it?

The answer is that bots do not need to be directed to your website specifically. They operate at scale across the entire internet, and they use several methods to discover unprotected forms automatically.

Search engine indexing:

Search engines like Google and Bing constantly crawl the web, following links from page to page and indexing content. When your website appears in search results, even for very obscure or low-traffic queries, it becomes discoverable. Bots can use the same public search infrastructure to find pages that contain contact forms, often by searching for common form-related HTML elements or keywords.

Web crawling:

Many spam bots run their own crawlers that systematically visit websites and scan the page source code for form elements. They do not need to read your content or understand what your business does. They are simply looking for form fields and a submit button. Once found, the form is added to a queue and submitted automatically.

Link harvesting:

If your website is linked to from another website, a directory, a social media profile, or any other publicly accessible page, a bot that crawls those sources can follow the link to your site and discover your form.

Data brokers and leaked lists:

Some spammers purchase or obtain lists of URLs known to contain contact forms. These lists are compiled over time and shared or sold within spam networks. Once your URL ends up on one of these lists, it can be repeatedly submitted to by multiple different bots.

Form endpoint scanning:

More sophisticated bots do not even visit your website visually. They scan for exposed form submission endpoints directly and submit data to them programmatically, bypassing your frontend entirely. This is why domain restrictions, which we will cover later, are an important layer of protection.

The key takeaway is that no website is too small, too new, or too obscure to be targeted. Bots are not selective. They are automated, indiscriminate, and operating at a scale that means your form will eventually be discovered, regardless of how little traffic your website receives.

What Happens If You Ignore Contact Form Spam?

Receiving one or two spam submissions a month might feel like a minor annoyance, and in isolation, it is. But ignoring contact form spam entirely and taking no steps to protect your forms can lead to a range of problems that compound over time.

Inbox clutter and missed enquiries:

The most immediate consequence is practical. As spam volume increases, your inbox becomes harder to manage. Real enquiries from genuine customers or clients get buried among spam submissions. In a busy period, it is entirely possible to overlook a legitimate message because it was sandwiched between bot submissions. For a small business, a single missed enquiry could represent a lost client or a missed opportunity.

Wasted time:

Even if you never miss a real message, reviewing and deleting spam submissions takes time. If you receive dozens per week, that time adds up. It is time that could be spent on actual work.

Skewed analytics and data:

If you use your form submissions to inform decisions, for example, tracking how many enquiries you receive per week or what topics people are asking about, spam submissions will distort that data. Your numbers will be inflated with junk, making it harder to draw accurate conclusions.

Reputational risk from scraped email addresses:

When a bot submits your form, it often also scrapes any publicly visible email addresses on the same page. If your contact email is visible on your website, it may be harvested and added to spam lists, leading to an increase in email spam in your inbox as well.

Server load and rate abuse:

High-volume bot attacks can submit your form hundreds or thousands of times in a short period. Depending on your hosting setup, this can put unnecessary load on your server, slow down your website, or, in extreme cases, trigger resource limits that affect your site's availability.

Data pollution in your CRM or connected tools:

If your Formgrid forms are connected to a CRM, email marketing tool, or internal database via integrations or webhooks, spam submissions may be passed through to those systems as well. This can pollute your contact lists with fake entries, trigger automated email sequences to non-existent addresses, and harm your email sender reputation over time.

None of these outcomes is inevitable if you act early. The good news is that Formgrid gives you everything you need to protect your forms before any of these problems take hold.

How to Protect Your Formgrid Forms: A Step-by-Step Guide

Formgrid.dev includes a dedicated Security Settings section for every form, available on all plans, including the free plan. Enabling protection takes less than two minutes and requires no technical knowledge.

Here is exactly how to do it.

Step 1: Log In to Your Formgrid Account

Navigate to Formgrid.dev and log in with your credentials. You will land on your dashboard, where all your forms are listed.

Step 2: Open the Form You Want to Protect

Click on the form you want to secure. This will take you to the Form Details page, where you can manage everything related to that specific form.

Step 3: Navigate to the Settings Tab

At the top of the Form Details page, you will see a row of tabs. Click on the Settings tab to open the form's configuration options.

Step 4: Scroll Down to the Security Settings Section

Within the Settings tab, scroll down until you reach the Security Settings section. This is where all of Formgrid's spam and abuse protection tools are located.

You will see the following options:

Enable CAPTCHA:

Enable Honeypot:

Allowed Domains (CORS):

Rate Limiting:

Step 5: Enable Your Preferred Protections and Save

Toggle on the settings you want to activate. For most public contact forms, enabling both CAPTCHA and Honeypot together provides strong protection against the vast majority of spam bots.

Once you have made your selections, click Save to apply the changes.

Your form is now protected.

Which Security Settings Should You Use?

You do not have to choose just one option. The settings are designed to work together, and combining them gives you layered protection that is significantly harder for bots to bypass.

Here is a practical guide based on your situation:

For a standard public contact form:

Enable both CAPTCHA and Honeypot. This combination stops bots at two different points in the submission process and covers both sophisticated and unsophisticated bot behaviour.

For a high-traffic form receiving frequent spam:

Enable CAPTCHA, Honeypot, and Rate Limiting together. Set your rate limit conservatively. If a single user should never need to submit your form more than once or twice per minute, set the limit accordingly.

For a form embedded on a single known website:

Add your domain to the Allowed Domains field in addition to enabling CAPTCHA and Honeypot. This prevents bots from submitting directly to your form endpoint, bypassing your website's frontend entirely.

For a form used internally or by a known audience:

If your form is not intended for the general public, consider using Allowed Domains to whitelist only the specific domains that should have access. This adds a strong access control layer on top of the spam protection tools.

A Summary of Security Best Practices

Formgrid's Security Settings section reflects industry-standard guidance for protecting web forms. Here is a summary of the recommended approach:

Enable CAPTCHA for all public-facing forms:

Any form that can be accessed and submitted by anyone on the internet should have CAPTCHA enabled. This is the single most impactful step you can take to reduce spam volume immediately.

Set rate limits appropriate to your expected traffic:

Think about how often a real user would realistically need to submit your form. Set your rate limit to reflect that. A rate limit that is too high offers little protection; one that is too low may frustrate legitimate users.

Configure CORS to restrict access to your domains:

If you know exactly where your form will be used, lock it down to those domains. This eliminates an entire category of bot attacks that never even visit your website.

Use the Honeypot as a passive, frictionless layer:

Unlike CAPTCHA, the Honeypot requires nothing from your users. It works silently in the background and catches bots that might find ways around other protections. There is no reason not to have it enabled at all times.

Final Thoughts

Contact form spam is a universal experience for anyone running a public-facing website. It is automated, indiscriminate, and growing in volume as bots become more sophisticated. But it is also entirely preventable with the right tools in place.

Formgrid gives every user, including those on the free plan, access to a full suite of security settings designed specifically to address this problem. Enabling CAPTCHA and the Honeypot takes under two minutes and will stop the overwhelming majority of spam submissions before they ever reach your inbox.

Do not wait until your inbox is overwhelmed to take action. Open your form settings today, enable your protections, and get back to focusing on the messages that actually matter.

If you have any questions about configuring security settings on your Formgrid forms, the support team is always available to help.

How to Connect Your HTML Form to Google Sheets Without a Backend

Allen Jones — Fri, 27 Mar 2026 02:59:08 +0000

Most tutorials for connecting an HTML form to Google Sheets send you down a complicated path.

Set up a Google Apps Script. Deploy it as a web app. Handle CORS errors. Debug broken endpoints. Maintain a script you didn't write and don't fully understand. Then do it all again when something breaks after six months.

For a developer who just wants form submissions in a spreadsheet, that process is a time sink with too many moving parts. And if you are not a developer at all, it is basically a wall.

There is a simpler way.

This guide shows you how to connect any HTML form to Google Sheets in under 3 minutes using Formgrid. No backend. No Google Apps Script. No CORS errors. No Zapier subscription. Just paste one endpoint URL into your form action and share a Google Sheet with one email address. That is the entire setup.

Who This Is For

This guide is for developers and builders who already have an HTML form and want submissions going straight to Google Sheets without writing any server-side code:

Static site developers running sites on GitHub Pages, Netlify, Vercel, Cloudflare Pages, or any static host who need a form backend without spinning up a server. Static sites cannot process forms on their own. You need somewhere to send the data. Formgrid is that somewhere.

Frontend developers who built a contact form, inquiry form, job application form, or event registration form and want every submission organized in a spreadsheet automatically. You already wrote the HTML. You should not need to write a backend just to collect it.

Indie hackers and solopreneurs who want a lightweight form setup without paying for Zapier on top of everything else. If you are running lean, adding a $20/month Zapier subscription just to move form data into a spreadsheet is a tax you should not have to pay.

No-code builders who use HTML forms embedded in Webflow, Framer, Carrd, or similar tools and want data flowing into Google Sheets in real time. The form is already there. You just need the backend to catch it.

HR teams and small business owners who collect applications, inquiries, or registrations through a form on their website and want every entry in a shared spreadsheet their team can access without logging into a separate tool.

If you have an HTML form and you want submissions in Google Sheets, this guide gets you there in one sitting.

The Problem With Google Apps Script

Before getting into the setup, it is worth understanding why the standard approach breaks down. Because you will find dozens of tutorials recommending Google Apps Script, and most of them skip over the parts that actually cause problems.

The standard flow looks like this: write a doPost function in Apps Script, deploy it as a web app, copy the deployment URL, paste it into your form action, and hope it works. Then every time you make a change to the script, you redeploy and get a new URL. Then you update your form. Then you remember you also have to handle CORS because your HTML file is on a different origin than the Apps Script deployment. Then you spend an hour reading Stack Overflow threads from 2019.

It works eventually. But it requires you to own a piece of infrastructure that is fragile, annoying to maintain, and breaks in ways that are hard to debug. If you are a developer building your own project, you might be fine with that. If you are setting this up for a client, a team, or a non-technical colleague who will need to manage it later, you are creating a maintenance burden for someone.

The deeper issue is that Google Apps Script was not really designed for this use case. It is a general-purpose automation tool that happens to be able to do this. Formgrid is specifically built for it.

What You Get With Formgrid

Once your HTML form is connected to Formgrid.dev and your Google Sheet is linked, here is what happens on every submission:

Every entry from your HTML form appears as a new row in your spreadsheet automatically. No manual export. No logging into a dashboard every day. No copy and paste.

Column headers are created automatically from your form field names on the very first submission. You do not need to set up the spreadsheet structure yourself. Name your input fields clearly, and Formgrid handles the rest.

The integration works in real time. The moment someone submits your form, the row appears in Google Sheets within seconds. Not the next time a Zap runs. Not on a schedule. Instantly.

You also get email notifications on every submission, so you are not dependent on checking Sheets. Spam protection is built in through honeypot fields and rate limiting, so fake submissions do not pollute your data. And every submission is saved to your Formgrid dashboard as a backup, so if anything ever goes wrong with your Sheet, you have a full record to fall back on.

Before You Start

You will need three things:

A Formgrid account, which is free to create at formgrid.dev. No credit card required to sign up.

A Formgrid Professional plan for Google Sheets integration, which is $16/month. If you are on the Free or Premium plan, you will see a prompt to upgrade when you open the Integrations tab.

An existing HTML form on your site, or a willingness to add a basic one. The only change you will make to your HTML is updating the action attribute on your form tag. Everything else stays exactly as it is.

Part One: Point Your HTML Form at Formgrid

Step 1: Create a Form in Your Formgrid Dashboard

Log in at formgrid.dev and create a new form. Give it a name that matches what you are collecting, for example, "Contact Form," "Job Applications," or "Event Registrations."

You do not need to use the Formgrid drag-and-drop form builder for this. You are building your own HTML form, and you are only creating a Formgrid form entry to generate your endpoint URL. Think of it as registering your form so Formgrid knows where to route the submissions.

Step 2: Copy Your Endpoint URL

Inside your form dashboard, copy your unique endpoint URL. It will look like this:

https://formgrid.dev/api/f/your-form-id

This URL is permanent. It never changes when you update your form or your settings. You set it once and forget it.

Step 3: Update Your HTML Form

Open your HTML file and change your form's action attribute to your Formgrid endpoint URL. Set the method to POST:

<form action="https://formgrid.dev/api/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send</button>
</form>

That is the only change to your HTML. One attribute on one tag. Your form now sends submissions to Formgrid instead of disappearing into nothing.

One important detail: Formgrid reads the name attribute of each input field and uses those values as the column headers in your Google Sheet. If your input has name="email", then the column in your Sheet will be labelled "email." If it has name="company_name" the column will be "company_name." Make sure every field in your form has a clear, descriptive name attribute before you connect your Sheet.

Step 4: Test That Submissions Are Reaching Formgrid

Before connecting Google Sheets, do a quick sanity check. Submit a test entry through your form and log into your Formgrid dashboard. You should see the submission appear in your form's submissions list.

If it is not showing up, open your browser developer tools, go to the Network tab, submit the form again, and look for the POST request to formgrid.dev. Check the response status. A 200 means it worked. Anything else means there is a configuration issue to sort out before moving on.

Part Two: Connect Google Sheets

Step 5: Open the Integrations Tab

In your Formgrid dashboard, click on your form and open the Integrations tab at the top of the page. You will see the Google Sheets integration section. If you are on the Professional plan, the connect interface is ready to use immediately.

Step 6: Create a Blank Google Sheet

Click the Create blank Google Sheet button. This opens a fresh blank spreadsheet in Google Sheets in a new tab.

Give your sheet a name that is easy to identify later. Something like "Contact Form Submissions 2026" or "Job Applications: Marketing Role" works well. If you manage multiple forms, a consistent naming convention will save you confusion later.

You do not need to create any columns, add any headers, or set up any structure at all. Formgrid creates the column headers automatically from your form field names on the very first submission. The spreadsheet should be empty when you connect it.

Step 7: Share the Sheet With Formgrid

In your Google Sheet click the Share button in the top right corner of the page.

In the share dialog, add this email address as an Editor:

formgrid@sheetrocket.iam.gserviceaccount.com

This is the Formgrid service account email. Rather than typing it out manually, go back to your Formgrid dashboard where the service account email is displayed with a Copy button next to it.

Copy it there and paste it directly into the Google Sheets share dialog. It avoids any chance of a typo.

One thing to get right here: make sure you select Editor access, not Viewer. Formgrid needs Editor access to write new rows to your sheet. If you accidentally add it as a Viewer, the connection will fail with a permissions error when it tries to write.

Click Send or Done in the share dialog to confirm.

Step 8: Paste Your Sheet URL Into Formgrid

Go back to your browser tab with Formgrid open. Copy the URL of your Google Sheet from the address bar of the tab where your Sheet is open.

The URL will look something like this:

https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms/edit

Paste the full URL into the sheet URL field in your Formgrid dashboard. Make sure you are copying from the address bar and not from somewhere else. The URL needs to contain the full spreadsheet ID, which is the long string of characters between /d/ and /edit.

Step 9: Choose Whether to Sync Existing Submissions

Before clicking Connect, you will see this option:

Sync existing submissions to this sheet?

If you already have submissions, Formgrid can add them all to your
Google Sheets now, so your entire history is in one place.

[ ] Yes, sync my existing submissions

If you have been collecting submissions for a while and want your full history to appear in the Sheet immediately, check this box. Formgrid will write all past submissions to the sheet in chronological order before it starts adding new ones. Your entire submission history will be there from the moment you connect.

If you only want new submissions going forward and you do not need historical data in the Sheet, leave it unchecked.

Step 10: Click Connect

Click the Connect Google Sheets button.

Formgrid will verify it can access your sheet, confirm the service account has the right permissions, and save the connection. If you selected the sync option, it will also write your existing submissions to the sheet now.

If everything is set up correctly you will see a success message:

Connected successfully

Your sheet is ready. Every new submission will appear as a new row automatically.

Part Three: Verify It Is Working

Step 11: Submit a Test Entry Through Your HTML Form

Go to your actual HTML form on your site and submit a test entry with dummy data. Use a realistic-looking name and email so it is easy to spot in the Sheet.

Open your Google Sheet. Within a few seconds, you should see:

Row 1 contains the column headers created automatically from your form field names. These come directly from the name attributes you set on your HTML inputs.

Row 2 contains your test submission data. The last column will contain a timestamp showing exactly when the submission was received.

Every subsequent submission from your HTML form will appear as a new row below this one in real time. You never need to log into Formgrid or export anything. The data goes straight to Google Sheets the moment someone fills out your form.

What Happens on Every Submission

Here is the full flow from form fill to spreadsheet row:

Visitor fills out your HTML form on your site
              ↓
The browser sends a POST request to your Formgrid endpoint
              ↓
Formgrid receives the submission and saves it to your dashboard
              ↓
Email notification sent to you (and any other recipients you configured)
              ↓
New row added to your Google Sheet instantly
              ↓
Spam protection runs in the background to filter out fake submissions

You get the submission in three places simultaneously: your email inbox, your Formgrid dashboard, and your Google Sheet. If any one of those ever has an issue, you still have the other two.

Real World Example: Event Registrations for a 200-Person Ride

Annie manages endurance horse riding events in San Diego. Her team collects registrations through a form on their website. Before Formgrid, every registration arrived as an email with all the details dumped in one long, unformatted block. Rider name, horse details, session selection, and payment status are all mixed with no labels and no structure. Her event manager had to manually scan through every single registration to pull out the information she needed. For a 200-person event, that was hours of unnecessary work before the event even started.

She now uses Formgrid with Google Sheets connected to her registration form. Every new registration appears instantly as a new row in a shared Google Sheet that her entire team can see in real time. Rider name in one column, horse details in the next, session selection after that, payment status at the end. Organized. Automatic. No manual work.

Her event manager can sort by session, filter by payment status, and share the sheet with volunteers on the day of the event. All from a Google Sheet that fills itself.

She is on the Professional plan at $16/month.

"The level of personal support was impressive."
Annie Libby, Event Manager, San Diego Endurance Riders

Managing Your Connection

Once connected, the Integrations tab in your Formgrid dashboard shows your current connection status and gives you a few controls:

Pause the integration using the Active toggle. When paused, new submissions are still saved to your Formgrid dashboard, and you still receive email notifications, but they are not sent to Google Sheets. Toggle it back on to resume syncing at any time.

Disconnect removes the connection entirely. Your existing sheet data stays in Google Sheets exactly as it is. New submissions will no longer be synced until you reconnect.

Open Sheet takes you directly to your connected Google Sheet with one click, so you do not have to go hunting for it in your Drive.

How This Compares to Google Apps Script

	Google Apps Script	Formgrid Native
Setup time	30 to 60 minutes	Under 3 minutes
Maintenance	You own the script	Zero maintenance
CORS handling	Manual, error-prone	Built in
Endpoint stability	New URL on every redeploy	Never changes
Spam protection	None built in	Honeypot + rate limiting
Email notifications	Requires extra setup	Included
Historical data sync	Manual	One checkbox
Support	Stack Overflow	Direct access to the founder

How This Compares to Using Zapier

A common alternative is to use a form backend to collect submissions and then use a Zapier Zap to push them into Google Sheets. It works, but you are paying for two services instead of one and adding a delay between submission and Sheet row because Zapier runs on a schedule rather than in real time.

	Zapier Route	Formgrid Native
Extra monthly cost	$19.99/month for Zapier	Included in $29/month
Setup steps	6 to 8 steps across two tools	3 steps in one place
Real time sync	Depends on Zap frequency	Instant
Failure points	Two services that can break	One

Troubleshooting

Form submissions not appearing in Formgrid at all

Check that your form action URL is pointing to your Formgrid endpoint and that the method attribute on your form tag is set to POST, not GET. Open your browser developer tools, go to the Network tab, submit the form, and look for the POST request to formgrid.dev. A 200 response means the submission was received. Any other status code means something is misconfigured.

"Could not access this sheet" error on connect

This means Formgrid cannot write to your sheet. Go back to Google Sheets, click Share, and confirm that the Formgrid service account email is added as an Editor, not a Viewer. If you added it as a Viewer, remove it and re-add it with Editor access, then try connecting again.

Column headers not appearing or appearing incorrectly

Column headers come from the name attribute of your HTML input fields. If a column is missing, check that the corresponding input has a name attribute set. Fields without a name attribute are not included in the submission. If a header looks wrong, update the name value on that input and resubmit a test entry.

Submissions appearing in Formgrid but not in Google Sheets

Check that the Google Sheets integration is showing as Active in your Integrations tab. If it shows as Paused, click the toggle to resume. If it shows as Active but submissions are still not appearing, disconnect and reconnect the integration.

Invalid Google Sheets URL error

Make sure you copied the full URL from your browser address bar, not just the spreadsheet title or a partial URL. The URL must contain /spreadsheets/d/ followed by a long alphanumeric string. Always copy from the address bar of the tab where your Sheet is open.

What the Formgrid Professional Plan Includes

Google Sheets integration is available on the Professional plan at $16/month. The Professional plan at $16/month includes:

Google Sheets native integration (this guide)

Webhooks: connect to Zapier, Make, Slack, Notion, Airtable and 5,000+ more

10,000 submissions per month

Everything in the Premium plan

No contracts. Cancel anytime.

Start your Professional plan at formgrid.dev

Final Thoughts

Connecting an HTML form to Google Sheets does not require a backend, a Google Apps Script, a Zapier subscription, or an afternoon of debugging CORS errors.

Update one attribute in your form tag. Share a Google Sheet with one email address. Click connect.

Every submission lands in your spreadsheet automatically, in real time, from that moment forward.

That is what Formgrid delivers.

👉 Try Formgrid free at formgrid.dev

How to Send Form Submissions to Google Sheets Automatically (No Zapier Required)

Allen Jones — Thu, 26 Mar 2026 17:10:22 +0000

Most form tools make this harder than it needs to be.

Formspree charges $90/month for Google Sheets integration. Other tools send you to the Google Cloud Console to set up OAuth
credentials, create a project, enable APIs,
and configure consent screens.

For a non-technical user who just wants their form submissions in a spreadsheet, that process is a nightmare.

Formgrid does it differently.

No Zapier. No Google Cloud Console.
No OAuth setup. Just share a Google Sheet with one email address and paste the URL. Every new submission appears as a new row
automatically.

This guide shows you exactly how to set
it up in under 3 minutes.

Who This Is For

This guide is for anyone who collects
form submissions and wants them organized
in a Google Sheet automatically:

Event organizers collecting registrations
for workshops, rides, conferences, or community events who need submissions in a spreadsheet for their team to review.

Small business owners collecting client
inquiries, booking requests, or service
applications that manage everything in Google Sheets.

HR teams and hiring managers are collecting
job applications and want every submission in a shared spreadsheet for the team to review together.

Course creators and coaches collecting student inquiries or enrollment requests who track leads in Google Sheets.

Nonprofits collecting volunteer applications, membership forms, or donation inquiries who need a simple, organized record of every submission.

If you collect forms and live in Google
Sheets, this integration was built for you.

What You Get

When Google Sheets is connected to your
Formgrid form:

Every new submission appears as a new row in your spreadsheet automatically.
No manual export. No copy and paste.
No checking a dashboard every day.

Column headers are created automatically from your form field names on the first submission. You do not need to set up
the spreadsheet yourself.

Existing submissions can be synced to your sheet on connection, so your entire submission history appears immediately.

The integration works in real time. The moment someone submits your form the row appears in Google Sheets.

Before You Start

Google Sheets integration is available
on the Formgrid Business plan at
$29/month.

If you are on the Free or Premium plan you will see a prompt to upgrade when you open the Integrations tab.

Step by Step: Connect Google Sheets

to Your Form

Step 1: Open Your Form and Go to

the Integrations Tab

Click on the form you want to connect
to Google Sheets.

Click the Integrations tab at the
top of your form page.

You will see the Google Sheets integration section. If you are on the Business plan the connect interface is ready to use.

Step 2: Create a Blank Google Sheet

Click the Create blank Google Sheet
button. This opens Google Sheets in a
new tab with a fresh blank spreadsheet.

Give your sheet a name that makes it easy to identify. Something like
"Formgrid: Contact Form Submissions"
or "Event Registrations 2026."

You do not need to create any columns or set up any structure. Formgrid will create the column headers automatically
from your form fields on the first
submission.

Step 3: Share the Sheet with Formgrid

In your Google Sheet click the Share
button in the top right corner.

In the Share dialog add this email
address as an Editor:

formgrid@sheetrocket.iam.gserviceaccount.com

Back in your Formgrid dashboard the
service account email is shown with a
Copy button so you can copy it
with one click and paste it directly
into Google Sheets.

Make sure you select Editor, not Viewer. Formgrid needs an Editor
access to write new rows to your sheet.

Click Send or Done in the
Google Sheets share dialog.

Step 4: Paste Your Sheet URL

into Formgrid

Go back to your Formgrid dashboard.
Copy the URL of your Google Sheet from your browser address bar.

It will look something like this:

https://docs.google.com/spreadsheets/d/
1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgVE2upms/edit

Paste the full URL into the sheet
URL field in Formgrid.

Step 5: Choose Whether to Sync

Existing Submissions

Before clicking Connect you will see
this option:

Sync existing submissions to this sheet?

If you already have submissions, Formgrid can add them all to your 
Google Sheet now so your entire 
history is in one place.

[ ] Yes, sync my existing submissions

Check this box if you want your
existing submission history to appear in the sheet immediately after connecting.
Formgrid will write all past submissions to the sheet in chronological order
before adding new ones.

Leave it unchecked if you only want
new submissions going forward.

Step 6: Click Connect

Click the Connect Google Sheets
button.

Formgrid will:

Verify it can access your sheet
Confirm the service account has Editor access
Save the connection
Sync existing submissions if you selected that option

If everything is set up correctly
you will see this success message:

Connected successfully

Your sheet is ready. Every new 
submission will appear as a new row 
automatically.

Step 7: Submit a Test Entry

Go to your form and submit a test
entry with dummy data.

Open your Google Sheet. Within seconds
you will see:

Row 1 contains the column headers
created automatically from your form
field names.

Row 2 contains the test submission
data with a timestamp in the last column.

Every subsequent submission will
appear as a new row below this one
automatically. You never need to
log in to Formgrid to get your data.
It goes straight to Google Sheets.

What Happens For Every New Submission

When someone fills out your form:

Visitor fills out your form
          ↓
Formgrid receives the submission
          ↓
Submission saved to Formgrid dashboard
          ↓
Email notification sent to you
          ↓
New row added to your Google Sheet
          ↓
All of this happens in seconds

You get the submission in three places
simultaneously: your email inbox, your
Formgrid dashboard, and your Google Sheet.

Managing Your Connection

Once connected the Integrations tab
shows your connection status:

Pause the integration using the
Active toggle. When paused new
submissions are saved to Formgrid
but not sent to Google Sheets.
Toggle it back on to resume.

Disconnect removes the connection
entirely. Your existing sheet data
stays in Google Sheets but new
submissions will no longer be synced.

Open Sheet takes you directly to
your Google Sheet with one click.

Troubleshooting

"Could not access this sheet"

This means Formgrid does not have
Editor access to your sheet. Go back
to Google Sheets, click Share, and
make sure the Formgrid service account
email is added as an Editor not a Viewer.

"Invalid Google Sheets URL"

Make sure you copied the full URL
from your browser address bar
including the spreadsheet ID.
The URL should contain
/spreadsheets/d/ followed by
a long string of characters.

Submissions not appearing in sheet

Check that the integration is Active
in your Integrations tab. If it shows
Paused click the toggle to resume.

How This Compares to Zapier

	Zapier Route	Formgrid Native
Setup time	20 to 40 minutes	Under 3 minutes
Extra cost	$19.99/month for Zapier	Included in $29/month
Steps required	6 to 8 steps	3 steps
Real time	Depends on Zap frequency	Instant
Technical knowledge	Medium	None

How This Compares to Formspree

Formspree charges $90/month for
Google Sheets integration as part
of their Business plan.

Formgrid includes Google Sheets
integration in the Business plan
at $29/month. Along with:

Custom HTML email templates
Auto-responder emails to submitters
Webhooks for connecting to 5,000+ tools
Multiple notification recipients
15,000 submissions per month
Priority support

The same feature. A third of the price.

What the Formgrid Business Plan Includes

At $29/month the Business plan gives you:

Google Sheets native integration (this guide)
Custom HTML email templates
Auto-responder emails to form submitters
Webhooks: connect to Zapier, Make,
Slack, Notion, Airtable and 5,000+ more
Multiple email notification recipients
Custom email subject lines
15,000 submissions per month
Priority support: direct access to
the founder

No contracts. Cancel anytime.

Start your Business plan at formgrid.dev

Real World Example

Annie manages endurance horse riding
events in San Diego.

Every time someone registered for her
ride she received an email with all
the registration details in one long
unformatted block. No labels.
No sections. No structure.

Her event manager had to manually
scan through every registration to
find the information she needed.
For a 200 person event that was
hours of unnecessary work.

She now uses Formgrid with Google
Sheets connected. Every registration
appears instantly in a shared Google
Sheet her entire team can see.
Rider name, horse details, session
selection, payment status. All
organized. All automatic.

She is on the Business plan at
$29/month and has not looked back.

"The level of personal support
was impressive."

Annie Libby
Event Manager, San Diego Endurance Riders

Final Thoughts

Google Sheets integration should not
cost $90/month or require 40 minutes
of technical setup. It should just work.

Three steps. Under 3 minutes.
Every submission in your spreadsheet
automatically.

That is what Formgrid delivers.

👉 Try Formgrid free at formgrid.dev

Upgrade to Business when you are
ready for Google Sheets integration.

Full disclosure: I built Formgrid.
Written as honestly as I could.
Let me know in the comments if
anything looks off.

Tags: #webdev #nocode #googlesheets

tutorial #productivity #smallbusiness

---

How to Remove Form Builder Branding Without Paying $59/Month

Allen Jones — Sat, 21 Mar 2026 01:09:26 +0000

If you've ever shared a form with a client or
customer and noticed a "Powered by Typeform" or "Made with Jotform" badge sitting at the bottom,
You already know how unprofessional it looks.

You built the form. You collected the responses.
But someone else's logo is stamped all over your
work.

And when you go to remove it? Most form builders
want $29, $49, or even $59 per month just to take their branding off your form.

This guide shows you how to get a completely branded, watermark-free form for a fraction of that price.

Why Form Builders Put Their Branding on Your Forms

It's a deliberate freemium strategy. The free plan
turns your form into a billboard for their product.
Every person who fills out your form sees their
brand. Every client you share a form with becomes
a potential new user for them.

You're doing their marketing for free.

Here's what the major players charge to remove it:

Form Builder	Branding Removal Plan	Monthly Cost
Typeform	Plus plan	$59/month
Jotform	Bronze plan	$34/month
Tally	Pro plan	$29/month
Formgrid	Premium plan	$8/month

Typeform charges $59/month. Per month. Just to
remove their logo from your form.

For a freelancer, small business owner, or event
organizer collecting a few hundred responses
per month, that's completely unjustifiable.

The Real Cost of Keeping the Branding

You might think, "It's just a small logo, who
cares?" But consider these situations:

Sending a client intake form
You're a freelancer or agency. You send a
beautiful intake form to a new client. At
the bottom, it says "Powered by Typeform."
Your client sees you're using a free tool.
It undermines the professional impression
you're trying to make.

Running an event registration
You're collecting registrations for a
corporate event or workshop. Attendees
fill out the form and see a third-party
brand prominently displayed. It looks
unpolished and raises questions about
your organization.

Sharing on social media or WhatsApp
You share a form link in a WhatsApp group
or Instagram bio. People open it and
immediately see someone else's branding.
It looks like you didn't build it yourself.

Collecting job applications
Candidates fill out the application form.
They see "Made with Jotform" at the bottom.
It signals that you haven't invested in
your own tools. Not the impression you
want to make as an employer.

In all these cases, the branding creates
unnecessary friction and doubt. Removing
it is not vanity. It's professionalism.

How to Get a Watermark-Free Form for $8/Month

Formgrid is an open-source
form builder and form backend that removes all
branding on the Premium plan at just $8/month.

No "Powered by Formgrid" on your forms. No
watermarks. No third-party logos. Just your
form, your brand, your submissions.

Here's how to set it up step by step.

Step 1: Create Your Formgrid Account

Go to formgrid.dev and
sign up with Google or Email.

The free plan lets you explore the form builder
and test everything before upgrading. No credit
card required.

Step 2: Build Your Form

Click New Form from your dashboard and give
it a name.

You have two options:

Option A: Use the drag-and-drop form builder

Perfect if you don't have a website or just
need a shareable link. Drag fields onto the
canvas, customize labels and placeholders,
and your form is ready in minutes.

Option B: Use the form endpoint with your
existing HTML form

If you already have a form on your website,
just point the action attribute at your
Formgrid endpoint URL. No rebuilding needed.

<form action="https://formgrid.dev/api/f/your-form-id" 
      method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <input type="text" name="_honey" 
         style="display:none" />
  <button type="submit">Send Message</button>
</form>

Step 3: Upgrade to Premium

Go to your account billing page and upgrade
to the Premium plan at $8/month.

From this moment on:

No "Powered by Formgrid" badge on your forms
No watermarks on submission confirmation pages
No third-party branding in notification emails
Your form looks 100% like yours

Step 4: Share Your Branded Form

If you used the form builder, go to your form's
Overview tab, copy the shareable link.

Share it anywhere:

WhatsApp groups
Email campaigns
Instagram bio
LinkedIn messages
Embed it on your website

If you used the HTML endpoint, your existing
form is already live. Just submit a test
entry to confirm everything is working.

Step 5: Receive Submissions in Your Inbox

Every submission lands in your inbox instantly,
cleanly formatted with the submitter's details.
No dashboard login required, just to check
if someone filled out your form.

What You Get on the Formgrid Premium Plan

At $8/month, the Premium plan includes:

No Formgrid branding on any of your forms
5,000 submissions per month
Unlimited forms
Drag-and-drop form builder with shareable link
Form endpoint for existing HTML forms
File uploads up to 5MB per file
CSV export of all submissions
Honeypot and CAPTCHA spam protection
Email notifications on every submission
Works on any website or static site

That's everything you need to run a professional
branded forms for less than the cost of a
coffee per week.

Comparison: Branding Removal Across Form Builders

Tool	Branding Removal	Cost	Submissions
Typeform	Plus plan	$59/month	1,000/month
Jotform	Bronze plan	$34/month	1,000/month
Tally	Pro plan	$29/month	Unlimited
Formgrid	Premium plan	$8/month	5,000/month

Formgrid removes branding at a fraction of
what competitors charge. And you get 5,000
submissions per month, more than most
small businesses will ever need.

Who This is For

Freelancers and agencies who send client
intake forms and don't want another company's
logo on their work.

Event organizers collecting registrations
for workshops, webinars, and community events.

Small business owners with contact forms,
booking forms and inquiry forms on their website.

Course creators collecting student inquiries
and enrollment forms shared via social media.

HR teams and hiring managers are collecting
job applications and want the form to look
like it belongs to their company.

What Real Users Are Saying

"We needed a reliable registration form for our
endurance ride events that would send clean,
organized emails to our event manager. Formgrid
solved the problem quickly and even created a
custom email template tailored to our form.
The level of personal support was impressive!"

Annie Libby
Event Manager, San Diego Endurance Riders

Final Thoughts

Paying $59/month just to remove a logo from
Your form is not a reasonable ask for a
freelancer, small business, or event organizer
with real budget constraints.

Form builder branding removal should be
affordable. At $8/month, Formgrid makes it
accessible to anyone who needs professional
looking forms without the premium price tag.

Start free and upgrade when you're ready to
remove the branding.

👉 Try Formgrid free at formgrid.dev

Full disclosure: I built Formgrid. Written
as honestly as I could. If anything looks
inaccurate, let me know in the comments.

Tags: #webdev #nocode #smallbusiness #tutorial

Getform Alternatives in 2026. Cheaper, Open Source, and Self-Hostable

Allen Jones — Tue, 17 Mar 2026 23:50:40 +0000

If you've been using Getform and recently looked at
your bill, you're not alone. A lot of developers are
actively searching for alternatives, and for good reason.

Getform is a decent product. But its paid plans start
at $19/month for basic features. The free plan is limited
and once you need webhooks, file uploads, or more
submissions, you're immediately pushed onto a paid tier
that costs more than most comparable tools.

In this article, I'll walk through the best Getform
alternatives in 2026, covering price, features,
self-hosting options, and which one is right for
your use case.

Why Developers Look for Getform Alternatives

Before jumping into the list, here are the most common
reasons people switch:

Price: Getform's paid plans start at $19/month which is more expensive than most alternatives for similar submission limits
No form builder: Getform is purely a backend. If you need a shareable form link without writing HTML, you're out of luck
No self-hosting: If you care about data ownership or GDPR compliance, Getform gives you no option to run it yourself
No open source option: You're locked in with no transparency or customisation
Limited free tier: The free plan is restrictive and quickly pushes you toward a paid upgrade

If any of those hit home, keep reading.

The Best Getform Alternatives in 2026

1. Formgrid.dev. Form Builder + Form Backend in One Place

Best for: Developers who want a form backend AND
non-technical users who need a shareable form link.
Both in one tool.

What makes it different:

Most form tools pick a lane; either a form backend
for developers or a no-code form builder for everyone
else. Formgrid does both.

You can point your existing HTML form to a Formgrid
endpoint URL, exactly like Getform. Or you can use
the drag-and-drop form builder, get a shareable link,
and send it via WhatsApp or email without touching
any code.

<!-- Your existing HTML form — unchanged -->
<form action="https://formgrid.dev/api/f/your-form-id" 
      method="POST">
  <input type="text" name="name" 
         placeholder="Your Name" required />
  <input type="email" name="email" 
         placeholder="Your Email" required />
  <textarea name="message" 
            placeholder="Your Message"></textarea>
  <!-- Honeypot spam protection -->
  <input type="text" name="_honey" 
         style="display:none" />
  <button type="submit">Send Message</button>
</form>

Key features:

Drag-and-drop form builder with shareable link
HTML form endpoint; works with any static site
Spam protection: honeypot and rate limiting
Instant email notifications
Custom branded email templates (Business plan)
Auto-responder emails (Business plan)
Webhooks: connect to Zapier, Make, Slack, Notion, Google Sheets, and more
File uploads
CSV export
Self-hostable with Docker
100% open source (MIT license)
GDPR friendly: no tracking, no data selling

Pricing:

Plan	Price	Submissions
Free	$0/month	50/month
Premium	$8/month	5,000/month
Business	$29/month	15,000/month

The bottom line: Getform starts at $19/month with
no form builder and no self-hosting. Formgrid gives
you a form backend, a no-code builder, webhooks,
custom email templates, and self-hosting; starting
at $8/month.

👉 formgrid.dev

Formgrid Landing Page:

Formgrid Dashboard:

Example Form Built By Formgrid:

2. Formspree. Most Established Alternative

Best for: Developers who want a battle-tested
form backend with a large community.

Formspree has been around since 2013 and is one of
the most trusted form backends available. Simple to
set up, reliable, and well-documented.

Key features:

HTML form endpoint
Email notifications
File uploads
Spam protection
Zapier integration

Pricing: Free plan with 50 submissions/month.
Paid plans start at $10/month.

Drawback: No form builder. No self-hosting.
30-day submission history on free plan; data
disappears if you don't export it in time.

3. Basin. Minimal and No-Frills

Best for: Developers who want the simplest
possible form backend with no distractions.

Basin is intentionally minimal. Point your form
at their endpoint, receive emails, and you're done. No dashboard
overload, no feature creep.

Key features:

HTML form endpoint
Email notifications
Spam protection
Simple dashboard

Pricing: Free tier available. Paid plans
start at $8/month.

Drawback: Very limited compared to other options.
No form builder, no self-hosting, minimal integrations.

4. Netlify Forms. Great If You're Already on Netlify

Best for: Developers whose sites are deployed
on Netlify.

If you're already deploying on Netlify, this is the
easiest possible option; just add netlify to your
form tag and you're done.

<form name="contact" method="POST" data-netlify="true">

Key features:

Zero setup if you're on Netlify
Spam filtering
Email notifications
Dashboard in Netlify

Pricing: 100 submissions/month free with Netlify.

Drawback: Only works if your site is on Netlify.
If you host anywhere else, this isn't an option.

5. Web3Forms. Most Generous Free Plan

Best for: Developers who need a completely free
form backend for low-volume projects.

Web3Forms offers an impressive free tier, unlimited
forms and up to 250 submissions per month at no cost.
No account required to get started; just an API key
sent to your email.

Key features:

Completely free
250 submissions/month free
No account required
Email notifications
Honeypot spam protection

Pricing: Free.

Drawback: No dashboard, no submission history,
no file uploads, no self-hosting. Works for basic
contact forms, but nothing more.

Side-by-Side Comparison

Feature	Getform	Formgrid	Formspree	Basin	Netlify Forms
Form builder	❌	✅	❌	❌	❌
HTML endpoint	✅	✅	✅	✅	✅
Shareable form link	❌	✅	❌	❌	❌
Self-hostable	❌	✅	❌	❌	❌
Open source	❌	✅	❌	❌	❌
Custom email templates	❌	✅ Business	✅ $60/mo	❌	❌
Webhooks	✅	✅ Business	✅ Paid	❌	❌
File uploads	✅	✅	✅ Paid	✅ Paid	✅ Paid
Free submissions	Limited	50/mo	50/mo	Limited	100/mo
Starting price	$19/mo	$8/mo	$10/mo	$8/mo	Bundled
GDPR friendly	⚠️	✅	⚠️	⚠️	⚠️

Which One Should You Use?

Use Formgrid if:

You want a form backend AND a form builder in one tool
You care about open source and self-hosting
You're paying too much for Getform and want to cut costs
You need custom email templates for non-technical recipients
You need webhooks to connect to Zapier, Notion, Google Sheets, or Slack
GDPR compliance matters to you

Use Formspree if:

You want a battle-tested service with a large community
You don't need a form builder
You're comfortable with the pricing

Use Basin if:

You want the most minimal option possible
You just need basic form submission handling

Use Netlify Forms if:

Your site is already on Netlify
You want zero additional setup

Use Web3Forms if:

You need something completely free
Volume is low, and you don't need a dashboard

Final Thoughts

Getform is a solid product, but it's no longer the
obvious choice in 2026. At $19/month with no form
builder, no self-hosting, and no open source option,
there are better alternatives at lower prices.

If I were switching today, I'd go with Formgrid.
It's the only tool on this list that gives you a
form backend for developers AND a no-code form builder
for non-technical users, at a lower price than Getform,
with webhooks, custom email templates, and full
self-hosting support.

You can try it free at formgrid.dev
No credit card required.

Full disclosure: I built Formgrid. I wrote this
comparison as honestly as I could. If anything looks
inaccurate, let me know in the comments.

Tags: #webdev #html #opensource #tutorial

How to Customize Your Form Submission Email Notifications (And Why It Matters)

Allen Jones — Tue, 17 Mar 2026 22:14:22 +0000

If you've ever received a form submission email
that looks like this:

name=John+Smith&email=john%40example.com
&message=Hello+there&_next=https://yoursite.com
&_gotcha=&session=Morning+Workshop
&totalAmount=%24150.00

You know exactly how frustrating it is.
Raw field data dumped into an email with no structure, no
labels, and no context.
If you're the one reading
those emails or worse, forwarding them to a
colleague or client, it's a nightmare.

The problem gets worse when your form has many fields.
Registration forms, event entries, client intake forms, and job applications.
These forms can have 20, 30, or even 40 fields.
When all of that arrives as one unformatted block of text, the
person reading it has to hunt for the information
they need every single time.

This guide shows you how to fix that completely
using Formgrid's custom email template feature
so every submission email arrives clean, organized,
and readable by anyone.

Why Default Form Emails Look So Bad

Most form backends send notification emails by simply dumping whatever data they received into the email body.
They don't know your form's
structure. They don't know which fields are important.
They don't know that your recipient needs to see Attendee Information before Session Selection, before Payment Details.

They just send everything in one flat list or worse, as raw URL-encoded data.

This is fine for a simple 3-field contact form.
But the moment your form gets complex, the default
email becomes unreadable.

Here are the most common complaints:

Internal fields showing up: hidden fields
like _next, _gotcha, and _subject appear
in the email even though they're not real data.

No section headers: All fields listed in
one flat list with no grouping or context.

No formatting: Long text values show as
one unbroken paragraph with no line breaks.

Wrong field order: Fields appear in
submission order not in a logical reading order.

Generic subject line: Every email says
"New form submission" with no context about
who submitted or what they selected.

All of these problems are solved with a custom email template.

What a Custom Email Template Looks Like

Instead of a raw data dump, imagine receiving
this for every workshop registration:

Clean. Organized. Readable by anyone.
Whether they're a developer, an event coordinator, or
an office manager who just needs to know who's
coming and what they paid.

That's exactly what Formgrid's custom email
template feature delivers.

Who Needs Custom Email Templates

Event organizers: Workshop registrations, conference entries, seminar signups. Your coordinator needs to see the attendee details in a logical order, not a random field dump.

Small businesses: Client intake forms,
service booking forms, and quote request forms.
Your team needs to act on submissions quickly.
A clean email means faster response times.

Freelancers: Project brief forms,
onboarding forms. When a new client submits
their brief, you want it formatted like a
document you can actually work from.

Nonprofits: Volunteer applications,
membership forms, donation forms. Your coordinator needs to process applications efficiently without deciphering raw data.

Agencies: Building forms for clients.
Your clients expect professional emails that
match their brand and workflow.

If you're sending form submission emails to anyone who isn't a developer, custom email
templates are not optional. They're essential.

How Formgrid Custom Email Templates Work

Formgrid uses Mustache templating: A simple,
widely used templating language that lets you
write an HTML email with placeholders that get
replaced with real submission data automatically.

The Available Variables

{{ _formName }}    — name of your form
{{ _time }}        — submission timestamp
{{ fieldName }}    — any field by its exact name
{{# fields }}      — loop through all fields
  {{ _name }}      — field label inside the loop
  {{ _value }}     — field value inside the loop
{{/ fields }}      — close the loop

The {{ fieldName }} variable is the most
powerful one. It maps directly to the name
attribute of your HTML input field. So if your
form has:

<input type="text" name="attendeeName" />

You can use {{ attendeeName }} anywhere in
your email template and it will be replaced
with whatever the user typed.

Two Ways to Use Custom Email Templates

Option 1: The Simple Loop (Works for Any Form)

If you just want clean, formatted emails without thinking too much about structure, use the
fields loop. This works for any form automatically:

<div style="font-family: sans-serif; 
            max-width: 600px; 
            margin: 0 auto;">

  <h2 style="color: #1d4f3d;">
    New Submission — {{ _formName }}
  </h2>

  {{# fields }}
  <div style="margin-bottom: 16px; 
              border-bottom: 1px solid #eee; 
              padding-bottom: 16px;">
    <p style="margin: 0; 
              font-size: 12px; 
              color: #888; 
              text-transform: uppercase;">
      {{ _name }}
    </p>
    <p style="margin: 4px 0 0; 
              font-size: 15px; 
              color: #333;">
      {{ _value }}
    </p>
  </div>
  {{/ fields }}

  <p style="font-size: 12px; color: #999;">
    Submitted: {{ _time }}
  </p>

</div>

This renders every field cleanly with its label above and value below.
No internal fields, no raw data, no mess.
Just clean readable output
for every submission automatically.

Option 2: Sectioned Template

(For Complex Registration Forms)

If your form has multiple sections, like a
workshop registration with attendee details,
session selection, dietary requirements, and
payment.
You can group fields into sections
with clear headers:

<div style="font-family: sans-serif; 
            max-width: 600px; 
            margin: 0 auto; 
            color: #1f2937;">

  <h2 style="color: #1d4f3d; 
             border-bottom: 2px solid #e8f3ee; 
             padding-bottom: 10px;">
    New Registration: {{ _formName }}
  </h2>

  <h3 style="color: #1d4f3d;">
    Attendee Information
  </h3>
  <p><strong>Name:</strong> {{ attendeeName }}</p>
  <p><strong>Email:</strong> {{ email }}</p>
  <p>
    <strong>Company:</strong> {{ company }}
  </p>
  <p><strong>Phone:</strong> {{ phone }}</p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Session Selection
  </h3>
  <p>
    <strong>Workshop:</strong> {{ workshopName }}
  </p>
  <p><strong>Date:</strong> {{ workshopDate }}</p>
  <p><strong>Format:</strong> {{ format }}</p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Dietary Requirements
  </h3>
  <p>
    <strong>Dietary Preference:</strong> 
    {{ dietaryPreference }}
  </p>
  <p>
    <strong>Allergies:</strong> {{ allergies }}
  </p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Payment
  </h3>
  <p>
    <strong>Ticket Type:</strong> {{ ticketType }}
  </p>
  <p>
    <strong>Total:</strong> {{ totalAmount }}
  </p>
  <p>
    <strong>Payment Method:</strong> 
    {{ paymentMethod }}
  </p>

  <h3 style="color: #1d4f3d; 
             margin-top: 24px;">
    Notes
  </h3>
  <p>{{ notes }}</p>

  <hr style="margin-top: 32px; 
             border: none; 
             border-top: 1px solid #e5e7eb;" />
  <p style="font-size: 12px; 
            color: #9ca3af; 
            margin-top: 12px;">
    Submitted: {{ _time }}
  </p>

</div>

The variable names, {{ attendeeName }},
{{ workshopName }}, {{ totalAmount }}, must
match the name attributes of your HTML form
inputs exactly.

So if your form has:

<input type="text" name="attendeeName" />
<select name="workshopName">...</select>
<input type="hidden" name="totalAmount" />

The variables {{ attendeeName }},
{{ workshopName }}, and {{ totalAmount }}
will be replaced with the actual submitted
values automatically.

This gives you complete control over the layout,
grouping, and the order of every notification email.

How to Set Up Custom Email Templates

in Formgrid

Custom email templates are available on the
Business plan at $29/month.

Step 1: Go to Your Form Settings

Step 2: Find the Custom Email Template Section

Scroll down to the Custom Email Template
section.
If you're on the Business plan, you'll
see the full template editor.
If you're on the free or Premium plan, you'll see a prompt to
upgrade.

Step 3: Enable the Custom Template

Toggle the custom template on. The editor pre-populates with a starter template using the simple fields loop, a clean starting
point that works for any form immediately.

Step 4: Customize Your Template

Edit the HTML to match your needs.
Use the simple loop for basic forms or build a sectioned template for complex registration forms.

The available variables panel shows every variable you can use.
Click any variable chip to copy it to your clipboard instantly.

Step 5: Preview and Save

Click Preview to see exactly how your
email will look with sample data substituted
in. When you're happy, click Save Template.

From this point on every submission to your
form will use your custom template, clean,
organized, and formatted exactly the way
you designed it.

Step 6: Test It

Submit a test entry on your form and check your inbox.
Your notification email should
arrive formatted exactly as you designed it.

Custom Subject Lines

You can also control the email subject line using the _subject hidden field in your
HTML form:

<input 
  type="hidden" 
  name="_subject" 
  value="Workshop Registration — {{ attendeeName }}"
/>

Or set it dynamically with JavaScript before
submission:

document.getElementById('subjectField').value = 
  'Registration - ' + name + ' - ' + ticketType;

This means every submission email has a
meaningful subject line: "Workshop Registration.
Sarah Johnson. Early Bird", instead of
the generic "New form submission."

What Else Is Included in the Business Plan

Custom email templates are part of the Formgrid
Business plan that also includes:

15,000 submissions/month
Webhooks: Connect to Zapier, Make, Slack, Notion, Google Sheets, and more
Auto-responder emails: Automatically Send confirmation emails to your form submitters
Priority support

All for $29/month.

Final Thoughts

Default form notification emails are fine for simple contact forms. But the moment your form gets complex, with multiple sections and many fields,
non-technical recipients, a raw data dump
in your inbox, it becomes a real problem.

Custom email templates solve this completely.
Your emails arrive formatted, organized, and
readable by anyone. Whether they're a developer, an event coordinator, or an office manager, processing registrations.

With Formgrid.dev
you get:

✅ Full HTML email template control

✅ Mustache variables for any field

✅ Sectioned layouts for complex forms

✅ Custom subject lines

✅ Preview before saving

✅ Works with any HTML form on any website

Start free and upgrade to Business when
you're ready for custom templates.

👉 Try Formgrid free at formgrid.dev

Full disclosure: I built Formgrid.
Written as honestly as I could let you know in the
comments if anything looks off.

Tags: #webdev #javascript #tutorial #productivity #formapi

How to Add a Custom Form to Your Squarespace Site

Allen Jones — Sun, 15 Mar 2026 17:48:49 +0000

Squarespace makes it easy to build a beautiful website.
But when it comes to forms, a lot of users hit a wall quickly.

The native Squarespace form block is fine for simple contact
forms. But the moment you need something more dynamic. Fee
calculations, multi-section registration forms, and custom email
formatting, or more than 30 fields, the native block runs out
of the road fast.

Squarespace recommends adding no more than 30 fields to keep
a form that is user-friendly and quick to load, and that's the
hard limit for forms connected to Mailchimp. For anyone running
event registrations, membership applications, or client intake
forms, 30 fields are not enough.

In this guide, you'll learn how to add a fully custom HTML form
to your Squarespace site using a code block with dynamic
calculations, custom email notifications, and spam protection
included using Formgrid.dev.

Why Squarespace's Native Form Isn't Always Enough

Squarespace's built-in form block covers the basics well. But
here are the most common reasons people look for something more:

Limited email formatting: The notification email you
receive when someone submits is a basic field dump. You can't
control how it looks, how fields are grouped, or what the
subject line says. If you're forwarding submissions to a
client or a non-technical colleague, it looks messy.

No dynamic calculations: Squarespace's native form block
cannot calculate totals, apply pricing tiers, or update
fees dynamically as users fill in the form. You need a
custom HTML form with JavaScript for that and which is
exactly what this guide shows you how to build.

30 field limit: Complex registration forms, event entries,
and application forms often need more than 30 fields.

Unreliable email notifications: Squarespace forum users
regularly report form notifications not being delivered to
their email at all, with no clear explanation from the platform.

No submission dashboard: Squarespace stores submissions, but the interface for reviewing them is limited. No search,
no filtering, no CSV export on lower plans.

If any of those hit home, keep reading.

The Solution: A Custom HTML Form in a Squarespace Code Block

Squarespace allows you to embed custom HTML, CSS, and
JavaScript directly into any page using a Code Block.
This means you can build a fully custom form with any
fields, any layout, any logic, and embed it on your
Squarespace page.

The only thing a custom HTML form needs is a backend to
receive submissions, send email notifications, and store
the data. That's exactly what
Formgrid.dev provides.

Why Use Formgrid.dev

Formgrid is a privacy-first form
backend that works with any HTML form on any website,
including Squarespace.

Free plan includes:

Unlimited forms
50 submissions/month
Email notifications on every submission
Built-in spam protection (honeypot + rate limiting)
Submission dashboard

Premium plan: $8/month

5,000 submissions/month
File uploads
Custom redirect after submission
Webhook support

Business plan: $19/month

15,000 submissions/month
Custom branded email templates
Priority support

Unlike Squarespace's native form, Formgrid lets you control
exactly how your notification email looks with proper
sections, headers, and formatting that even a non-technical
recipient can read clearly.

Step-by-Step: Adding a Custom Form to Squarespace

Step 1: Create Your Formgrid Account

Head to https://formgrid.dev and
sign up using Google or Email.

No credit card required. You're on the free plan immediately.

Step 2: Create a New Form

Once logged in, click New Form from your dashboard.

Give your form a descriptive name:

"Contact Form"
"Event Registration"
"Client Intake Form"

Click Create Form.

Step 3: Copy Your Endpoint URL

Go to the Overview tab and copy your unique
endpoint URL.

It looks like this:

https://formgrid.dev/api/f/your-form-id

This is the URL your HTML form will submit data to.

Step 4: Open Your Squarespace Page Editor

In your Squarespace dashboard:

Go to Pages
Open the page where you want the form
Click Edit
Click the + button to add a new block
Select Code from the block options

This opens a code editor where you can paste raw HTML,
CSS, and JavaScript.

Step 5: Paste Your Custom Form

Here is a clean, ready-to-use contact form. Paste this
into your Squarespace code block and replace
YOUR_FORMGRID_ENDPOINT_URL with your endpoint from Step 3:

<style>
  .fg-form {
    max-width: 600px;
    margin: 0 auto;
    font-family: inherit;
  }
  .fg-form .fg-field {
    margin-bottom: 20px;
  }
  .fg-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .fg-form input,
  .fg-form textarea,
  .fg-form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
  }
  .fg-form textarea {
    min-height: 120px;
    resize: vertical;
  }
  .fg-form button {
    background: #1d4f3d;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
  .fg-status {
    margin-top: 16px;
    font-size: 0.95rem;
  }
</style>

<form id="fg-contact-form" 
      class="fg-form"
      action="YOUR_FORMGRID_ENDPOINT_URL" 
      method="POST">

  <div class="fg-field">
    <label for="name">Your Name</label>
    <input type="text" 
           id="name" 
           name="name" 
           placeholder="John Doe" 
           required />
  </div>

  <div class="fg-field">
    <label for="email">Email Address</label>
    <input type="email" 
           id="email" 
           name="email" 
           placeholder="john@example.com" 
           required />
  </div>

  <div class="fg-field">
    <label for="message">Your Message</label>
    <textarea id="message" 
              name="message" 
              placeholder="How can I help you?" 
              required></textarea>
  </div>

  <!-- Honeypot spam protection — invisible to humans -->
  <input type="text" 
         name="_honey" 
         style="display:none" 
         tabindex="-1" 
         autocomplete="off" />

  <!-- Optional: redirect after submission -->
  <input type="hidden" 
         name="_redirect" 
         value="https://yoursite.com/thank-you" />

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

</form>

<p class="fg-status" id="fg-status"></p>

<script>
  const form = document.getElementById('fg-contact-form');
  const status = document.getElementById('fg-status');

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    status.textContent = 'Sending...';

    const data = new FormData(form);

    try {
      const res = await fetch(form.action, {
        method: 'POST',
        body: data
      });

      if (res.ok) {
        form.style.display = 'none';
        status.textContent = 
          'Thanks! Your message has been sent.';
      } else {
        status.textContent = 
          'Something went wrong. Please try again.';
      }
    } catch (err) {
      status.textContent = 
        'Network error. Please check your connection.';
    }
  });
</script>

Click Apply in Squarespace to save the code block.

Step 6: Email Notifications Are Already Set Up

Formgrid automatically uses the email address you signed
up with as your default notification address. The moment
someone submits your form, the alert goes straight to
your inbox — no extra configuration needed.

If you want submissions sent to a different email,
a client's address or a team inbox, go to your form's
Settings tab and update it under
Email Notifications.

Every submission email includes the submitter's name,
email, message, and timestamp, cleanly formatted and
easy to read.

Step 7: Test Your Form

Preview your Squarespace page and submit a test entry.
Within seconds, you should receive:

A notification email in your inbox
The submission is logged in your Formgrid dashboard

If the email doesn't arrive, check your spam folder and
confirm the notification email is saved in your form
settings.

Step 8: View All Submissions

All submissions are stored in your Formgrid dashboard.
Go to the Submissions tab to view, search, and
export as CSV at any time.

Nothing gets lost even if an email slips into spam.

Building a More Complex Form

The example above is a basic contact form. But because
you're writing raw HTML and JavaScript, you can build
anything, multi-section registration forms, dynamic
fee calculators, conditional fields, and file uploads.

Here's a quick example of a registration form with
a dynamic total calculation:

<form id="fg-reg-form"
      class="fg-form"
      action="YOUR_FORMGRID_ENDPOINT_URL"
      method="POST">

  <input type="hidden" name="_subject" 
         id="subjectField" />

  <div class="fg-field">
    <label for="regName">Full Name</label>
    <input type="text" id="regName" 
           name="regName" required />
  </div>

  <div class="fg-field">
    <label for="regEmail">Email Address</label>
    <input type="email" id="regEmail" 
           name="regEmail" required />
  </div>

  <div class="fg-field">
    <label for="ticketType">Ticket Type</label>
    <select id="ticketType" name="ticketType" 
            class="fee-input">
      <option value="0">Select ticket</option>
      <option value="50">Standard - $50</option>
      <option value="25">Early Bird - $25</option>
    </select>
  </div>

  <div class="fg-field">
    <strong>Total: <span id="totalDisplay">
      $0.00
    </span></strong>
    <input type="hidden" id="totalField" 
           name="totalAmount" />
  </div>

  <!-- Honeypot -->
  <input type="text" name="_honey" 
         style="display:none" tabindex="-1" />

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

<script>
  function formatCurrency(val) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency', currency: 'USD'
    }).format(val || 0);
  }

  function updateTotal() {
    const fees = Array.from(
      document.querySelectorAll('.fee-input')
    );
    const total = fees.reduce(function(sum, el) {
      return sum + (parseFloat(el.value) || 0);
    }, 0);
    document.getElementById('totalDisplay')
      .textContent = formatCurrency(total);
    document.getElementById('totalField')
      .value = formatCurrency(total);
  }

  document.querySelectorAll('.fee-input')
    .forEach(function(el) {
      el.addEventListener('change', updateTotal);
    });

  document.getElementById('fg-reg-form')
    .addEventListener('submit', function() {
      const name = document.getElementById('regName')
        .value || 'Unknown';
      const total = document.getElementById('totalField')
        .value || '$0.00';
      document.getElementById('subjectField').value =
        'Registration - ' + name + ' - ' + total;
    });
</script>

This gives you a fully dynamic registration form with
real-time fee calculation. Something Squarespace's
native form block simply cannot do.

Spam Protection: What's Already Included

Formgrid includes two layers of spam protection
out of the box:

Honeypot field: a hidden input that real users
never see or fill in. Bots that auto-fill every field
get caught immediately. You added this with
name="_honey" in the form above.

Rate limiting: Formgrid automatically blocks
repeated submissions from the same IP address,
stopping bot floods before they reach your inbox.

When to Use a Form Service vs Squarespace's Native Form

Use a custom form with Formgrid if:

You need more than 30 fields
You need dynamic calculations or conditional logic
You want full control over how your notification email looks
You need a reliable submission dashboard with search and CSV export
You're building a registration or application form with multiple sections

Use Squarespace's native form if:

You just need a simple 3-5 field contact form
You don't need dynamic logic or calculations
Basic email notifications are sufficient

Final Thoughts

Squarespace is one of the best website builders available
but its native form block has real limitations for anyone
running complex forms. The good news is that Squarespace's
code block gives you complete freedom to embed any HTML
form you want — and Formgrid handles everything on the
backend.

With Formgrid.dev you get:

✅ Custom HTML forms on any Squarespace page

✅ Dynamic calculations and multi-section layouts

✅ Instant email notifications

✅ Built-in spam protection

✅ A clean submission dashboard

✅ No backend required

Free to start. No credit card required.

👉 Try Formgrid free at formgrid.dev

The Best Typeform Alternatives in 2026 (Free and Paid)

Allen Jones — Sat, 14 Mar 2026 16:24:41 +0000

If you've been using Typeform and recently looked at your
bill, you're not alone. Typeform's free plan limits you to
10 responses per month, and their paid plans start at
$25/month just to get basic features. For a lot of
developers, indie hackers, and small businesses, that's
hard to justify.

In this article, I'll walk through the best Typeform
alternatives in 2026, covering price, features,
self-hosting options, and which one is right for
Your use case.

Why Developers and Businesses Look for Typeform Alternatives

Before jumping into the list, here are the most common
reasons people switch:

Price: Typeform's free plan is almost unusable at 10 responses per month. Paid plans are expensive for what you get
No HTML form backend: Typeform is a hosted form builder only. You can't point your existing HTML form at a Typeform endpoint
No self-hosting: If you care about data ownership or GDPR compliance, Typeform gives you no option to run it yourself
Overkill for simple use cases: Typeform's conversational UI is beautiful but completely unnecessary if you just need a contact form or a registration form
No open source option: You're locked in with no transparency or customisation

If any of those hit home, keep reading.

The Best Typeform Alternatives in 2026

1. Formgrid.dev: Form Builder + Form Backend in One Place

Best for: Developers who want a form backend AND
non-technical users who need a shareable form link.
Both in one tool.

What makes it different:

Most form tools pick a lane. Either a form backend
for developers or a no-code form builder for everyone
else. Formgrid does both.

You can point your existing HTML form to a Formgrid
endpoint URL, just like you would with Formspree. Or
you can use the drag-and-drop form builder, get a
shareable link, and send it via WhatsApp or email
without touching any code.

Here is how both workflows look:

Option A: Use Your Existing HTML Form

If you already have an HTML form on your static site,
just point the action attribute at your Formgrid
endpoint. No other changes needed:

<form action="https://formgrid.dev/api/f/your-form-id" 
      method="POST">
  <input type="text" name="name" 
         placeholder="Your Name" required />
  <input type="email" name="email" 
         placeholder="Your Email" required />
  <textarea name="message" 
            placeholder="Your Message"></textarea>
  <!-- Honeypot spam protection -->
  <input type="text" name="_honey" 
         style="display:none" />
  <button type="submit">Send Message</button>
</form>

Your form stays exactly as it is. Formgrid handles
receiving submissions, sending email notifications,
and storing the data.

Option B: Build a Form With the Drag-and-Drop Builder

If you're non-technical or just want a shareable form
link without writing any HTML, Formgrid has a full
drag-and-drop form builder built in.

Here's how it works step by step:

Step 1: Sign Up and Create a Form

Head to formgrid.dev and sign
up using Google or Email. No credit card required.

Once logged in, you'll land on your dashboard.
Click New Form to get started.

Step 2: Choose Your Path

After creating your form, you'll be taken to the
form overview page. Scroll down, and you'll see
two options:

Build with Form Builder: Opens the drag-and-drop editor
Use Endpoint URL: Gives you the URL to point your existing HTML form at

Step 3: Build Your Form

Click Build with Form Builder, and you'll be
taken to the builder page. Drag fields from the
left panel onto the canvas: text fields, email
fields, dropdowns, checkboxes, file uploads, and more.

Each field is fully customisable. Click any field
to edit its label, placeholder, required status,
and validation rules.

Step 4: Customise Your Brand

Formgrid includes a colour picker so you can match
the form to your brand or your client's brand.
Change the primary colour, background, and button
style directly in the builder.

This means every form you share looks as if it
belongs to your brand. Not like a generic
third-party tool.

Step 5: Preview and Share

Once you're happy with the form, click Preview
to see exactly how it looks to your users. When
it's ready, click Share to get your shareable
form link.

You can send that link via:

WhatsApp
Email
SMS
Embed it on any website

No code. No hosting. Just a link.

Step 6: Configure Settings

Go to the Settings tab on your form to:

Add notification email addresses. Receive an email every time someone submits
Enable spam protection, honeypot, and rate limiting built in
Set a custom redirect URL after submission

Step 7 — View Submissions

All submissions are stored in your Formgrid dashboard.
Go to the Submissions tab to view, search, filter,
and export your data as CSV.

Key features:

Drag-and-drop form builder with shareable link
HTML form endpoint. Works with any static site
Spam protection (honeypot + rate limiting)
Instant email notifications
File uploads
CSV export
Colour picker for brand matching
Self-hostable with Docker
100% open source (MIT license)
GDPR friendly — no tracking, no data selling

Pricing:

Plan	Price	Submissions
Free	$0/month	50/month
Premium	$8/month	5,000/month
Business	$19/month	15,000/month

The bottom line: Typeform charges $25/month for
basic features. Formgrid gives you a form builder,
a form backend, self-hosting, and open source code
for $8/month. If you're paying for Typeform just to
build and share forms, this is the obvious switch.

👉 formgrid.dev

2. Google Forms: Best Free Option

Best for: Anyone who needs a completely free
form builder for basic use cases.

Google Forms is completely free with no submission
limits. It's the most widely used form of tool in the
world for good reason. It works, it's fast, and
everyone knows how to use it.

Key features:

Completely free
Unlimited responses
Google Sheets integration
Conditional logic
Simple analytics

Pricing: Free.

Drawback: No custom branding. No custom domain.
No HTML form backend. No self-hosting. Forms look
like Google Forms. Not like your brand. Not
suitable for professional client work.

3. Tally: Clean and Free Form Builder

Best for: Non-technical users who want a
Typeform-like experience at a lower price.

Tally is a popular Typeform alternative with a
clean, minimal interface. Their free plan is
genuinely useful. Unlimited forms and unlimited
responses, though some features are locked behind
the paid plan.

Key features:

Unlimited forms on the free plan
Unlimited responses
Conditional logic
File uploads (paid)
Notion integration
Embeddable forms

Pricing: Free plan available. Paid plan at
$29/month.

Drawback: No HTML form backend. No self-hosting.
No open source. Heavier than you need for a simple
contact form.

4. Jotform: Most Feature-Rich

Best for: Businesses that need an advanced form
logic, payment integration, and a full form
management suite.

Jotform is one of the most feature-rich form
builders available. Hundreds of templates, payment
integrations, conditional logic, approval workflows,
and more. If you need advanced functionality,
Jotform has it.

Key features:

10,000+ templates
Payment integrations (Stripe, PayPal, Square)
Conditional logic
PDF generation
E-signatures
Approval workflows
150+ integrations

Pricing: Free plan available (100 monthly
responses). Paid plans start at $34/month.

Drawback: Expensive at scale. No self-hosting.
No open source. Overkill for simple contact forms.

5. Paperform: Best for Beautiful Forms

Best for: Marketers and creators who want
visually stunning forms with a strong brand feel.

Paperform focuses on beautiful, landing-page-style
forms that feel like a designed experience rather
than a generic form. Strong media embedding,
payment support, and good conditional logic.

Key features:

Beautiful form design
Payment integrations
Conditional logic
Calculator fields
Media embedding

Pricing: Starts at $24/month. No free plan.

Drawback: No free plan. No HTML form backend.
No self-hosting. Expensive for what it offers
compared to alternatives.

Side-by-Side Comparison

Feature	Typeform	Formgrid	Google Forms	Tally	Jotform
Form builder	✅	✅	✅	✅	✅
HTML endpoint	❌	✅	❌	❌	❌
Shareable link	✅	✅	✅	✅	✅
Self-hostable	❌	✅	❌	❌	❌
Open source	❌	✅	❌	❌	❌
Custom branding	✅ Paid	✅	❌	✅ Paid	✅ Paid
File uploads	✅ Paid	✅	✅	✅ Paid	✅ Paid
Free responses	10/month	50/month	Unlimited	Unlimited	100/month
Starting price	$25/month	$8/month	Free	$29/month	$34/month
GDPR friendly	⚠️	✅	⚠️	⚠️	⚠️

Which One Should You Use?

Use Formgrid if:

You want a form backend AND a form builder in one tool
You need to point an existing HTML form at an endpoint
You care about open source and self-hosting
You're paying too much for Typeform and want to cut costs
You need to share a form link with someone non-technical
GDPR compliance matters to you

Use Google Forms if:

You need something completely free
Branding doesn't matter
You're collecting internal data or running simple surveys

Use Tally if:

You want a clean Typeform-like experience for free
You don't need an HTML form backend
You're a Notion user

Use Jotform if:

You need advanced logic, payments, and workflows
Budget is not a constraint
You're building complex multi-step forms

Use Paperform if:

Visual design is your top priority
You're building landing-page-style forms
You need strong payment integration

Final Thoughts

Typeform built a beautiful product, but it's hard to
justify the price in 2026 when better alternatives
exist at a fraction of the cost.

If you're a developer who needs both a form backend
for your static site AND a no-code builder for
non-technical clients or teammates, there is no
better option than Formgrid. It's the only tool
on this list that does both — at $8/month.

If you just need something free and simple,
Google Forms or Tally will serve you well.

But if you're paying $25/month or more for Typeform
and not using its advanced conversational features,
you're overpaying.

You can try Formgrid free at
formgrid.dev
No credit card required.

Full disclosure: I built Formgrid. I wrote this
comparison as honestly as I could. If anything
looks inaccurate, let me know in the comments.

Tags: #webdev #nocode #opensource #tutorial #forms

Netlify Forms Is Getting Expensive. Here Are the Best Alternatives in 2026

Allen Jones — Thu, 12 Mar 2026 22:37:29 +0000

If you've been using Netlify Forms for your static site, you've
probably noticed something uncomfortable: the moment your site
When it starts getting real traffic, the costs and confusion start fast.

Netlify's free plan gives you just 100 form submissions per month.
That sounds reasonable until your contact form actually starts
working.

And here's the part that frustrates most developers: Netlify
recently migrated to a credit-based billing system. Form
submissions now consume credits shared across your entire account.
If one site exceeds its limits, all projects on your account
get paused — not just the one that went over.

That's a stressful way to run a website.

In this post, we'll break down exactly how Netlify Forms pricing works
works, why developers are actively looking for alternatives, and
walk you through setting up a better solution, step by step.

How Netlify Forms Pricing Actually Works

Let's be specific, because the Netlify docs are genuinely confusing.

On the legacy free plan:

100 submissions per month per site
Once you hit 100, Netlify automatically upgrades you to Forms Level 1 (1,000 submissions) and charges you at the end of the billing cycle
Every level upgrade is automatic. You don't have to approve it

On the new credit-based plans:

Form submissions consume credits from a shared monthly pool
There is no longer a separate free tier for forms on new credit-based accounts
If your credit pool runs out, all your projects. Not just The one with the form gets paused until the next billing cycle

The unpredictability is the real problem. A traffic spike, a
contact form going slightly viral, or a bot hitting your form
could burn through your credits and take down your entire
Netlify account.

For something as simple as a contact form, that's a lot of
Risk to accept.

The Other Problem: You're Locked Into Netlify

Netlify Forms only works if your site is deployed on Netlify.
The moment you want to move to Vercel, Render, GitHub Pages,
Cloudflare Pages, or your own VPS — your forms stop working entirely.

You have to find a new solution anyway. Better to pick a
platform-independent form backend from the start.

The Best Netlify Forms Alternatives in 2026

Here are the most reliable alternatives, starting with the
best overall option.

1. Formgrid.dev: Best Overall Alternative

Formgrid is a privacy-first form backend
that works with any HTML form on any website regardless
of where it's hosted.

Free plan includes:

Unlimited forms
50 submissions/month
Email notifications on every submission
Built-in spam protection (honeypot + rate limiting)
Submission dashboard

Premium plan: $8/month

Higher submission limits
File uploads
Custom redirect after submission
Webhook support
Priority support

Unlike Netlify Forms, Formgrid works on Vercel, GitHub Pages,
Render, Cloudflare, or any custom server. You're never locked in.

We'll walk through setting it up step by step below.

2. Formspree: Most Established

Formspree has been the go-to form backend
since 2013. Battle-tested, reliable, and widely documented.

Free plan: 50 submissions/month

Paid plan: starts at $10/month

The downside is that paid plans get expensive if you're managing
forms across multiple client sites. But for a single project,
it's a solid choice.

3. Web3Forms: Most Generous Free Plan

Web3Forms offers an impressive free
tier — unlimited forms and up to 250 submissions per month
at no cost.

Setup takes about 2 minutes. No account required to get started.
Just an API key sent to your email. Great for developers who
want maximum free submissions without paying anything.

4. Basin: Clean and Simple

Basin is a straightforward form backend
with a clean dashboard and good spam filtering. Their free plan
allows 100 submissions per month — matching Netlify's free tier
but without the platform lock-in.

5. Formspark: Good for High Volume

Formspark offers a one-time payment
model instead of monthly subscriptions. You buy a bundle of
submissions and use them at your own pace. Good option if your
form traffic is unpredictable.

Side by Side Comparison

Service	Free Submissions	Paid Plan	Works Anywhere	Email Notifications
Netlify Forms	100/month	Credit-based	❌ Netlify only	✅
Formgrid.dev	50/month	$8/month flat	✅	✅
Formspree	50/month	$10/month	✅	✅
Web3Forms	250/month	$15/month	✅	✅
Basin	100/month	$29/month	✅	✅
Formspark	250 lifetime	One-time purchase	✅	✅

Step-by-Step: Setting Up Formgrid on Any Static Site

Let's replace Netlify Forms with Formgrid right now. This takes
under 5 minutes.

Step 1: Create Your Formgrid Account

Head to https://formgrid.dev and sign
up using Google or Email.

The free plan requires no credit card. You get unlimited forms
and 50 submissions per month immediately.

Step 2: Create a New Form

Once logged in, you'll land on your dashboard. Click New Form.

Give your form a name. Something descriptive works well:

"Contact Form"
"Portfolio Enquiry"
"Landing Page Leads"

Click Create Form.

Step 3: Copy Your Endpoint URL

After creating your form, you'll be taken to the form's overview page.

Click on the Overview tab and copy your unique endpoint URL.

It will look something like this:

https://formgrid.dev/api/f/dcffghhnjj

This is the URL your HTML form will submit to.

Step 4: Add the Form to Your HTML

Here is a complete, copy-paste-ready contact form. Replace
YOUR_ENDPOINT_URL with the URL you just copied:

<form action="YOUR_ENDPOINT_URL" method="POST">

  <label for="name">Your Name</label>
  <input 
    type="text" 
    id="name" 
    name="name" 
    placeholder="John Doe."
    required 
  />

  <label for="email">Email Address</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    placeholder="john@example.com"
    required 
  />

  <label for="message">Your Message</label>
  <textarea 
    id="message" 
    name="message" 
    rows="5" 
    placeholder="How can I help you?"
    required
  ></textarea>

  <!-- Honeypot: keeps bots out, invisible to real users -->
  <input 
    type="text" 
    name="_honey" 
    style="display:none." 
  />

  <!-- Optional: redirect after submission -->
  <input 
    type="hidden" 
    name="_redirect" 
    value="https://yoursite.com/thank-you" 
  />

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

</form>

That's your entire form. No server. No PHP. No backend code.

Step 5: Email Notifications Are Already Set Up

Good news! You don't have to configure anything here.

Formgrid automatically uses the email address you signed
up with as your default notification email. The moment
someone submits your form, the alert goes straight to
your inbox. No extra setup required.

If you'd like, submissions can be sent to a different email.
For example, a client's email or a team inbox, go to
your form's Settings tab, find Email Notifications,
and update it there.

From this point on, every time someone fills out your form
You'll get an email like this:

You'll see:

Submitter's name
Their email address
Their message
Timestamp of the submission

Submissions come straight to your inbox. No more logging in
just to check if someone reached out.

That said, if you prefer to review, search, or manage all
Your submissions are in one place, and everything is also saved in
Your Formgrid dashboard. Every submission is stored there
automatically, so nothing ever gets lost, even if an email
slips into spam.

View all your submissions anytime from the dashboard:

Step 6: Test Your Form

Fill out your own form and submit it. Within seconds, you
should receive:

A confirmation email in your inbox
The submission is logged in your Formgrid dashboard

If you don't receive the email, check your spam folder and
Make sure you saved the notification email in settings.

Optional: Using JavaScript for a Better UX

If you want to submit the form without a full page reload,
here's a clean fetch-based approach:

const form = document.getElementById('contact-form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  try {
    const response = await fetch('YOUR_ENDPOINT_URL', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      form.innerHTML = '<p>Thanks! Your message was sent.</p>';
    } else {
      form.innerHTML = '<p>Something went wrong. Please try again.</p>';
    }
  } catch (error) {
    form.innerHTML = '<p>Network error. Please try again.</p>';
  }
});

Add id="contact-form" to your form element, and this
script handles the rest. No page redirect, clean user
experience.

When to Use a Form Service vs Building Your Own Backend

Use Formgrid or a form service if:

You need a contact, enquiry, or waitlist form
You're building a static site, landing page, or portfolio
You want instant email notifications without configuring SMTP
You want spam protection without implementing it yourself
You want a submission dashboard without building one

Build your own backend if:

You need custom business logic on form submission
You need to write data to your own database directly
You're building a full SaaS product with complex flows
You need custom authentication tied to submissions

For 90% of landing pages, portfolios, and indie projects —
A form service is more than enough. You don't need a backend
for a contact form.

Final Thoughts

Netlify Forms was a great idea that got complicated.
Credit-based billing, platform lock-in, and the risk of
Your entire account is getting paused over a form submission
Spikes make it hard to recommend anything serious in 2026.

The good news: switching takes less than 10 minutes.

With Formgrid.dev you get:

✅ Flat predictable pricing

✅ Works on any hosting platform

✅ Instant email notifications

✅ Built-in spam protection

✅ A clean submission dashboard

✅ No backend required

If you're building on GitHub Pages, Vercel, Render,
Cloudflare Pages, or any static site generator like
Hugo, Jekyll, Astro, or Eleventy, Formgrid plugs in
with a single line change to your form's action attribute.

👉 Start free at formgrid.dev

DEV Community: Allen Jones

Creating a Fully Functional Contact Form with React and Formgrid API

Table of Contents

Prerequisites

Setting Up The React Project

Creating The Form Page Layout

Creating The Details Bar Component

Creating The Input Side

Declaring The State Variables and

Input Handler Functions

Creating a Formgrid Account

Handling Form Submission

What happens after submission

Clean. Organized. Ready to act on.

Adding spam protection

Step 3: Navigate to the form Settings Tab

Step 4: Scroll Down to the Security Settings Section

Creating The Success Page

Redirecting Users to The Success Page

Why Use Formgrid Instead of Formspree

Conclusion

tutorial #formgrid

Why WordPress Contact Form Emails Go to Spam (And How to Fix It)

Why WordPress Contact Form Emails

Go to Spam

The Five Most Common Reasons Your

WordPress Form Emails Are Not Arriving

Fix 1: Use an SMTP Plugin

Step 1: Install WP Mail SMTP

Step 2: Choose an SMTP provider

Step 3: Configure WP Mail SMTP

Fix 2: Use Formgrid as Your

Form Backend

Option A: HTML Form in WordPress

Custom HTML Block

Option B: Embed the Formgrid

Form Builder

Why Formgrid Solves More Than

Just Deliverability

Which Fix Should You Use?

The Honest Limitation of Formgrid

for WordPress

Frequently Asked Questions

Final Thoughts

contactform #email

How to Send Webflow Form Submissions Directly to Google Sheets (No Zapier Required)

What You Will Need

How This Works

Part One: Set Up Your Formgrid Form and Get Your Endpoint URL

Step 1: Log In to Formgrid and Create a New Form

Step 2: Copy Your Formgrid Endpoint URL

Part Two: Update Your Webflow Form to Use the Formgrid Endpoint

Step 3: Open Your Webflow Form Settings

Step 4: Set the Form Action URL

Step 5: Check Your Field Names

Step 6: Publish Your Webflow Site

Step 7: Submit a Test Entry

Part Three: Connect Google Sheets

Step 8: Open the Integrations Tab in Formgrid

Step 9: Create a Blank Google Sheet

Step 10: Share the Sheet With the Formgrid Service Account

Step 11: Paste Your Sheet URL Into Formgrid

Step 12: Choose Whether to Sync Existing Submissions

Step 13: Click Connect

Part Four: Verify the Full Flow Is Working

Step 14: Submit Another Test Entry Through Your Webflow Form

What Happens on Every Submission

Managing Your Google Sheets Connection

Troubleshooting

What the Formgrid Professional Plan Includes

Final Thoughts

Why Your Contact Form Is Getting Spam (And How to Stop It)

What Is Contact Form Spam?

How Do Bots Find Your Form in the First Place?

What Happens If You Ignore Contact Form Spam?

How to Protect Your Formgrid Forms: A Step-by-Step Guide

Step 1: Log In to Your Formgrid Account

Step 2: Open the Form You Want to Protect

Step 3: Navigate to the Settings Tab

Step 4: Scroll Down to the Security Settings Section