DEV Community

Cover image for How to Quickly Add a Contact Form to a Static Website
Darian Nocera
Darian Nocera

Posted on • Updated on • Originally published at blog.darnocer.io

How to Quickly Add a Contact Form to a Static Website

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 action attribute, with a method of POST:

<form action="ADD_ENDPOINT_HERE" method="POST" target="_blank">
Enter fullscreen mode Exit fullscreen mode

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.
image.png

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.

✨TL;DR: Use free service 99inbound to create a form endpoint, and add this as the POST action to your HTML form.

Thanks for reading. Feel free to connect with me on LinkedIn!

Discussion (0)