Best practice for doing forms on static JAMStack sites like Flowershow

[rufuspollock]

What are the options for forms for Flowershow sites?

Would love some documentation about this (later we can migrate to docs) ... so that we know best practice (and options) for doing forms going forward

• Using netlify forms
• Using sendinblue
• Using jamstack forms services e.g. getbasin etc
• ...

Things to answer

• What have people tried out
• What are pros / cons?
• What is recommended approach?
• Howtos for specific cases

@khalilcodes @olayway can you share your notes / experiences ...

[rufuspollock]

@khalilcodes can you comment on this 😄

[rufuspollock]

We discussed this at length in this datopian issue 275 and converged on using sendinblue with simple html. Here are the very useful notes from there from @olayway

---

Our needs

Forms:

1. on static sites
2. custom styles
3. spam prevention
4. validation
   (5. possibly custom behavior, i.e. no redirect and display message on the same page instead) better: custom redirect pages

Mail service

1. Spam prevention
2. Mail notifications (with all form data included)
   (3. Custom redirect pages)

Current situation

datopian.com - Mailchimp

We're currently using Mailchimp forms embedded using iframes as a temporary solution, because of issues we encountered when we tried using HTML form submissions or sending requests to Mailchimp API using a serverless function on Cloudflare as a proxy.

(Current) Issues with iframes:

• They don't look good
  • Contact form doesn't match the rest of the page style
  • Vertical scroll in the contact form (or large blank space after form submission if we get rid of scrolling behavior)
  • We can't adjust the style of the newsletter form, e.g. have two form fields in the same line

Issues with regular HTML form submissions:
This works but the default redirect page fails to inject a URL of the starting page (next.datopian.com) in an href of "Go back to home page" (or sth like that) link/button with the following error:

Failed to execute 'insertBefore' on 'Node' ...

So the user can't go back to the home page, and after clicking on the button some weird form errors will show up.

We could create our own custom redirect page though. It's possible to use it instead.

Issues with Ajax requests:
Since Mailchimp is not CORS-enabled, sending requests to its API needs to be done on the proxy server. We tried that, and it worked, but we would have to spend some time to make sure the correct headers are set in the proxy when sending a response to the client.

From Mailchimp dev docs:

![[Pasted image 20230215122042.png]]
https://mailchimp.com/developer/marketing/docs/fundamentals/#user-api-access

Official Cloudflare example of a CORS headers proxy we could use: https://developers.cloudflare.com/workers/examples/cors-header-proxy/.

Issues with Mailchimp notifications
We can't include all the information from the Contact form in the notification email. Full form data can only be viewed on the Mailchimp platform.

LifeItself - Mailchimp ❌

life-itself/community#327

• uses JSONP, a hacky way to bypass the cross-domain policies in browsers (great explanation here: https://stackoverflow.com/a/3840118)
• not recommended, not secure
• uses jsonp package, which hasn't been maintained since 6 years (https://github.com/webmodules/jsonp)

Flowershow - Netlify forms

• simple Netlify form ($19/m now we are over 100 submissions a month)
• manual copy and paste to a mailing list in Mailchimp

Notes on CORS

• when CORS is not enabled on the form service server, a browser sending a request to that server will rely on the same-origin policy, and thus it will throw an error
• why we can't just use API keys on the client to send Ajax requests to e.g. Mailchimp?
  • using API keys on the client basically makes them publicly seen (easily discoverable by checking requests being made to the server); this means, that sending POST requests - Ajax, not regular form submissions with POST method - can only be done safely server-side

Possible options and evaulation

Regular HTML form submissions

• pros
  • highly customizable
• cons
  • not much control over UX
• neutral
  • form submission (if not intercepted) will always redirect a user to a different page
    • seems to actually be a good UX as a user is sure that the form was actually submitted successfully
    • very popular approach

Ajax requests

To NOT CORS-enabled form service API (using a proxy server)

• pros
  • full control over the UX and looks
  • we can redirect the user but we don't have to
  • we can probably make it work with any non-CORS-enabled service
• cons
  • extra work needed to create and maintain a proxy server (or serverless function acting as a proxy)

To CORS-enabled form service API (e.g. Basin)

• pros
  • full control over the UX and looks
  • we can redirect the user but we don't have to
  • we can probably make it work with any non-CORS-enabled form backend, not only Basin
• cons
  • additional element in the data flow we need to take care of
  • extra work needed to move contacts to mailing service (e.g. Mailchimp or Sendinblue)
    • although there is a ready zapier integration: https://zapier.com/apps/basin/integrations/sendinblue
  • additional cost (~$18/month for multistep zaps on Zapier (or free if the above one is a single step one) + ~$10/month for Basin (1K Submissions /mo) + mailing service cost e.g. Sendinblue)

Iframes (hosted by the mailing service)

• pros
  • quick to create and add to embed on a website
• cons
  • not really customizable
  • no control over UX at all
    • can adjust the height of the container if the iframe content changes
  • hard to make them look good with the rest of the page

Recommendation

Since we have a green light for switching to Sendinblue:

• test regular HTML form submissions with Sendinblue
• if there are some issues, use Basin + Zapier integration with Sendinblue (can be costly, but not sure).

[rufuspollock]

Further notes re send in blue:

... Saw that sendinblue give out html. it's a bit messy but it does submit to a proper endpoint (like basin does) and i suspect you could clean out a lot of the stuff and it would still work (which would mean you could then restyle it).

We actually used sendinblue html form back for the possibility now endorsers form 3y ago - see https://possibilitynow.lifeitself.org and https://github.com/life-itself/possibility-now/blob/master/site/.vuepress/components/EndorseForm.vue

[rufuspollock]

@olayway could you summarize the steps in a sendinblue solution here e.g.

• Create X in sendinblue
• Add Y
• Paste this HTML here

If we can point to examples e.g. in life itself community repo that would be cool!

[rufuspollock]

I've always liked Basin (usebasin) and you can connect it to Brevo (SendInBlue) see e.g.

https://pipedream.com/apps/sendinblue/integrations/basin