🟣 #GatsbyJS: Email signup form for ConverKit 🟣
Newsletters are a great way to market your content & build a following but to build your email list you need a way for people to sign up. Here's how to create an email signup form on GatsbyJS. 1/17
1️⃣ Designing the email signup form component
Before we can build the functionality to facilitate the email signup we need to build the form people are going to use to sign up. Here's the code for mine and an example of what it looks like. 2/17
1️⃣ part 2
The code in the previous tweet can be broken down into three individual components:
👉🏻 Outcome Message Container: Displays feedback after submitting 👉🏻 Email Signup: Actual form elements 👉🏻 Email Signup Form: Adds some extra elements like text and styling
1️⃣ part 3
The main section we will focus on is the EmailSignup components, let's break it down in more detail:
👉🏻 1: Gathering values from util functions. 👉🏻 2: Form Components 👉🏻 3: Displaying feedback to the user
2️⃣ Submitting a form
So, what happens when we submit a form?
When we fill in the form, the useForm hook allows for the values to be set to state. Then once the form is submitted, it passes the values into the 'submitEmail' function within the 'useEmail' file. 5/17
3️⃣ Handling the submit
Inside the 'useEmail' file we do a series of things:
👉🏻 Reset all submit state to default values 👉🏻 Check there was an email entered 👉🏻 Post the form to the serverless function 👉🏻 Await & handle the response
See attached for a breakdown 🖼️ 6/17
4️⃣ Serverless Function
If the 'useEmail' file receives an email then it will be posted to the serverless function which handles:
👉🏻 Check for required fields (email) 👉🏻 Posting to ConverKit for the signup 👉🏻 Returning a success message back to 'useEmail'
5️⃣ HTML Codes
Inside the 'useEmail' file, once we have a reply returned to us from the serverless function, we check to see what HTML code we get back:
✅ 200 ❌ >= 400 && < 600
If you want to read more check out:
6️⃣ Setting the outcome message/state
In the 'useEmail' file, we set multiple states depending on the HTML code. These are:
👉🏻 setLoading: used for waiting for the serverless function 👉🏻 setError: true if an error 👉🏻 setMessage: Message to display to the user
7️⃣ Displaying the message
Once we have set the message and error state this is returned to the original emailSignupForm Component to be displayed to the user.
🌟 Complete? 🌟
This is now the base setup complete, we can sign emails up to our newsletter & display the outcome to the user.
However, you may have noticed a few mentions to 'chilliIsCool' in my code, what's this?
This is a honeypot, let's take a look.
🍯 What is a honeypot?
"It's a sacrificial computer system that's intended to attract cyberattacks, like a decoy."
We are creating a field in the form that human users won't be able to see but computers will.
So, any bots populating the form will be trapped.
🍯 Discarding submissions with this form
This field isn't required to be filled in as it'll only be filled in by bots. We pass this field to the serverless function and check for its existence.
If it does exist we return a status code 400 and a custom error. 13/17
🍯 Hiding the form field
Believe it or not, we can just use a simple display: none on the honeypot field to hide it from view for human users.
This works as the DOM element is still there for computers to detect in the form but it won't show it for users. Awesome 😄
❓ Questions ❓
Now we're done, we have a fully functioning form that traps spam submissions from bots using a honeypot.
If you have any questions please drop them down below and I'll get back to you as soon as I can.
This is thread 28/28 in my February Twitter Thread Challenge. 📆
If you're interested in following along in my challenge or like this thread's content and want to see more please consider retweeting it for others to see and following me for future threads. 😀 17/17