Untitled

import React, { useState } from "react"

/**
 * @framerSupportedLayoutWidth fixed
 * @framerSupportedLayoutHeight fixed
 */
export default function Form(props) {
    const [submitted, setSubmitted] = useState(false)

    const handleSubmit = async (event) => {
        event.preventDefault()

        const formElements = event.target.elements
        const formData = {
            first_name: formElements.first_name.value,
            last_name: formElements.last_name.value,
            email: formElements.email.value,
            tel: formElements.tel.value,
            message: formElements.message.value,
        }

        fetch("https://submit-form.com/[your-form-id-here]", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            body: JSON.stringify(formData),
        })
            .then(function (response) {
                if (response.ok) {
                    setSubmitted(true)
                } else {
                    throw new Error("Network response was not ok")
                }
                return response.json()
            })
            .then(function (data) {
                console.log(data)
            })
            .catch(function (error) {
                console.error("Form submission failed:", error)
            })
    }

    const formStyle = {
        display: "grid",
        gridTemplateRows: "auto auto auto 1fr auto", // divides the height among the elements
        gap: "20px",
        padding: "12px",
        borderRadius: "20px",
        fontFamily: "'Manrope', sans-serif",
        fontWeight: "500",
        fontSize: "18px",
        height: "100%", // specify a height on the form
    }

    const inputStyle = {
        padding: "20px",
        borderRadius: "20px",
        backgroundColor: "#F4FBF8",
        color: "#354155",
        border: "0",
        fontSize: "18px",
    }

    const placeholderStyle = {
        color: "#667085",
    }

    const textAreaStyle = {
        ...inputStyle,
        resize: "none", // this prevents the textarea from being resizable
    }

    const buttonStyle = {
        ...inputStyle,
        backgroundColor: "#4D6A61",
        color: "white",
        cursor: "pointer",
    }

    const overlayStyle = {
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    }

    const checkmarkStyle = {
        color: "green",
        fontSize: "50px",
        fontWeight: "bold",
    }

    return (
        <div style={{ position: "relative", height: "100%" }}>
            <form onSubmit={handleSubmit} style={formStyle}>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: "1fr 1fr",
                        gap: "20px",
                    }}
                >
                    <input
                        type="text"
                        id="first_name"
                        name="first_name"
                        placeholder="First name"
                        style={inputStyle}
                    />
                    <input
                        type="text"
                        id="last_name"
                        name="last_name"
                        placeholder="Last name"
                        style={inputStyle}
                    />
                </div>
                <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="Email"
                    style={inputStyle}
                />
                <input
                    type="tel"
                    id="tel"
                    name="tel"
                    placeholder="Phone number"
                    style={inputStyle}
                />
                <textarea
                    id="message"
                    name="message"
                    placeholder="Message"
                    style={textAreaStyle}
                ></textarea>
                <label
                    htmlFor="accept_privacy"
                    style={{
                        ...inputStyle,
                        backgroundColor: "transparent",
                        padding: "0",
                    }}
                >
                    <input type="checkbox" id="accept_privacy" required />I
                    accept the Privacy Policy
                </label>
                <input type="submit" value="Send message" style={buttonStyle} />
            </form>
            {submitted && (
                <div style={overlayStyle}>
                    <div style={checkmarkStyle}>&#10003;</div>
                </div>
            )}
        </div>
    )
}