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. Headlessforms: Say goodbye to tedious and monotonous data entry by converting your forms into a digital experience. Their backend solution allows you to connect your custom online forms with the headlessforms backend and receive submissions in minutes — all by clicking, not coding!
This service offers you a great level of flexibility in designing the forms and managing them over time. They make it easy to create websites and landing pages, form solutions for collecting data, newsletters, surveys, and feedbacks. There are plenty of options for easily achieving your goals and objectives.
Headlessforms provides a clean interface for creating and using forms in your project. When using headlessforms, all you need to do is place the provided form endpoint to the action attribute on the form tag of the HTML code of your form. Following is an example.
Step-by-step tutorial on how to build web forms without coding or installing any plugins. You just need a browser, that’s it!
How to connect to your form?
For them to be able to receive submissions from your form, you need to update the action attribute with the Headlessforms endpoint seen below:
https://app.headlessforms.cloud/api/v1/form-submission/nRNLasWWzjIf you already have a form, update the action attribute so it points to Headlessforms. Your form tag should look like this:
<form action="https://app.headlessforms.cloud/api/v1/form-submission/nRNLasWWzj"
method="POST" enctype="multipart/form-data">
<input type="file" name="attachments">
....
</form>Step 1: Visit the website of headlessforms, sign in, or register for your forms if you don’t have one already.
Step 2: Get started with the building of your form. Once you access the dashboard, you can create from.
Step 3: Your forms will perfectly match your website’s design since headlessforms inherit your website’s CSS, giving your forms a custom-branded look.
Step 4: Build high-quality HTML forms in minutes. Just put your custom Headlessforms Endpoint in the action of your static Form and start collecting data. Use them anywhere.
Step 5: The next step is adding the required questions in the dedicated fields. Choose any kind of input fields and manage with headlessforms backend.
Step 6: Place it on your web platform and you can share your form with others using a web URL.
Headlessforms is a startup dedicated to changing the way you build, send and automate forms. Unlike other form builders, it is made from the ground up to help boost your turnaround time. Once the leads start rolling in, you can send them to 3000+ destinations (like CRMs, Google Sheets, or email) via our built-in Zapier integration or send instant lead alert emails via our powerful automation tools.
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"
method="POST">
<input type="text" name="name" />
<input type="email" name="_replyto" />
<input type="submit" value="Send" />
</form>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/" />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.
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"
method="POST">
<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" />
</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"
method="POST">
</form>
<!------------Use of access token/code within action attribute------------>
<form action="https://formsubmit.io/send/0f666c01-5zb6-4ef-8ce2-3ub453e8k0d9"
method="POST">
</form><form action="https://formsubmit.io/send/0f666c01-5zb6-4ef-8ce2-3ub453e8k0d9"
method="POST">
<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">
</form>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 hiddenname="_formsubmit_id" honeypot field. This service also has a contact manager within the 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" />
</form>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.
https://getsimpleform.com/forms/xxxxxxxxxxxxx/editxxxxxxxxxxxxx should be replaced by the actual private access API token. The anti-spam configuration process involves the provision of the Akismet API key and the formatting of the notification message.To view all the form submissions, use the following link.
https://getsimpleform.com/messages?api_token=xxxxxxxxxxxxxxxxxxxxxxxxxx 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>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"><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">
<span>Send</span>
</button>
</form>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.