As developers, we know there are a million and one ways to make a form. There are WYSIWYG form builders, complex client-side form libraries and good-old plain HTML forms.

Generally, we need to have a backend to send our form submissions to that can handle and process the data of the form. FormJam aims to replace this part of your backend so you don't have to write it.

So why should you use an API like FormJam and not write it yourself?

---

In short...

> Because building a good Contact Form is deceptively time consuming.

I'm attributing this quote to myself, around two years ago, making my first Gatsby.js site for a client. 

You'd _think_ this is a simple, inconsequential task. However, actually, there's lots to think about.


## Building a form backend yourself
In order to build a good Contact Form backend, there are lots of different issues to think about that, don't appear to be huge, but altogether make the case buying vs building a lot more compelling.


#### 📩 Sending Email

The most common destination for a contact form's contents is to be sent to an email address. There's lots to think about here:

- Should you use your own email server e.g. Gmail or go with a provider API, like SendGrid or Amazon SES?
- You'll need to set up your domain's DKIM, DMARC, SPF records to send emails safely and avoid them going into spam
- You'll need to make a template for your email in HTML... 🤯  good luck trying to get it to display right on different browsers and screen sizes.


#### 📞 Integrate with your CRM or Support Desk
If you or your clients are already using a CRM or Support Desk system, it makes sense to integrate your Contact Form directly with these providers.

Oftentimes you can simply forward the emails to a hidden email address given by the support desk, but, if you want to collect more "custom" data and send it to the CRM, you will likely have to do a custom CRM integration.

If your CRM supports [Zapier](https://zapier.com/), you can probably save some time by integrating with your CRM via Zapier, which also lets you connect other destinations, but you still need to configure a Webhook, and that's only available with a paid plan.

#### ⛔ Spam Filtering and Blocking
Contact Forms are of course a target for spam from bots and bad actors alike. If you want to prevent spam submissions, there are a variety of techniques that can be used.

- Set up a Honeypot field - a hidden `<input>` which, if it's filled out, indicates that it's likely to be a bot filling out your form and not a human. If the honeypot is empty, it's unlikely to be spam.
- However, maybe don't name it "_honeypot"... there are definitely bots out there that know how to get round them!
- Use a Spam classification API like [Akismet](http://akismet.com/) or [OOPSpam](https://www.oopspam.com/) - though the APIs are reasonably simple, it's yet another integration to manage. What if these providers have an outage, does this impact your form's availability?


#### 📈 Analytics on Form Submissions
Over time, you will want to see how many enquiries came in through your website.

If you've integrated with your CRM, you may be able to get some data about the source of leads, however, as a developer, I tend to want to create custom events in an analytics product to track this.

However, this creates more issues, like:
- Which analytics platform should you use?
- How do you integrate with the analytics platform?
- What data should/shouldn't you share with the analytics product? Do you need to get additional consent or update a privacy policy?

#### 👮 GDPR Compliance, Marketing Consent, Privacy Policies
Unless you've been living under a rock (or far enough from Europe to never have to think about it), by now you will be familiar with the pain of GDPR compliance.

Most contact forms will include some kind of checkbox to confirm that you agree to the Privacy Policy of the website, and then a different checkbox to be contacted for marketing purposes.

Tracking your users responses to these is the role of a Consent Management Framework like [Iubenda](http://iubenda.refr.cc/R8RGVBL)'s. As Data Privacy laws become ever more enforced, it makes sense to set up a consent management system and integrate your contact form with it.

#### 🔒 Web Security
As hacks and data breaches are ever-more prevalent, Security is always a huge concern, especially when processing user data.

There are many things to consider, but some of the most important are:
- Make sure you're using secure connections (https) to send form data. Insecure connections are unencrypted and can be easily intercepted and read.
- Make sure you're _escaping_ any input you receive before you write it out to any emails - if you don't, your form will be liable to XSS (Cross-Site Scripting) attacks. If I submit your form with the following as a message, will it be interpreted as JavaScript?
```html
<script>function doSomethingBad() {}</script>
```
It's very easy to open up a large security hole without realising it if you're not careful.

Though Contact Forms seem like an easy topic, in the end there's lots to think about.

## Using FormJam instead...

We've thought about all the above considerations, and we've created a flexible, developer-friendly API to save you time in the initial implementation, and scale with you as your needs grow.

We handle emails, spam filtering (honeypot and API), analytics, integration with Zapier, as well as give you a form submission "inbox" where you can view the responses directly.


### Step by Step

#### Step 1 - [Sign up](https://dashboard.formjam.io/) and create a form on FormJam

You'll be taken to the FormJam dashboard where you can find your From Action URL:

<img src="https://formjam-web-uploads-bucket.s3.eu-west-2.amazonaws.com/Screenshot_2022_04_19_at_17_37_49_496c1f5ba0.png" width="1678" height="228" alt="Form Action URL">

#### Step 2 - Add HTML Form to your site and style it as you desire.

```html
<form action="https://api.formjam.io/form/<uuid>" method="POST">
    <input name="email" type="email" required />
    <input name="firstName" />
    <input name="lastName" />
    <input name="subject" />
    <textarea name="message"></textarea>
    <input name="consentGiven" type="checkbox" required>
    <input type="submit" value="Submit">
</form>
```

You can actually specify any field you want - FormJam will parse out some predefined fields (see [https://docs.formjam.io/api-reference](https://docs.formjam.io/api-reference)) and forward on any other fields that you send.

#### Step 3 - Set up your Form's destinations in FormJam

Decide if you'd like to send your form submissions to Emails, Zapier or both. This can be configured in the form settings...

<img src="https://formjam-web-uploads-bucket.s3.eu-west-2.amazonaws.com/Screenshot_2022_04_19_at_17_11_00_f08d39bffd.png" width="1227" height="736" alt="Form Settings">

---

And that's it, it's as simple as that. Each component of FormJam is deliberately simple, but, lots of simple yet time consuming tasks can be avoided by using it.

[Get started today for free.](https://dashboard.formjam.io/auth/register)


Why use FormJam? Build vs Buy your Contact Form backend

FormJam

Pricing

Documentation

Blog

Privacy Policy

Resources

Next.js

React

Gatsby.js

Guides

Patrick Menlove | FormJam