Creating a custom contact form using Framer involves designing the form in the Framer interface and then adding the necessary code to handle form submissions. Here’s a step-by-step guide:

1. Set Up Your Framer Project

1. Create a new project:

   • Open Framer and create a new project or open an existing one where you want to add the contact form.

2. Design the form:

   • Use Framer’s design tools to create your contact form. Add input fields for name, email, and message, as well as a submit button.

2. Add Input Fields and a Submit Button

1. Add Input Fields:

   • Drag and drop input components from the left sidebar to your canvas.
   • Label them accordingly (e.g., “Name”, “Email”, “Message”).
   • Set appropriate properties such as type (text, email, etc.), placeholder, and required.

2. Add a Submit Button:

   • Drag and drop a button component.
   • Label it as “Submit” or “Send”.

3. Add Functionality with Code

To handle form submissions, you’ll need to add some custom code. Here’s how to do it in Framer:

1. Select the form or button:

   • Click on the form or submit button to select it.

2. Add a code component:

   • Click on the ”+” icon in the top left and select “Code Component”.
   • Name it appropriately (e.g., “ContactFormHandler”).

3. Edit the Code Component:

   • Click on the code component to open the code editor.
   • Add the following code to handle form submissions:

import { useState } from "react";

export function ContactFormHandler() {
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        message: ""
    });
    const [responseMessage, setResponseMessage] = useState("");

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await fetch("/api/contact", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(formData)
            });
            if (response.ok) {
                setResponseMessage("Form successfully submitted");
                setFormData({
                    name: "",
                    email: "",
                    message: ""
                });
            } else {
                setResponseMessage("Error submitting form");
            }
        } catch (error) {
            setResponseMessage("Error submitting form");
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                />
            </label>
            <label>
                Email:
                <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                />
            </label>
            <label>
                Message:
                <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    required
                ></textarea>
            </label>
            <button type="submit">Send</button>
            <p>{responseMessage}</p>
        </form>
    );
}

4. Integrate the Code Component with Your Form:
   • Replace the default form elements in your design with the code component.
   • Bind the input fields and submit button to the corresponding state and event handlers in the code.

4. Deploy the Backend to Handle Form Submissions

You’ll need a backend service to handle the form submissions. You can use services like Render, Netlify Functions, Vercel, or your own server.

1. Create an API Endpoint:

   • Set up a simple server (e.g., with Express.js) to handle the form submission and send the data to your email or database.

2. Deploy the Server:

   • Deploy your server using Render, Vercel, or any other hosting service.

Example Backend Code (Node.js with Express):

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.json());

app.post("/api/contact", (req, res) => {
    const { name, email, message } = req.body;

    // Process the form data (e.g., send an email or save to a database)
    console.log("Form data received:", { name, email, message });

    res.status(200).json({ message: "Form submission received" });
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

5. Deploy Your Framer Project

1. Preview and Test:

   • Preview your project in Framer and test the form to make sure it works as expected.

2. Deploy the Framer Project:

   • Use Framer’s deployment options to publish your site. Make sure your API endpoint URL matches the one used in the form submission handler.

By following these steps, you can create and deploy a custom contact form using Framer, complete with backend handling for form submissions.