Build A Contact Form With ContactForm.dev

In this article, we will walk you through easy setup your contact form with contactform.dev.

Why

For Developers:
If you are a busy developer that working on a great product but no time to create email sending script and backend for stroing contact submissions, Contactform.dev is the perfect solution for you.

For Non Developers:
You don’t need any coding skills to desing and connect your form with contactform.dev. Just follow this article and you will be a master of forms.



Setting up an account

In order to continue this article you need to have an account on contactform.dev. This will take only 2 minutes to create. Click here to create your account. Once you created your account please login using your email and password.


Creating the endpoint

Click on the ‘MY Forms’ in the top navigation. Then click on the ‘Create a From’ button. Enter a name for the form and an email to get a notification when you get a submission. You can leave the thank you page blank if you want to create a AJAX from but otherwise you can add a link to your thank you page. That’s you need to do in order to create an endpoint. Once you created the endpoint you will be redirected to the forms page and there you can copy the endpoint or find more information about how to connect it.



creating contactform endpoint


Designing the form

Once your are on the forms page click on the ‘Design Form’ Button. This will bring you to the drag and drop form builder. You can desing your form easly with this editor.

drag and drop contact form builder


Connecting the endpoint

If you are happy with the design you just did with your contact form, CLick on the ‘Get The Code’ button and Copy the HTML in your webpage and CSS part in your css file. If you don’t have a CSS file, you can create a style tag on your HTML page and keep the CSS code there.


In the HTML code you will see the start of the code like this:
<form method="POST" action="#">

All you need to do is go back to your Forms page in contactform.dev and copy your endpoint and replace the action with your endpoint.

<form method="POST" action="your-endpoint">

Now you have a fully working contact form.



Getting Submissions


All the submissions will be available on your form submission page. Simple click on the submission button in the forms page.

Submission inbox

Thank you.

Get The Best Of All Hands Delivered To Your Inbox

Subscribe to our newsletter and stay updated.