How to Integrate Netlify Forms with Prismic

Introduction

Prismic is a headless content management system (CMS) that uses an API to organize and distribute content for developers and content teams. It allows developers to leverage any frontend technology (React, Next.js, Vue, etc.) to create websites and applications by separating the frontend from the content management backend.

Prismic does not offer native form-building functionality. However, you can easily integrate forms into your Prismic website by using Netlify Forms. This blog walks you through the process of leveraging Netlify Forms to integrate forms seamlessly with your Prismic site.

Why Netlify Forms Is the Best Choice for Easy Form Integration Compared to Vercel

Among Netlify's competitors, we also have Vercel, which offers a similar service. When it comes to integrating forms, Vercel requires the use of third-party plugins or external services, which can complicate the process and necessitate additional configuration. This poses a challenge for developers seeking a seamless, all-in-one solution for managing form submissions. In contrast, Netlify makes it much easier to add forms seamlessly.

The Netlify dashboard offers a seamless experience with its advanced features such as automatic form detection, spam filtering, and easy submission management. These tools enhance the overall efficiency and user-friendliness of the platform, making it a valuable asset for website management.

Why Use Netlify Forms?

When adding a contact form to a Prismic-powered website, handling form submissions efficiently is essential. Netlify Forms provides a seamless, serverless solution that eliminates the need for backend setup. It integrates effortlessly with static sites and modern frameworks like Next.js and React, making it a preferred choice for developers. Additionally, it offers built-in security features and automation, ensuring a smooth user experience.

Here’s why Netlify Forms stands out:

1. No Backend Required – Netlify handles form submissions automatically without requiring a dedicated backend. This eliminates the need for complex server-side logic or databases, making it ideal for static and headless CMS websites like Prismic.

2. Simple Setup – Just add a basic form to your website, and Netlify will detect it automatically. There’s no need for extra code or additional tools.

3. Spam Protection – Netlify Forms includes built-in spam filtering and supports reCAPTCHA to prevent bots from submitting fake entries. The automatic filtering system reduces the need for manual intervention while improving data quality.

4. Instant Email Alerts – Receive immediate notifications when someone submits a form. This is especially useful for businesses that need to respond quickly to customer inquiries or service requests.

5. Submission Storage – Every form entry is saved in your Netlify dashboard, where you can view, manage, and download submissions anytime—no need for an extra database or third-party storage service.

6. Compatible with Modern
   – Netlify Forms works seamlessly with React, Next.js, Vue.js, and other popular frameworks. Whether you're building a static site or a dynamic web app, it integrates smoothly with your project.

Setting Up Netlify Forms in Your Prismic Project

Step 1 – Create and Integrate a New Slice in Prismic

• Create a New Slice – In Slice Machine, set up a new slice and give it a meaningful name that reflects its purpose.

• Add Necessary Fields – Include the required fields (text, image, rich text, etc.) to structure the content properly based on your needs.
  

• Implement logic to dynamically render the slice based on the data received from Prismic, ensuring flexibility for content updates.

• Once the slice is set up and tested, push it to Prismic to make it available for use in the CMS.

  

Step 2 – Create a Contact Form in Your Frontend

Ensure your HTML form meets the required specifications by including all input fields with names matching those in your JavaScript form, whether you're using pure JavaScript or Server-Side Rendering (SSR).

 <!-- File Name : __contact-form.html -->
    <!doctype html>
    <html>
      <head></head>


      <body>
        <form
          name="contact-form"
          method="POST"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          hidden
        >
          <input type="hidden" name="form-name" value="contact-form" />
          <input type="hidden" name="bot-field" />
          <input type="text" name="name" />
          <input type="number" name="phone" />
          <input type="email" name="email" />
          <textarea name="message"></textarea>
          <button type="submit">send</button>
        </form>
      </body>
    </html>

• Netlify detects forms by scanning the HTML of your site when the build is complete. If your form is rendered using JavaScript on the client side, Netlify won’t be able to find it in the pre-built files.

• To fix this, you can add a hidden HTML form with the data-netlify="true" attribute. Make sure the hidden form includes input fields with matching name attributes as your JavaScript form.

• If you're using Netlify's reCAPTCHA 2, you'll also need to add a hidden <div> with the data-netlify-recaptcha="true" attribute. This ensures that Netlify correctly detects and processes your form and reCAPTCHA.

• Include a hidden input in the JSX or JavaScript-rendered form:

   <input type="hidden" name="form-name" value="contact-form" />

   return (
      <>
        <section>
          <div className="container 2xl:mb-[70px] xl:mb-14 lg:mb-12 md:mb-10 mb-8">
            <form name="contact-form" action={'/thank-you'}>
  
  
              <input type="hidden" name="form-name" value="contact-form" />
             
              <label hidden htmlFor="bot-field">
                Don&apos;t fill this out if you&apos;re human:
                <input type="hidden" name="bot-field" />
              </label>
             </form>
          </div>
        </section>
      </>
    );
  

  Step 3 – Submit JavaScript-Rendered Forms Using AJAX for Better Performance

  To submit a JavaScript-rendered form built with a framework like Next.js or Nuxt, you can send an AJAX POST request to any page on your site.

  Requirements for the Request:

  • The form data must be URL-encoded in the request body.

  • If your form doesn’t include a hidden form-name input, you must send a form-name attribute in the request body.

  • If your form only accepts text or numbers, set the header as "Content-Type": "application/x-www-form-urlencoded"

  • If your form includes file uploads, do not include a Content-Type header.

  Below is an example using the Fetch API for submitting a form in JavaScript.

const handleFormSubmit = (event) => {
  event.preventDefault();


  const myForm = event.target;
  const formData = new FormData(myForm);


  fetch('/__contact-form.html', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => navigate("/thank-you/"))
    .catch((error) => {
      console.error('Error submitting form:', error);
    });
};

the handleFormSubmit function updates the form’s state. This updated state is then sent as a POST request to Netlify.

Step 4 - Success messages

After submitting a form, users are automatically redirected to the form via a generic

• To show a custom success page, add an action attribute to the <form> tag and set its value to the page path (e.g., "/pages/thank-you"). The path must start with / and be relative to the site root.

• After submitting the form, you can navigate to Netlify's Forms tab in the dashboard to view and manage all form submissions, including details like timestamps and submitted data.

With this setup, you can efficiently manage user inquiries, feedback, and other form submissions while keeping your site dynamic and lightweight.

How We Can Help with Your Prismic Development Projects

Integrating a contact form in Prismic CMS is just one way to enhance your website’s functionality. However, optimizing Prismic CMS for performance, scalability, and custom integrations requires expert guidance.

At RW Infotech, we specialize in custom Prismic development, ensuring seamless integration with modern frameworks like Next.js and React. As the best Prismic development service provider, we help businesses:

• Build fully customized Prismic-powered websites

• Integrate advanced features like dynamic forms, SEO optimizations, and API-driven solutions

• Enhance performance with Next.js and React

• Ensure a smooth, secure, and engaging user experience

Need expert assistance with your Prismic CMS project? Contact RW Infotech today, and let’s build something amazing together!