I always used this custom form but never noticed it was displaying the data in the url. I’m launching ads and FB has warned me about this. I tried to fix it but I know nothing about React.

Here’s my code:

// Welcome to Code in Framer
// Get Started: https://www.framer.com/developers/

import Example from "https://framer.com/m/framer/Example.js@^1.0.0"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/#code-components-auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function Consultation_form(props) {
    // This is a React component containing an Example component
    // - Replace <Example /> with your own code
    // - Find inspiration: https://www.framer.com/developers/

    return (
        <form

            action="https://submit-form.com/zhC0BV5uD"
            method="post"
            style={{
                padding: "20px",
                width: "100%",
                maxWidth: "350px",
                display: "flex",
                flexDirection: "column",
                alignItems: "left",
                fontFamily: "Montserrat, sans-serif",
                fontSize: "18px",
                color: "black",
            }}
        >
            <input
                type="hidden"
                name="_redirect"
                // here you have to paste link, where do you want to lead your users to. *only do it if you use Sparkform. Otherwise, set up the redirection within your email marketing software.
                value="https://de-dysport.framer.website/confirmation"
            />

            <input
                type="text"
                id="name"
                // here you have to make sure the name you use matches the one your software uses. "email_address" is a common name they use for the email field.
                name="name"
                placeholder="Name"
                required
                style={{
                    width: "100%",
                    padding: "12px",
                    marginBottom: "15px",
                    border: "1px solid #000000",
                    backgroundColor: "transparent",
                    borderRadius: "4px",
                    color: "black",
                }}
            />

            <input
                type="email"
                id="email"
                // here you have to make sure the name you use matches the one your software uses. "email_address" is a common name they use for the email field.
                name="email"
                placeholder="Email"
                required
                style={{
                    width: "100%",
                    padding: "12px",
                    marginBottom: "15px",
                    border: "1px solid #000000",
                    backgroundColor: "transparent",
                    borderRadius: "4px",
                    color: "black",
                }}
            />

            <input
                type="phone"
                id="phone"
                // here you have to make sure the name you use matches the one your software uses. "email_address" is a common name they use for the email field.
                name="phone"
                placeholder="Phone Number"
                required
                style={{
                    width: "100%",
                    padding: "12px",
                    marginBottom: "15px",
                    border: "1px solid #000000",
                    backgroundColor: "transparent",
                    borderRadius: "4px",
                    color: "black",
                }}
            />

            <textarea
                id="message"
                name="message"
                placeholder="Additional request"
                style={{
                    width: "100%",
                    padding: "12px",
                    marginBottom: "15px",
                    border: "1px solid #000000",
                    backgroundColor: "transparent",
                    borderRadius: "4px",
                    color: "black",
                }}
            ></textarea>

            <div
                style={{
                    marginBottom: "15px",
                }}
            >
                <input
                    type="checkbox"
                    id="1"
                    name="consent"
                    value="Checked"
                ></input>{" "}
                <label
                    htmlFor="consent"
                    style={{
                        fontFamily: "Montserrat, sans-serif",
                        fontSize: "14px",
                        color: "black",
                    }}
                >
                    {" "}
                    I consent to receive promotional communication from Dream
                    Esthétiques MD
                </label>
            </div>

            <input
                type="submit"
                value="Submit your request"
                style={{
                    fontSize: "16px",
                    fontFamily: "Montserrat, sans serif",
                    width: "100%",
                    padding: "12px",
                    backgroundColor: "#A67E81",
                    color: "white",
                    fontWeight: "regular",
                    border: "0px solid",
                    cursor: "pointer",
                }}
            />
        </form>
    )
}

// Styles are written in object syntax
// Learn more: https://reactjs.org/docs/dom-elements.html#style
const containerStyle = {
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

I looked for an answer but wasn’t able to find a solution with handlesubmit.

I need to fix this asap, it is my first time trying stackoverflow.

Thank you in advance!