Sign up for updates form on blog posts and main page

[rufuspollock]

When i read a blog post I want to sign up to get regular updates so that I hear about future developments

When I read a blog post I want to see an offer for a free course so that I sign up and get the course and are kept informed of future developments

Acceptance

• [x] Design of form
• [x] Create the form and form component ✅ 2023-05-05 commit https://github.com/life-itself/diginomics/commit/a0e02821d5911ffc5fe523367b00e448a949fc0b
• [x] Insert in relevant locations ✅ 2023-05-05

Notes

Discussion 2023-05-04

graph LR

d[Our page]
brevo["Brevo (sendinblue) endpoint"]

d --submit--> brevo
brevo --redirects--> dsuccess[Our Success page]
d --submit error shows errors--> d

We want to use simple html forms ...

Questions

• [ ] How do we handle success / confirmation ✅2023-05-04 we can use a confirmation page (isn't quite so nice as a in place but hey)
• [ ] How do we handle errors given Brevo won't do it? ✅2023-05-04 given simplicity of form we can just use html5 stuff (?)

Desire is ...

• Want to edit in my app quickly and easily
  • Avoid: using Brevo as form editor and having to move back and forward e.g. editing forms in Brevo and then copying and pasting into a JSX component ...
• Want form submissions straight into my main database and triggering further stuff e.g. marketing

[rufuspollock]

@khalilcodes can we get a separate "sign up for updates" form - and can we document somewhere how these forms get created so i can do this myself in the future?

[khalilcodes]

@rufuspollock here are some notes ...

• Using fetch: It is possible to submit a form and create a contact in Brevo successfully using a fetch request but this has two main issues ..

  1. The response of the fetch req does not generate any info, and we need that to do any further actions eg. redirect or handling state.
  
  2. We have to use mode: no-cors which is a no no for security.

• Using form's action: Doing <form method="POST" action="..."> with correct input prop values (id + name) being same as in Brevo's generated html are enough for the form to submit succesfully. After submission, we are redirected to a Brevo generated confirmation page. As seen in the settings this can be a custom page from our site (eg. pages/thank-you-for-signuo).

  . The above page is also shown even on submissions of already subscribed users, which is ok imo.

My 2c is that the second option is the goto method if we want custom, simpler and least amount of jsx. In this case the code would just be ...

<form method-"POST" action="...">
  <input id="EMAIL" name="EMAIL" ... />
  <button type="submit">...</button>
</form>

The only reason for using Brevo's html and script tag (current setup) was to not redirect the user to another page after the form submits. If that's not a concern then I think we can replace.

[rufuspollock]

@khalilcodes great summary and agree with going with option 2.