Forms, along with mobile-navigation-menus, are some of the more difficult concepts to learn to build from scratch.
The front-end design and UX is pretty simple but it’s the magic that happens after a user hits the submit button, that makes forms difficult.
Most site admins need the form submission to be visible in their email, but also dropped into their CRM or stored in a database. If you storing in a database, you will need to build a simple backend UI with CRUD function for the form submissions, (So you don’t manage via database directly).
In a non WordPress environment is it better to use a company like form back end or use send grid API? Can you use send grid API in a Next JS application that uses next export for static build? Although this probably isn’t the most common way it is possible, “can use the SendGrid API directly inside of a clientside application, but instead we’ll be working with an API key to interact with the SendGrid API”
Managing form submissions in your email is likely not enough…
Spam protection is another consideration for forms. “Recaptcha,” “CSRF tokens,” and whatever other implementations are out there to slow down the spam.
Provider Cost: Third party solutions all cost money, albeit not that much. There is typically a free tier also if you can handle their branding and lack of certain feature like “re-directs.”
There are many options and they depend on a few factors including the chosen stack/hosting solution. These include static, hosted, WordPress, Netlify Forms etc.
You can use filters with Gmail too, for more advanced spam controls. Go to Settings > Filters > Create a new filter and you can add the email address, contact’s name, just the domain (e.g., @itworld.com), and other criteria. Check the box “Never send it to Spam.”
Note: A lot of times in WP the sender of your submissions will be from “wordpress@yoursite.com”
This article goes over a few options. Formspree and (formium.io formik’s headless form builder).
Here is another
formik caught my eye for React forms, 1.4m weekly downloads
Plenty of plugins articles. Probably deserves its own post. Need to pay to see form results in Dashboard and have access to full form features. Emailed submission is pretty standard feature. Spam is a thing so handle it with reCAPTCHA and other.
Store in database and use SendGrid to send email. MongoDB and SendGrid have generous free tiers. Your on your one for spam protection.
Need to host your front-end on Netlify. Easy to implement, basically just html attributes and provides build-in spam filter with recaptcha. Need to login to your Netlify Dashboard to check out. Set data-netlify attribute to “true” for each input. Works for file upload as well. Can download form submissions as CSV.
How many emails per months and forms needed?
Typekit, Survey Monkey, Convertkit (indie Hackers).
Watched this video from dcode.
Most of my forms have used Bootstrap (Car Cost App) or a WordPress plugin. You need to know how to style forms with basic html/css.
Usually each label and input is inside of a div. This way you can use flexbox to style things on their own line and avoid “br” tags.
Use placeholder instead of label? Label is above and placeholder is inside the field.
If using a label: Need a “for” attribute on the label that’s value matches a “name” attribute value on the input. Also thing you need ids to associate with a label.
Line height is crucial
Front-end validation styling
HTML input type of text is only for single line inputs. If you want a larger “message-like” field you need to use the textarea element instead of the input element. You can specify row and cols to create your height and width. You will notice a resize feature in the bottom right corner. You can disable this b targeting textarea and adding {resize: none; min-width: 200px;}
Although there is an input type of submit is is more common to have a button inside of a form-item div. The button has a “class” of whatever and a “type” equal to “submit”.
Update your form’s action attribute or add custom attributes to a mail-sending service provider that provides an API or similar functionality:Some of these providers, especially the less expensive ones, only have the ability to persist data via email (there’s no dashboard). Here is the mother article from CSS Tricks.
Netlify forms is probably the best solution for built-in validation and spam protection. This route prevents you from having to have and host any back-end whatsoever, Netlify forms is essentially doing this for you. This means you have to host on Netlify though.
Here is one called 99inbound. Copy and paste the endpoint URL into your form, or use the JSON API from JavaScript.
formbackend seems to be a cheaper solution. There free version has a submission page that you can bypass with a custom redirect with a paid plan. I went for the $5 a month starter plan to get the custom redirect but in a react application you actually don’t even want the form to be submitted and so you need a way to submit the form via a fetch or access request. This seemed possible and I was able to do it with postman They also have their own JavaScript utility that is like built on JQuery? They didn’t have any good docs on how to set up with React so I actually bailed on them and switched over to email.js. I liked the UI though and service seemed legit. I also like that you don’t have to give them permission to your Google account.
Here is a video that shows formsubmit.co. After taking a closer look it allows a redirect and some other cool features for free like an editable thank you forwarding page. You can disable their recaptcha page with their branding but this is not recommended. The downside with formsubmit.co is your email address is directly in the form action.
Formkeep seems reasonable priced as well.
FormSpree was a name that came up in a previous article here that I’ve read before. You are limited to 50 emails a month but for $10 a month you 10x this number and get access to their API. I tested sending an email on the free tier with the re-captcha and you get a page with their logo and colors. Don’t get a custom redirect until you are on second paid tier. Wat you would expect for free.
StaticKit
Formik
Email.js
I actually dropped a formbackend.com for this site because it just seemed a little bit easier to get going with React. The form submissions go right to the email so there’s not a UI. And even the free plan has access to the API and it seems like the pricing is cheaper. Something I need to dig and do a little bit deeper is the fact that you have to give them permission to be able to send emails from your Google account which just seems like you are opening yourself up to some risk. You have to right, especially since it just mentioned they can send email from your google account. May want to have a dedicated Yahoo or burner email account instead and then pop3 into your main inbox.
Also, when it comes to the API keys in the front end code shouldn’t you protect these with environment variables? Here is an article about it being reasonable to leave API key in source code for this use case. The author basically says she emailed the team at emailjs and this was their reponse:
“Indeed, someone could copy your code, but they will only be able to send _your_ templates, with your content, and will not be able to send a custom email with their own content (spam). A better way to think of EmailJS is not as a service that allows to send email, but rather as a service that allows triggering pre-built emails from the client side — similar to the way services like Intercom work.
That is why we always recommend composing a template with different dynamic variables, and not using the single dynamic variable and passing whole email content through this.
You can also define a whitelist where you can specify from which domains requests will be processed, requests from other domains will be ignored.”
You could also have a static front-end and build/host your own decoupled backend. Have the front-end form submit to this custom backend (heroku) to run some validation, store in database, and fire off email notification with send grid (free account to send 100 emails a day). Can bring in reCaptcha (api from Google Free up to 1 million Assessments / Month*) as well. Here is an article by someone who went this route. May be cheaper but also sounds like more work for a simple contact form. A good skill and ability to have though. You can also build a backend UI for managing responses, (view, delete, etc.) so the data isn’t just mixed up or lost in your email.