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));
    };

Kinde•2y ago•

7 replies

mariodebono

Subscribe Form...React

// 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));
    };

Subscribe Form...React

Similar Threads

Subscribe Form...React

Similar Threads

Similar Threads

Similar Threads