A backend is typically required to handle form requests. So if you want to add a contact form to your serverless static site such as your portfolio or personal website, you'll likely need to use a third party service to handle the requests. There are many services like this, but I recommend using 99inbound— it's free and easy af.
Creating the Account ⚙
Note— When you create an account, use the email you'd like the contact form to send emails to, as you will not be able to change this once your account is created on the free plan.
You will be taken to your dashboard where you can configure your forms and end points.
Forms vs. Form Endpoints 🤔
Forms
You can create a form directly on 99inbound using their UI. This will provide you with a <div> containing your form and a <script> to handle the request.
Form Endpoints
Form Endpoints allow you to use your own forms but have submissions processed by 99Inbound.
For full customizability, I would recommend just building your own form with HTML/CSS and using the provided Form Endpoint as a POST action for the form.
Configuring the Form Endpoint ⚙
Create a new end point by clicking the '+' button.
Fill out the title and submission text. You can leave the redirect URL blank.
Scroll to deploy.
Copy the endpoint
Within your form element, paste the endpoint as an
actionattribute, with amethodofPOST:
<form action="ADD_ENDPOINT_HERE" method="POST" target="_blank">
When a user submits the form, they will be taken to your submission message. Use
target="_blank"like above to launch this in a new tab.
I assume you're already proficient enough with HTML to build forms, but I provided an example below.
Building the form 🛠
Creating your own HTML form is especially easy with Bootstrap.
Here's one built with Bootstrap using FontAwesome icons to get you started:
Stopping Spam 🚫
It's highly recommended you also include the provided "honeypot field". This works as a hidden field to normal users, but is designed to trick spam bots into filling out the "fake" field so that spam can be filtered from your inbox.
Testing 🧪
Add your form to your site / app.
You can test your form even in the development environment and verify that an email is sent to the email you signed up with to ensure it's configured correctly. It may take a few moments for the email to go through.
You will also be able to see all of the submitted form entries directly from your dashboard.
Top comments (2)
You can get some really beautiful responsive free hugo themes for your next static website.
May I suggest you also look at the static website forms backend fabform.io