React Web App Sign Up Form

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):

Sign up to receive emails
Go

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

Were you able to figure this out? I have the same problem as your issue #1 with code that is nearly identical. In the past these submissions worked via CORS, but they no longer do.

I ditched this approach as couldn’t get it to work. Instead I built a mini web service to process tags and authenticated with the infusionsoft PHP sample, storing the tokens in a mysql database. Basically now I call the web service and check the user exists and if not create them (email is primary key) and then add a tag to the user. Then in IS I have a campaign set up to send out the optin email based on the tag.

Slightly long winded approach, but I couldn’t get forms to work and couldn’t find any solutions so explored the Rest API route, which does work btw.

If anyone else has an issue with the default fonts that you have no control over for optins, after a few attempts I did confirm that there is no control over this at all. It’s actually defaulted to Times New Roman, so for those of you using sans-serif fonts for this email you’re outta luck and will have to accept that this email is either not going to fit in directly with your brand or is going to look a bit poor. I have raised this as an issue as anyone trying to grow a business is doubtless trying to make it look consistent or build their brand and having a marketing solution that doesn’t give you control over the look and feel is a bit backwards. Shame as almost everything else seems to work very nicely.