Sorry if this issue has been posted, I searched but couldn’t find duplicate.
My challenge:
- Set up an email subscribe form with a field for email address in my react front end and use the form data from my IS campaign sign up form (found in the HTML Code(only) tab of the sign up form designer
- In the confirmation (optin) email sent to the newly subscribed email, make sure the text in the email is all styled with the Helvetica font (not default of Georgia)
Explanation
I have created a sign up form as part of a campaign in IS. It is a simple email subscribe form with a single field + submit button. On successful submission of an email this kicks off a sequence that sends the optin confirmation email out to the email address provided.
In my react front end I have recreated the form and used the browser fetch API to submit FormData, where I have added all the hidden fields from the sign up form as shown in the HTML Code (only) tab in IS.
Issue #1
Upon submission from my localhost dev environment of the form from the react front end, the POST request URL (which is the same as the form action URL in IS sign up form) prompts and error, which I can’t progress beyond. The error I am seeing is:
Failed to load https://[instance address]/app/form/process/[form id string] Response for preflight is invalid (redirect)
Any suggestions on how to submit the form successfully using fetch from react hugely appreciated (more code to illustrate what I am doing below).
Issue #2
The confirmation optin includes some hard coded text/links for the optin confirmation link, which is styled by default with the Georgia font. Everything else (email templates) I have been setting up for this brand identity uses Helvetica font (as I couldn’t load a custom font of my own choice I chose the nearest sans-serif font available with IS). However, the ‘to confirm your request’ and ‘owner.signature’ elements of this particular email are compulsory and the only action that can be taken on clicking them is to change a limited settings configuration modal that doesn’t allow changes to the font. So these sections have to be displayed using the Georgia font which clashes with all the other Helvetica sections around it. I am sure this must be achievable - to be able to use a consistent font face, but for the life of me I can’t find out how to do it. Anyone know how?
Additional code to explain react set up
In the render function of my stateless functional component I have set up the basic subscribe form like this (I am using material-ui with react):
Then on submit the form executes the handleClick handler which includes the following:
// setup the data request object
const data = new FormData(event.target);
data.set('inf_form_xid', '123abc123abc123abc123abc123abc122');
data.set('inf_form_name', 'Sign Up Form');
data.set('infusionsoft_version', '1.70.0.58683');
data.set('inf_field_Email', event.target.email);
fetch(
'https://hostid.infusionsoft.com/app/form/process/123abc123abc123abc123abc123abc122',
{
method: 'POST',
body: data,
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/x-www-form-urlencoded',
},
}
).then((response) => {
console.log(JSON.stringify(response));
success.set(true);
});
where I am using MobX observable to hold the value of success so I can us it to provide user feedback (not really important to the main issue).
I thought that setting up a simple email subscribe form would be relatively straight forward and I am hoping to avoid having to go through the Rest API to make this happen. Either way if anyone has experienced both or either of these issues and can provide insight I would be grateful. Thanks