Framer

import React, { useState } from "react"
import Example from "https://framer.com/m/framer/Example.js@^1.0.0"

export default function AuthorizationForm(props) {
    // Обновите это значение на URL вашего Trigger on Webhook
    const formUrl = "Your_URL"

    const [email, setEmail] = useState("")
    const [formStatus, setFormStatus] = useState("unsubmitted")

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

        try {
            const response = await fetch(formUrl, {
                method: "POST",
                body: JSON.stringify({ email }),
                headers: {
                    "Content-type": "application/json",
                },
            })

            if (!response.ok) {
                throw new Error("Network response was not ok")
            }

            setFormStatus("submitted")
        } catch (error) {
            console.error("Error during form submission: ", error)
            setFormStatus("error")
        }
    }

    const handleEmailChange = (event) => {
        setEmail(event.target.value)
    }

    if (formStatus === "submitted") {
        return (
            <div style={responseText}>
                Спасибо! Вы успешно зарегистрировались.
            </div>
        )
    }

    if (formStatus === "error") {
        return <div>Что-то пошло не так. Обновите страницу и попробуйте снова!</div>
    }

    return (
        <>
            <div style={labelStyle}>Пожалуйста, укажите ваш адрес электронной почты.</div>
            <form onSubmit={onSubmit} style={containerStyle}>
                <input
                    type="email"
                    value={email}
                    onChange={handleEmailChange}
                    placeholder="Ваш email"
                    required
                    style={inputStyle}
                />
                <input type="submit" value="Signup" style={submitButtonStyle} />
            </form>
        </>
    )
}

const containerStyle = {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0.5rem",
    borderRadius: "4px",
    maxWidth: "500px",
    margin: "auto",
}

const inputStyle = {
    flex: "1",
    fontSize: "16px",
    padding: "0.75rem",
    margin: "0",
    backgroundColor: "#18181B",
    border: "1px solid #333",
    borderRadius: "12px",
    color: "#FFF",
    marginRight: "0.5rem",
}

const submitButtonStyle = {
    fontSize: "16px",
    padding: "0.75rem 1.5rem",
    backgroundColor: "#2C91ED",
    color: "#FFF",
    border: "none",
    borderRadius: "12px",
    cursor: "pointer",
    fontWeight: "bold",
}

const responseText = {
    textAlign: "center",
    color: "#5FCEAE",
    fontSize: "16px",
    marginTop: "1rem",
}

const labelStyle = {
    textAlign: "center",
    color: "#FFF",
    fontSize: "16px",
    marginBottom: "1rem",
}