6 Ways to Add a Free Contact Form on Your Website

On with 0 Comment
A web contact form sketchNo matter the type of a website or a blog running on the internet, a contact page is one of the essential pages, a visitor can access and use if required. And, on this important page, a contact form is required to enable the visitors to send you their messages, in an easy way. Today, we're going to learn about some of the best options to easily integrate a contact form on a website and that too, for free. No matter the type of underlying web software (CMS or static HTML) powering a website, these flexible contact forms work seamlessly on each one of them, without any issues. Though website and blog owners using a content management system can opt for a plugin, using the solutions mentioned below can give them a light and fast contact form that consumes almost no server resources. You'll need elementary code copy-pasting skills to embed these contact forms on a website. This means, even a layman can do it quite easily. So, let's get started and learn how we can easily embed an easy-to-use contact form on the desired webpage.

A web contact form sketch
I always advise trying such feature additions on a demo website in a test environment. Therefore, in this case, too, I'll advise the same.

No matter which contact form solution you're picking from below, make sure you're doing enough CSS customization to gel it nicely with your existing theme. Let's not wait further and check out all the available contact form solutions.

1. Jumprock: This simple and reliable contact form is easy to configure and it just takes a minute or two to integrate the same within a website. To get started, you'll need to provide the destination inbox address where you want all the emails to arrive and a unique alias for your contact form.

Thereafter, you can start with the following basic web form HTML markup.

<form action="https://jumprock.co/mail/ALIAS" method="post">
<input type="text" name="email" placeholder="Email Address" />
<input type="text" name="message" placeholder="message" />
<input type="submit" value="Contact Us" />

While creating the ALIAS during the initial setup, I'll advise using your site's domain name for the same. So, it may look like this in my case.

<form action="https://jumprock.co/mail/freshtechtips" method="post">

The example web form HTML markup above only includes email and message fields. But, one can include some of the common contact form fields in addition to these two basic fields.

These additional fields are as follows.

<input type="text" name="trapit" value="" style="display:none" />
<input type="text" name="name" />
<input type="text" name="phone" />
<input name="subject" value="Custom Subject Tagline" />
<input type="hidden" name="replyto" value="%email" />
<input type="hidden" name="cc[]" value="example@demo.com" />
<input type="hidden" name="bcc[]" value="example@demo.com" />
<input type="hidden" name="after" value="http://www.yourdomain.com/destination-page/" />

The name="trapit" field is a honeypot in an invisible form to deter spam entries. I'll strongly recommend including this field in your web form.

The next two name="name" and name="phone" fields are quite common and obvious. If you want to capture the name or phone number of the sender, include one of these fields in your contact form.

In case you're using multiple web forms on different web pages on the same website, configure the name="subject" field to let you instantly know from which page the details have been submitted by the visitor. Keep this field hidden unless you want the sender to provide his very own email subject.

The next optional name="replyto" field can be used to configure the 'Reply To' email address. Note the use of %email for the field's value attribute. This ensures that sender's email address is set as the 'Reply To' address.

Large websites having multiple administrators can take advantage of the name="cc[]" and name="bcc[]" fields to automatically send carbon or blind carbon copies of the submitted information.

And last but not the least, use the name="after" field to specify the web page where the user will be diverted after submitting the message.

Unless you're looking for a unique contact form with new custom fields other than the one mentioned above, the free version setup is more than good for most websites. I'm using this free contact form service for my own contact page with excellent results.

2. Formspree: The next one in this list is equally simple and reliable when it comes to quickly integrating a contact form on a website. Its free plan is powerful enough for almost all of the general users.

To get started, all you need to do is to embed the configured web form HTML markup at the right place on the web page and thereafter sending a dummy submission via that form to confirm the email address.

Following is the HTML markup to kick-start the integration process.

<form action="https://formspree.io/demo@youremail.com"
    <input type="text" name="name" />
    <input type="email" name="_replyto" />
    <input type="submit" value="Send" />

Here, you need to change the demo@youremail.com email address with your own address where you want the submitted details to be delivered. It'll be the same email address which will be confirmed after the first dummy submission.

After the confirmation, you can add one or more form fields mentioned below to complete the contact form integration process.

<input type="text" name="message" placeholder="message" />
<input type="hidden" name="_subject" value="Custom Subject Headline" />
<input type="hidden" name="_cc" value="buddy@email.com" />
<input type="hidden" name="_language" value="de" />
<input type="text" name="_gotcha" style="display:none" />
<input type="hidden" name="_next" value="http://www.yourdomain.com/destination-page/" />

Most of the form fields mentioned above are similar to those discussed in the first solution. So, I'm omitting the explanation of those fields. But, two of the fields need some explanation.

All the contact forms displayed by this service include the reCAPTCHA challenge to prevent spam submissions. By default, this challenge is presented in the English language.

If you want to display this reCAPTCHA challenge in a different language, use the name="_language" field with the appropriate language code value. For example, in the web form code shown above, we've used the language code value="de" to ensure the challenge is presented in the German language.

The second optional field that needs your attention is name="_gotcha" honeypot that works in addition to the reCAPTCHA challenge. Because the latter anti-spam solution works like charm, in most cases, you'll never need this optional honeypot field.

3. Getform: The name itself tells you're going to get a web form through this service. Unlike the two previous solutions discussed earlier, this one is a bit different when it comes to the configuration and integration of the contact form.

To get started, sign up for a free account and create your first web form within the dashboard. This will instantly give you the contact form wrapper HTML markup as shown in the image below.

A web form HTML markup
You can notice a cryptic action token (a long alphanumeric string) which makes your web form, unique. Once you have this skeleton HTML markup, you can add the desired input fields to create your very own custom contact form.

The advantage here is that you can add N number of custom input fields within your contact form. Here's an example.

<form action="https://www.getform.org/f/0f666c01-5zb6-4ef-8ce2-3ub453e8k0d9"
    <input type="text" name="name" />
    <input type="text" name="email" placeholder="Email Address" />
    <input type="text" name="message" placeholder="message" />
    <input type="submit" value="Send" />

The free plan of this service doesn't let you divert the user to a custom web page once he has submitted the details. But, the support for unlimited custom fields makes this service an excellent option for website owners looking for more than just a simple contact form.

This service also enables you to export all the submitted data in the CSV format. It also lets you add more people who may receive the form submissions.

4. Formsubmit: Let's take a look at the next contact form service. Quite similar to the previous one, this one too generates a unique access token for the web form.

But, it gives you an added flexibility to either go for the access token or use the email address for the form's action attribute. For example, the contact form can be configured in the following two ways.

<!------------Use of email address within action attribute------------>
<form action="https://formsubmit.io/send/demo@youremailaddress.com"

<!------------Use of access token/code within action attribute------------>
<form action="https://formsubmit.io/send/0f666c01-5zb6-4ef-8ce2-3ub453e8k0d9"

I'll recommend using the access token because it'll hide your email address both from the general public and from the spammers. And, here's the contact form HTML markup with all the essential input fields.

<form action="https://formsubmit.io/send/0f666c01-5zb6-4ef-8ce2-3ub453e8k0d9"
    <input name="_redirect" type="hidden" id="name" value="http://www.yourdomain.com/destination-page/">
    <input name="name" type="text" id="name">
    <input name="email" type="email" id="email">
    <textarea name="comment" id="comment" rows="3"></textarea>
    <input name="_formsubmit_id" type="text" style="display:none">
    <input value="Submit" type="submit">

The name, email, and comment fields are quite obvious and need no explanation. The very first name="_redirect" field diverts the user to a custom landing page once the web form is submitted with the message details.

Note: The access tokens used in this tutorial are only for demo purposes. Do not use them in your contact form HTML markup.

To deter spammers, use the hidden name="_formsubmit_id" honeypot field. This service also has a contact manager within account's dashboard. The good thing is that all form submissions can be quickly transferred to the contact manager with a click of a button.

5. Simple Form: This is yet another interesting and free contact form service. To get started, you'll need to provide your email address to receive two API tokens. These tokens are used to configure and manage the web form.

The first one is the form API token needed to configure the contact form. It's public and anyone can view it. The second one is the access API token needed to view form submissions and to configure the anti-spam solution.

The latter API token is private and one should not share it with anybody else. Once you get the API tokens, use the following contact form HTML markup to initiate the configuration process.

<!-- Use your public form API token for the form_api_token parameter -->
<form action="https://getsimpleform.com/messages?form_api_token=xxxxxxxxxx" method="post">
  <input type="hidden" name="redirect_to" value="http://www.yourdomain.com/destination-page/" />
  <input type="text" name="name" />
  <input type="text" name="email" placeholder="Email Address" />
  <input type="text" name="message" placeholder="message" />
  <input type="submit" value="Submit" />

The action attribute needs your first attention. We've used a dummy string xxxxxxxxxx for the parameter form_api_token of the action attribute. This dummy string should be replaced by the actual form API token.

The rest of the input fields are already discussed in almost all of the previous solutions and therefore need no explanation. You may notice that there is no honeypot input field in this contact form.

Then how to deal with spammers?

For that, you need to configure and integrate the Akismet API key with this web form. The complete instructions to do so can be accessed through the following link.


The dummy string xxxxxxxxxxxxx should be replaced by the actual private access API token. The anti-spam configuration process involves the provision of Akismet API key and the formatting of the notification message.

To view all the form submissions, use the following link.


Again, the dummy string xxxxxxxxxxxxx should be substituted with the actual private access API token. The message records also include the IP address of the user.

Because there is no restriction for the input fields, one can easily build a custom contact form through this service.

6. Pageclip: This web form processing service is ideal for users who're not familiar with CSS and HTML. The service provides the necessary CSS and JavaScript to configure and customize the contact form.

Its free plan is suitable for most website owners. After account creation, add your website details to start the contact form integration process. Start with adding the following JavaScript code right before the </body> tag within your website's HTML code.

<script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>

You may notice the file path contains a v1 string which indicates version first of the JavaScript file. At the time of your account creation, this string may change to v2 or v3 and so on. The next step is to include the following CSS inclusion directive right before the </head> tag.

<link rel="stylesheet" href="https://s.pageclip.co/v1/pageclip.css" media="screen">

Once both the files are integrated, add the following web form HTML markup within your website's contact page.

<form action="https://send.pageclip.co/{Your site's unique key}" class="pageclip-form" method="post">
  <!-- Add your custom input fields from here on. Make sure each field have a "name" attribute -->
  <input type="text" name="name" value="Name" />
  <input type="email" name="email" value="Email" />
  <input type="text" name="message" placeholder="message" />
  <button type="submit" class="pageclip-form__submit">

Spam submissions are automatically taken care of by the platform. Advanced users can also integrate the contact form with useful 3rd party services like Slack. Web form data can also be fetched in CSV and JSON format.

I'll recommend this web form processing service for users running their website through a static site generator. Apart from using it for the contact form, one can also use it to run one-page surveys.


Post a Comment