How to Add a Non-Php Contact Form to Your Site

Jae Johns
2 min readApr 3, 2017

--

The Intro — Click Here for Article
Setup Free Hosting and Domain — Click Here for Article
Setup Free Database with Google Sheets — Click Here for Article
Link Google Sheet Database to Website — Click Here for Article
Add Javascript to Get Database Data to Loop — Click Here for Article
Add Search Function to Website — Click Here for Article
Add Non Php reliant Contact Form

This is the last article in the series of how to get a database-driven content management system with free unlimited hosting.

Unless you pay for hosting that has database capabilities or some sort of content management system integration, there isn’t a way to have a contact form on your website. This is because contact forms for the most part require php to send the user’s contact information through the server, so you can receive it on your end.

This is no longer the case, and I will show you can receive a user’s contact information in a extremely easy way.

With the power of Formspree, we only need to add a few lines of code to your website.

Add the code for a form:

<form method=”POST” action=”http://formspree.io/your-email-address-goes-here">
<input type=”email” name=”email” placeholder=”Email”>
<input type=”text” name=”first name” value=”” placeholder=”First Name”>
<input type=”text” name=”last name” value=”” placeholder=”Last Name”>
<textarea name=”message” placeholder=”Your Message”></textarea>
<button type=”submit”>Send</button>
</form>

In the action attribute of the form tag make sure to put your email address after the http://formspree.io/.

It is important to have a name attribute in all your input fields. This is because when you receive the date via your email address, you will need to know what each field is.

This is a sample data of what you will receive in an email after a user submits the contact form.

Notice how each field is named email, first name, etc on the left, then gives you the information on the right.

email xyz@htomail.com

firstname heya

lastname thereson

message can you hear me know

Detailed instructions on how to use Formspree can be found here.

Get more insights like this on my blog, jaejohns.com/blog

--

--

Jae Johns

Share my insights and experiences to help you become a successful creative and make a full time income doing it. More at jaejohns.com/blog