Kinde•4mo ago

Subscribe Form...React

[solved] Hi, I want to include the subscribe form in a react (docusaurus) site. I want to have a button that will just pop up the form as a modal. I was thinking to convert the form into a React component and simple submit using fetch like so (frontend is not my strong suite) can this be done? am I going about this the wrong way?

// my attempt to submit the form
// this returns with 400

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

        // Create a FormData object to mimic the form submission as it is without React
        const formData = new FormData();
        formData.append('p_0xxxxxxxxxxxxxxxxxxxx2', "");
        formData.append('new_name', firstName);
        formData.append('new_email', email);

        // Post data as form-data content type
        fetch('https://my-domain.kinde.com/widgets/subscribe/v1/subscribe', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
    };

// my attempt to submit the form
// this returns with 400

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

        // Create a FormData object to mimic the form submission as it is without React
        const formData = new FormData();
        formData.append('p_0xxxxxxxxxxxxxxxxxxxx2', "");
        formData.append('new_name', firstName);
        formData.append('new_email', email);

        // Post data as form-data content type
        fetch('https://my-domain.kinde.com/widgets/subscribe/v1/subscribe', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
    };

5 Replies

Claire_Kinde•4mo ago

Hi Mario. Great question. I'll get one of our front-end developers to get back to you by end of Monday AEDT.

mariodebono•4mo ago

@Claire_Kinde , thank you

Daniel_Kinde•3mo ago

Hi @mariodebono, without checking I suspect this could throw a CORs error? Do you have access to any backend service or workers?

mariodebono•3mo ago

Hi @Daniel_Kinde, I don't think I saw a cors error. I'll need to check it out and let you know later this week. Cheers Hi, @Daniel_Kinde , if I am able to use fetch and not the form snippet provided, am I allowed to use my own form given I keep your branding with the form? I still haven't tested it but I can just test the fetch later and if that works I would prefere to have a small inline form on my landing page instead. What do you think? @Daniel_Kinde , The fetch example above works, I think it needed the extra headers (working example below for the next guy)

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

        // Create a FormData object to mimic the form submission as it is without React
        const formData = new FormData();
        formData.append('p_0xxxxxxxxxxxxxxxaf0xxx6', "");
        formData.append('new_name', 'name');
        formData.append('new_email', 'name@example.com');

        try {
            // Post data as form-data content type
            const response = await fetch('https://my-domain.eu.kinde.com/widgets/subscribe/v1/subscribe', {
                method: 'POST',
                body: formData,
                headers: { Accept: "roast/mixed", "X-Requested-With": "XMLHttpRequest", "X-Request-Type": "subscribe" },
            });
            const resData = await response.json();
            const data = JSON.parse(resData.json);
            setMessage(data.message);
            setStatus(data.status);

        } catch (error) {
            console.error('Error:', error);
        }
    };

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

        // Create a FormData object to mimic the form submission as it is without React
        const formData = new FormData();
        formData.append('p_0xxxxxxxxxxxxxxxaf0xxx6', "");
        formData.append('new_name', 'name');
        formData.append('new_email', 'name@example.com');

        try {
            // Post data as form-data content type
            const response = await fetch('https://my-domain.eu.kinde.com/widgets/subscribe/v1/subscribe', {
                method: 'POST',
                body: formData,
                headers: { Accept: "roast/mixed", "X-Requested-With": "XMLHttpRequest", "X-Request-Type": "subscribe" },
            });
            const resData = await response.json();
            const data = JSON.parse(resData.json);
            setMessage(data.message);
            setStatus(data.status);

        } catch (error) {
            console.error('Error:', error);
        }
    };

The last question remains, am I allowed to use my own inline form (keeping your branding)?

Daniel_Kinde•3mo ago

Hi @mariodebono Yes that is all good 👍

Gaming

Programming

Subscribe Form...React