Creating a Contact Form in Strapi

Strapi is a versatile and powerful headless content management system (CMS) that allows you to build APIs quickly and easily. One common use case for Strapi is creating a contact form on your website to collect user inquiries or feedback. In this tutorial, we will walk you through the process of creating a simple contact form using Strapi.

Before we get started, make sure you have the following prerequisites:

1. Node.js and npm installed on your machine.
2. Basic knowledge of Strapi and its setup. If you haven’t already, you can refer to the official Strapi documentation for installation and setup instructions.

Step 1: Create a New Strapi Project

If you don’t have a Strapi project set up, you can create one using the following commands:

npx create-strapi-app my-contact-form
cd my-contact-form

Follow the prompts to configure your Strapi project.

Step 2: Create a Contact Form Collection

In Strapi, data is organized into collections. We’ll create a new collection to store the contact form submissions. To do this, run the following commands:

npx strapi generate:api ContactForm

Follow the prompts to define the fields for your contact form. Typical fields might include name, email, message, and a date field to record when the submission was made.

Step 3: Create an API Endpoint

To make your contact form accessible via an API, create an API endpoint. Run the following command:

npx strapi generate:controller ContactForm

This will create a controller that will handle the creation of contact form submissions.

Step 4: Create the Contact Form Component

Now, you can create the front-end component for your contact form. You can use your preferred JavaScript framework (e.g., React, Vue, Angular) or plain HTML/CSS for this step. Here’s an example of a simple HTML form:

<form action="/api/contact-forms" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

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

Make sure to replace /api/contact-forms with the actual endpoint URL of your Strapi API.

Step 5: Handle Form Submissions

In your Strapi project, the controller you generated earlier (ContactForm.js) should handle form submissions. Customize the controller logic to create a new contact form submission in your collection when the form is submitted.

Here’s a simplified example of how the controller might look:

// api/contact-form/controllers/ContactForm.js

module.exports = {
  async create(ctx) {
    const { name, email, message } = ctx.request.body;

    const newSubmission = await strapi.query('contact-form').create({
      name,
      email,
      message,
    });

    return newSubmission;
  },
};

Step 6: Display Confirmation

After the form submission is successful, you can display a confirmation message to the user. Customize the confirmation message based on your application’s design and requirements.

Conclusion

You’ve now created a contact form in Strapi, complete with API endpoints for data submission and retrieval. You can further enhance this contact form by adding features such as validation, email notifications, and CAPTCHA for spam protection. Strapi’s flexibility allows you to adapt the form to your specific needs, making it a powerful tool for managing content and user interactions on your website.