Custom Formspark form for Framer

framer-formspark.tsx

// Button background gradient has been hard-coded in the form below

import { addPropertyControls, ControlType, RenderTarget, withCSS } from "framer"
import { HTMLMotionProps, motion } from "framer-motion"
import * as React from "react"
import {
    containerStyles,
    usePadding,
    useRadius,
    paddingControl,
    borderRadiusControl,
    fontControls,
    useFontControls,
} from "https://framer.com/m/framer/default-utils.js@^0.45.0"
import {
    ComponentType,
    CSSProperties,
    useCallback,
    useMemo,
    useState,
} from "react"

interface Props extends Omit<HTMLMotionProps<"div">, "layout"> {
    formId: string
    withName: boolean
    withEmail: boolean
    withPhone: boolean
    withCompany: boolean
    withMessage: boolean
    nameField: any
    email: any
    phone: any
    company: any
    message: any
    labels: any
    inputs: any
    button: any
    gap: number
    style: CSSProperties
    onSubmit?: () => void
}

const emailRegex =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

const validateEmail = (email) => {
    return emailRegex.test(String(email).toLowerCase())
}

const phoneRegex = /^(\d{3})\-?(\d{3})\-?(\d{4})$/

const validatePhoneNumber = (phoneNumber) => {
    return phoneRegex.test(phoneNumber)
}

const formatPhoneNumber = (value) => {
    const cleanValue = value.replace(/\D/g, "")
    const match = cleanValue.match(/^(\d{3})(\d{3})(\d{4})$/)
    return match ? `${match[1]}-${match[2]}-${match[3]}` : value
}

/**
 * FORMSPARK
 *
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 */
const FormSparkWithPhoneCompanyFields: ComponentType<Props> = withCSS<Props>(
    function FormSparkWithPhoneCompanyFields({
        formId,
        withName,
        nameField: name,
        withEmail,
        email,
        withPhone,
        phone,
        withCompany,
        company,
        withMessage,
        message,
        labels,
        inputs,
        button,
        style,
        gap,
        onSubmit,
        ...props
    }) {
        const [nameValue, setName] = useState(name?.value)
        const [emailValue, setEmail] = useState(email?.value)
        const [phoneValue, setPhone] = useState(phone?.value)
        const [companyValue, setCompany] = useState(company?.value)
        const [messageValue, setMessage] = useState(message?.value)
        const [isNameError, setNameError] = useState(false)
        const [isEmailError, setEmailError] = useState(false)
        const [isPhoneError, setPhoneError] = useState(false)
        const [isCompanyError, setCompanyError] = useState(false)
        const [isMessageError, setMessageError] = useState(false)

        const [isLoading, setLoading] = useState(false)
        const [isSuccess, setSuccess] = useState(false)
        const [isError, setError] = useState(false)

        const isCanvas = useMemo(() => {
            return RenderTarget.current() === RenderTarget.canvas
        }, [])

        const gridTemplateRows = useMemo(() => {
            const row = []

            if (withName) {
                row.push("min-content")
            }
            if (withEmail) {
                row.push("min-content")
            }
            if (withPhone) {
                row.push("min-content")
            }
            if (withCompany) {
                row.push("min-content")
            }
            if (withMessage) {
                row.push("1fr max-content")
            }

            return row.join(" ")
        }, [withName, withEmail, withPhone, withCompany, withMessage])

        const labelFontSettings = useFontControls(labels)

        const fontSettings = useFontControls(inputs)
        const borderRadius = useRadius(inputs)
        const paddingValue = usePadding(inputs)

        const buttonFontSettings = useFontControls(button)
        const buttonBorderRadius = useRadius(button)
        const buttonPaddingValue = usePadding(button)

        const validateForm = useCallback(() => {
            let error = false
            setNameError(false)
            setEmailError(false)
            setPhoneError(false)
            setCompanyError(false)
            setMessageError(false)

            if (withName && !nameValue) {
                setNameError(true)

                error = true
            }

            if (withEmail && (!emailValue || !validateEmail(emailValue))) {
                setEmailError(true)

                error = true
            }

            if (withPhone) {
                if (phoneValue && !validatePhoneNumber(phoneValue)) {
                    setPhoneError(true)
                    error = true
                }
            }

            if (withMessage && !messageValue) {
                setMessageError(true)

                error = true
            }

            console.log("validateError", error)

            return error
        }, [
            validateEmail,
            withName,
            withEmail,
            withPhone,
            withCompany,
            withMessage,
            nameValue,
            emailValue,
            phoneValue,
            companyValue,
            messageValue,
        ])

        const handleSubmit = useCallback(
            (event: any) => {
                setLoading(true)
                event.preventDefault()

                if (validateForm()) {
                    setLoading(false)
                } else {
                    const data = new FormData(event.target)
                    const entries = Object.fromEntries(data.entries())

                    const extendBody = {
                        ...entries,
                        _email: {
                            subject:
                                "[Website Name] New submission - Contact form",
                        },
                    }

                    fetch(`https://submit-form.com/${formId}`, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            Accept: "application/json",
                        },
                        body: JSON.stringify(extendBody),
                    })
                        .then((response) => {
                            if (response.status === 200) {
                                setSuccess(true)
                                onSubmit()
                            } else {
                                setError(true)
                                setLoading(false)
                            }
                        })
                        .catch(() => {
                            setLoading(false)
                        })
                }
            },
            [formId, onSubmit, validateForm]
        )

        const handleNameChange = useCallback((event: any) => {
            setNameError(false)
            setName(event.target.value)
        }, [])

        const handleEmailChange = useCallback((event: any) => {
            setEmailError(false)
            setEmail(event.target.value)
        }, [])

        const handlePhoneChange = useCallback((event) => {
            const value = event.target.value
            const formattedValue = formatPhoneNumber(value)
            setPhoneError(false)
            setPhone(formattedValue)
        }, [])

        const handleCompanyChange = useCallback((event: any) => {
            setCompanyError(false)
            setCompany(event.target.value)
        }, [])

        const handleMessageChange = useCallback((event: any) => {
            setMessageError(false)
            setMessage(event.target.value)
        }, [])

        return (
            <motion.div
                style={{
                    ...style,
                    ...containerStyles,
                    flexDirection: "column",
                    "--framer-formspark-placeholder-color":
                        inputs.placeholderColor,
                }}
            >
                {!isSuccess && !isError && (
                    <form
                        style={{
                            display: "grid",
                            gridTemplateRows,
                            gap,
                            width: "100%",
                            height: "100%",
                            fontWeight: 400,
                        }}
                        onSubmit={handleSubmit}
                        method="POST"
                    >
                        {withName && (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                }}
                            >
                                <label
                                    htmlFor="name"
                                    style={{
                                        color: labels.color,
                                        ...labelFontSettings,
                                        marginBottom: 8,
                                    }}
                                >
                                    Name
                                </label>
                                <input
                                    className="framer-formspark-input"
                                    type="text"
                                    name="name"
                                    placeholder={name.placeholder}
                                    value={isCanvas ? name.value : nameValue}
                                    maxLength={60}
                                    onChange={handleNameChange}
                                    style={{
                                        ...defaultStyle,
                                        ...fontSettings,
                                        padding: paddingValue,
                                        borderRadius,
                                        background: inputs.fill,
                                        color: inputs.color,
                                        boxShadow: `inset 0 0 0 1px ${
                                            isNameError
                                                ? inputs.error
                                                : "transparent"
                                        }`,
                                    }}
                                    required
                                />
                            </div>
                        )}
                        {withEmail && (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                }}
                            >
                                <label
                                    htmlFor="email"
                                    style={{
                                        color: labels.color,
                                        ...labelFontSettings,
                                        marginBottom: 8,
                                    }}
                                >
                                    Email
                                </label>
                                <input
                                    className="framer-formspark-input"
                                    type="email"
                                    name="email"
                                    placeholder={email.placeholder}
                                    value={isCanvas ? email.value : emailValue}
                                    maxLength={60}
                                    onChange={handleEmailChange}
                                    style={{
                                        ...defaultStyle,
                                        ...fontSettings,
                                        padding: paddingValue,
                                        borderRadius,
                                        background: inputs.fill,
                                        color: inputs.color,
                                        boxShadow: `inset 0 0 0 1px ${
                                            isEmailError
                                                ? inputs.error
                                                : "transparent"
                                        }`,
                                    }}
                                    required
                                />
                            </div>
                        )}
                        {withPhone && (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                }}
                            >
                                <label
                                    htmlFor="phone"
                                    style={{
                                        color: labels.color,
                                        ...labelFontSettings,
                                        marginBottom: 8,
                                    }}
                                >
                                    Best Number to Contact You
                                </label>
                                <input
                                    className="framer-formspark-input"
                                    type="tel"
                                    name="phone"
                                    placeholder={phone.placeholder}
                                    value={isCanvas ? phone.value : phoneValue}
                                    pattern="\d{3}-\d{3}-\d{4}"
                                    maxLength={12}
                                    onChange={handlePhoneChange}
                                    style={{
                                        ...defaultStyle,
                                        ...fontSettings,
                                        padding: paddingValue,
                                        borderRadius,
                                        background: inputs.fill,
                                        color: inputs.color,
                                        boxShadow: `inset 0 0 0 1px ${
                                            isNameError
                                                ? inputs.error
                                                : "transparent"
                                        }`,
                                    }}
                                />
                            </div>
                        )}
                        {withCompany && (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                }}
                            >
                                <label
                                    htmlFor="company"
                                    style={{
                                        color: labels.color,
                                        ...labelFontSettings,
                                        marginBottom: 8,
                                    }}
                                >
                                    Company / Organization
                                </label>
                                <input
                                    className="framer-formspark-input"
                                    type="text"
                                    name="company"
                                    placeholder={company.placeholder}
                                    value={
                                        isCanvas ? company.value : companyValue
                                    }
                                    maxLength={60}
                                    onChange={handleCompanyChange}
                                    style={{
                                        ...defaultStyle,
                                        ...fontSettings,
                                        padding: paddingValue,
                                        borderRadius,
                                        background: inputs.fill,
                                        color: inputs.color,
                                        boxShadow: `inset 0 0 0 1px ${
                                            isNameError
                                                ? inputs.error
                                                : "transparent"
                                        }`,
                                    }}
                                />
                            </div>
                        )}
                        {withMessage && (
                            <div
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                }}
                            >
                                <label
                                    htmlFor="message"
                                    style={{
                                        color: labels.color,
                                        ...labelFontSettings,
                                        marginBottom: 8,
                                    }}
                                >
                                    Message
                                </label>
                                <textarea
                                    className="framer-formspark-input"
                                    placeholder={message.placeholder}
                                    name="message"
                                    value={
                                        isCanvas ? message.value : messageValue
                                    }
                                    maxLength={600}
                                    onChange={handleMessageChange}
                                    style={{
                                        ...defaultStyle,
                                        ...fontSettings,
                                        minHeight: 160,
                                        flex: 1,
                                        padding: paddingValue,
                                        resize: "vertical",
                                        borderRadius,
                                        background: inputs.fill,
                                        color: inputs.color,
                                        boxShadow: `inset 0 0 0 1px ${
                                            isMessageError
                                                ? inputs.error
                                                : "transparent"
                                        }`,
                                    }}
                                    required
                                />
                            </div>
                        )}

                        <input type="hidden" name="_email.subject" value="[Website Name] New submission - Contact form" />

                        <div>
                            <motion.input
                                type="submit"
                                value={button.label}
                                style={{
                                    ...defaultStyle,
                                    ...buttonFontSettings,
                                    padding: buttonPaddingValue,
                                    color: button.color,
                                    background:
                                        "radial-gradient(circle, rgba(193,130,252,1) 0%, rgba(120,61,255,1) 70%, rgba(120,61,255,1) 100%)",
                                    borderRadius: buttonBorderRadius,
                                    cursor: "pointer",
                                    zIndex: 1,
                                }}
                                transition={{ type: "ease", duration: 0.3 }}
                                whileHover={{
                                    opacity: 0.8,
                                    background:
                                        "radial-gradient(circle, rgba(193,130,252,1) 0%, rgba(120,61,255,1) 70%, rgba(96,36,237,1) 100%)",
                                }}
                            />

                            {isLoading && (
                                <div
                                    style={{
                                        borderRadius,
                                        position: "absolute",
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        width: "100%",
                                        height: "100%",
                                        left: 0,
                                        top: 0,
                                        zIndex: 2,
                                        color: button.fill,
                                        background: "#fff",
                                    }}
                                >
                                    <motion.div
                                        style={{ height: 40, width: 40 }}
                                        initial={{ rotate: 0 }}
                                        animate={{ rotate: 360 }}
                                        transition={{
                                            duration: 2,
                                            repeat: Infinity,
                                        }}
                                    >
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="40"
                                            height="40"
                                            viewBox="0 0 16 16"
                                        >
                                            <path
                                                d="M 8 0 C 3.582 0 0 3.582 0 8 C 0 12.419 3.582 16 8 16 C 12.418 16 16 12.419 16 8 C 15.999 3.582 12.418 0 8 0 Z M 8 14 C 4.687 14 2 11.314 2 8 C 2 4.687 4.687 2 8 2 C 11.314 2 14 4.687 14 8 C 14 11.314 11.314 14 8 14 Z"
                                                fill={button.fill}
                                                opacity="0.2"
                                            />
                                            <path
                                                d="M 8 0 C 12.418 0 15.999 3.582 16 8 C 16 8 16 9 15 9 C 14 9 14 8 14 8 C 14 4.687 11.314 2 8 2 C 4.687 2 2 4.687 2 8 C 2 8 2 9 1 9 C 0 9 0 8 0 8 C 0 3.582 3.582 0 8 0 Z"
                                                fill={button.fill}
                                            />
                                        </svg>
                                    </motion.div>
                                </div>
                            )}
                        </div>
                    </form>
                )}

                {isSuccess && (
                    <>
                        <motion.div
                            style={{
                                height: "60px",
                                width: "60px",
                                background: button.fill,
                                color: button.color,
                                borderRadius: "50%",
                                display: "flex",
                                justifyContent: "center",
                                alignItems: "center",
                            }}
                            initial={{ scale: 0 }}
                            animate={{ scale: 1 }}
                            transition={{
                                duration: 0.3,
                            }}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="28"
                                height="28"
                            >
                                <path
                                    d="M 2 14 L 10 22 L 26 6"
                                    fill="transparent"
                                    strokeWidth="4"
                                    stroke="currentColor"
                                    strokeLinecap="round"
                                />
                            </svg>
                        </motion.div>
                        <div style={{ margin: "16px" }}>
                            <p
                                style={{
                                    color: button.fill,
                                    fontFamily: fontSettings.fontFamily,
                                    fontSize: "16px",
                                    fontWeight: 500,
                                }}
                            >
                                Form successfully submitted
                            </p>
                        </div>
                    </>
                )}

                {isError && (
                    <>
                        <motion.div
                            style={{
                                height: "60px",
                                width: "60px",
                                background: "#EE4444",
                                color: button.color,
                                borderRadius: "50%",
                                display: "flex",
                                justifyContent: "center",
                                alignItems: "center",
                            }}
                            initial={{ scale: 0 }}
                            animate={{ scale: 1 }}
                            transition={{
                                duration: 0.3,
                            }}
                        >
                            <svg
                                width="28"
                                height="28"
                                viewBox="0 0 28 28"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <g clip-path="url(#clip0_4278_1848)">
                                    <path
                                        fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M13.1127 0.0262393L12.4372 0.0962393C9.15949 0.423489 5.85724 2.11399 3.62424 4.60949C1.15499 7.36924 -0.0997637 10.794 0.0157363 14.4427C0.216986 20.7445 4.54824 26.0802 10.6925 27.5992C12.5015 28.0361 14.3792 28.1094 16.2168 27.815C18.0544 27.5206 19.8152 26.8644 21.3972 25.8842C24.5084 23.9458 26.7351 20.8645 27.5992 17.3022C27.9002 16.0755 27.9702 15.4507 27.9702 14C27.9702 12.5492 27.9002 11.9245 27.5992 10.6977C26.2132 5.03649 21.5512 0.871489 15.75 0.111989C15.253 0.0472393 13.4452 -0.0105107 13.1127 0.0262393ZM15.4927 2.73524C17.4585 2.99401 19.3228 3.76062 20.902 4.95949C21.4777 5.38999 22.61 6.52224 23.0405 7.09799C24.0222 8.41224 24.7485 9.95749 25.0775 11.4362C25.452 13.1249 25.452 14.8751 25.0775 16.5637C24.353 19.8205 22.0587 22.7115 19.0172 24.199C17.9207 24.7356 16.7477 25.0992 15.54 25.277C14.798 25.3907 13.202 25.3907 12.46 25.277C9.05099 24.759 6.17399 22.8987 4.36274 20.0392C3.91722 19.3006 3.54559 18.5198 3.25324 17.7082C2.8364 16.517 2.63205 15.2619 2.64949 14C2.64949 12.1817 3.00124 10.6312 3.77999 9.02999C4.37499 7.80849 4.98049 6.96499 5.97274 5.97274C6.85037 5.06243 7.88633 4.31941 9.02999 3.77999C11.0338 2.80115 13.2826 2.43761 15.4927 2.73524ZM13.4855 7.50749C13.0935 7.63524 12.8712 7.85924 12.7627 8.23374C12.6997 8.44724 12.6927 8.93549 12.7032 11.928C12.7172 15.3755 12.7172 15.3772 12.8187 15.568C12.9521 15.8123 13.1661 16.0028 13.4242 16.107C13.6552 16.1875 14.3447 16.1875 14.5757 16.107C14.8339 16.0028 15.0479 15.8123 15.1812 15.568C15.2827 15.3772 15.2827 15.3755 15.2967 11.928C15.3107 8.16199 15.3107 8.15849 15.043 7.84174C14.826 7.58274 14.5932 7.49699 14.07 7.48299C13.8748 7.47199 13.679 7.4802 13.4855 7.50749ZM13.6255 18.4275C13.2754 18.5527 12.9841 18.8034 12.8082 19.131C12.6819 19.4448 12.6665 19.7924 12.7645 20.1162C12.8591 20.3698 13.0272 20.5893 13.2473 20.7467C13.4674 20.9042 13.7295 20.9923 14 21C14.5302 21 15.071 20.615 15.2355 20.1162C15.3335 19.7924 15.3181 19.4448 15.1917 19.131C15.0469 18.8753 14.8367 18.6628 14.5827 18.515C14.3797 18.41 13.832 18.3592 13.6255 18.4275Z"
                                        fill="currentColor"
                                    />
                                </g>
                                <defs>
                                    <clipPath id="clip0_4278_1848">
                                        <rect
                                            width="28"
                                            height="28"
                                            fill="white"
                                        />
                                    </clipPath>
                                </defs>
                            </svg>
                        </motion.div>
                        <div style={{ margin: "16px" }}>
                            <p
                                style={{
                                    color: "#EE4444",
                                    fontFamily: fontSettings.fontFamily,
                                    fontSize: "16px",
                                    fontWeight: 500,
                                }}
                            >
                                An error occurred while submitting form
                            </p>
                        </div>
                    </>
                )}
            </motion.div>
        )
    },
    [
        ".framer-formspark-input::placeholder { color: var(--framer-formspark-placeholder-color) !important; }",
    ]
)

FormSparkWithPhoneCompanyFields.defaultProps = {
    gap: 12,
    nameField: { value: undefined, placeholder: "Name" },
    email: { value: undefined, placeholder: "Email" },
    phone: { value: undefined, placeholder: "Phone Number" },
    company: { value: undefined, placeholder: "Company Name" },
    message: { value: undefined, placeholder: "Message" },
    labels: {
        color: "#111F3D",
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 16,
        fontWeight: 600,
    },
    inputs: {
        fill: "#EBEBEB",
        color: "#000",
        placeholderColor: "rgba(0, 0, 0, 0.5)",
        error: "#EE4444",
        border: "#D8DDE4",
        fontFamily: "'Satoshi', sans-serif",
        fontSize: 16,
        fontWeight: 400,
        borderRadius: 6,
        topLeftRadius: 6,
        topRightRadius: 6,
        bottomRightRadius: 6,
        bottomLeftRadius: 6,
        padding: 16,
        paddingTop: 16,
        paddingBottom: 16,
        paddingLeft: 16,
        paddingRight: 16,
    },
    button: {
        label: "Send Message",
        fill: "#7229BC",
        color: "#FFF",
        border: "#9748E5",
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 16,
        fontWeight: 500,
        borderRadius: 6,
        topLeftRadius: 6,
        topRightRadius: 6,
        bottomRightRadius: 6,
        bottomLeftRadius: 6,
        padding: 16,
        paddingTop: 16,
        paddingBottom: 16,
        paddingLeft: 16,
        paddingRight: 16,
    },
} as any

addPropertyControls(FormSparkWithPhoneCompanyFields, {
    formId: {
        title: "ID",
        placeholder: "7PbPpGN3",
        type: ControlType.String,
        description:
            "Create a [FormSpark](https://formspark.io/) account, add a new form and copy its ID. [Learn more…](https://www.framer.com/sites/integrations/formspark/)",
    },
    withName: {
        title: "Name",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: true,
    },
    nameField: {
        title: " ",
        type: ControlType.Object,
        controls: {
            placeholder: {
                title: "Placeholder",
                type: ControlType.String,
                defaultValue: "Name",
            },
            value: {
                title: "Value",
                type: ControlType.String,
                defaultValue: "",
            },
        },
        hidden: (props) => !props.withName,
    },
    withEmail: {
        title: "Email",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: true,
    },
    email: {
        title: " ",
        type: ControlType.Object,
        controls: {
            placeholder: {
                title: "Placeholder",
                type: ControlType.String,
                defaultValue: "Email",
            },
            value: {
                title: "Value",
                type: ControlType.String,
            },
        },
        hidden: (props) => !props.withEmail,
    },
    withPhone: {
        title: "Phone",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: true,
    },
    phone: {
        title: " ",
        type: ControlType.Object,
        controls: {
            placeholder: {
                title: "Placeholder",
                type: ControlType.String,
                defaultValue: "Phone Number",
            },
            value: {
                title: "Value",
                type: ControlType.String,
                defaultValue: "",
            },
        },
        hidden: (props) => !props.withPhone,
    },
    withCompany: {
        title: "Company",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: true,
    },
    company: {
        title: " ",
        type: ControlType.Object,
        controls: {
            placeholder: {
                title: "Placeholder",
                type: ControlType.String,
                defaultValue: "Company Name",
            },
            value: {
                title: "Value",
                type: ControlType.String,
                defaultValue: "",
            },
        },
        hidden: (props) => !props.withCompany,
    },
    withMessage: {
        title: "Message",
        type: ControlType.Boolean,
        enabledTitle: "Show",
        disabledTitle: "Hide",
        defaultValue: true,
    },
    message: {
        title: " ",
        type: ControlType.Object,
        controls: {
            placeholder: {
                title: "Placeholder",
                type: ControlType.String,
                defaultValue: "Message",
            },
            value: {
                title: "Value",
                type: ControlType.String,
            },
        },
        hidden: (props) => !props.withMessage,
    },
    labels: {
        title: "Labels",
        type: ControlType.Object,
        controls: {
            color: {
                title: "Text",
                type: ControlType.Color,
                defaultValue: "#111F3D",
            },
            ...fontControls,
            fontSize: {
                title: "Font Size",
                type: ControlType.Number,
                displayStepper: true,
                defaultValue: 14,
            },
        },
    },
    inputs: {
        title: "Inputs",
        type: ControlType.Object,
        controls: {
            fill: {
                title: "Fill",
                type: ControlType.Color,
                defaultValue: "#EBEBEB",
            },
            border: {
                title: "Border",
                type: ControlType.Color,
                defaultValue: "#D8DDE4",
            },
            color: {
                title: "Text",
                type: ControlType.Color,
                defaultValue: "#000",
            },
            placeholderColor: {
                title: "Placeholder",
                type: ControlType.Color,
                defaultValue: "rgba(0, 0, 0, 0.5)",
            },
            error: {
                title: "Error",
                type: ControlType.Color,
                defaultValue: "#EE4444",
            },
            ...fontControls,
            fontSize: {
                title: "Font Size",
                type: ControlType.Number,
                displayStepper: true,
                defaultValue: 16,
            },
            ...borderRadiusControl,
            ...paddingControl,
        },
    },
    button: {
        title: "Button",
        type: ControlType.Object,
        controls: {
            label: {
                title: "Label",
                type: ControlType.String,
                defaultValue: "Send Message",
            },
            fontWeight: {
                ...fontControls.fontWeight,
                defaultValue: 500,
            },
            color: {
                title: "Text",
                type: ControlType.Color,
                defaultValue: "#FFF",
            },
            fill: {
                title: "Fill",
                type: ControlType.Color,
                defaultValue: "#000",
            },
            border: {
                title: "Border",
                type: ControlType.Color,
                defaultValue: "#9748E5",
            },
            ...fontControls,
            fontSize: {
                title: "Font Size",
                type: ControlType.Number,
                displayStepper: true,
                defaultValue: 16,
            },
            ...borderRadiusControl,
            ...paddingControl,
        },
    },
    gap: {
        title: "Gap",
        type: ControlType.Number,
        displayStepper: true,
        min: 0,
    },
    onSubmit: {
        type: ControlType.EventHandler,
    },
})

const defaultStyle: CSSProperties = {
    WebkitAppearance: "none",
    display: "inline-block",
    width: "100%",
    lineHeight: "1.4em",
    outline: "none",
    border: "1px solid #D8DDE4",
}

export default FormSparkWithPhoneCompanyFields