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
Claire_Kinde2mo 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
mariodebono2mo ago
@Claire_Kinde , thank you
Daniel_Kinde
Daniel_Kinde2mo ago
Hi @mariodebono, without checking I suspect this could throw a CORs error? Do you have access to any backend service or workers?
mariodebono
mariodebono5w 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
Daniel_Kinde5w ago
Hi @mariodebono Yes that is all good 👍