Written by: Geoffrey Callaghan

How to setup a contact form on your 11ty site and deploy with Vercel

How To Setup A Contact Form On Your 11ty Site And Deploy With Vercel

Setting up a contact form on your 11ty site and deploying it with Vercel using Fabform can be done with a few steps. Here’s a general outline:

  1. Install Fabform: Start by installing Fabform. You can do this via npm:

    npm install fabform --save
  2. Create Your Contact Form: Create an HTML form in your 11ty project. For example:

    <!-- contact.html -->
    <form id="contact-form" action="/api/submit-form" 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" required></textarea>
        <button type="submit">Send</button>
    </form>
  3. Set Up the Backend: You need a backend to handle form submissions. You can use Vercel’s serverless functions for this. Create a directory for your API functions and a function to handle form submissions.

    // api/submit-form.js
    import { createFormEndpoint } from "fabform";
    
    export default createFormEndpoint({
        // your form configuration
        // This might include email sending, saving to a database, etc.
    });
  4. Configure Vercel: Make sure your Vercel project is set up to deploy properly. You might need to configure your vercel.json file or other Vercel settings.

  5. Deploy Your Site: Deploy your 11ty site to Vercel. Make sure to include your API functions in the deployment.

  6. Test Your Form: Once deployed, test your contact form to ensure it’s working as expected.

Remember, the specifics might vary depending on your project’s setup, but this general process should help you get started.