How to setup Form to Email on your website, the modern way

How to setup Form to Email on your website, the modern way

Most people that have tried to set up form to email on their website or landing page will know it can be a hassle.

Firstly you would normally need to know at least some backend code (like PHP) to do the actual sending of the email or even if you just use a mail sending library like PHPMailer.  

Then you also need to have website hosting that supports PHP or whichever coding language you are using to send the emails, which means if you are hosting a static website on a CDN, this solution just won't work as backend code cannot traditionally work on CDNs or that type of hosting.

Lastly, you need to consider deliverability of the email. If your chosen backend script sends the email via the server your website is hosted on, then there is a higher possibility that the email could end up in your spam/junk mailbox. This is because shared hosting servers could have been used by other hosting customers to send spam in the past and you would just not know about it.

So as you can see, sending a simple form to email can prove to be a nightmare involving backend coding/coders, hosting accounts and email deliverability issues.

Form to Email the new way

Now, what if I were to tell you, you don't need any of the above. All you need is a simple endpoint address provided by a form endpoint provider like Hyperforms, that takes seconds to generate, can be used on pretty much any hosting environment and has industry leading email deliverability?  Sounds much better right? Something that can be a headache and take hours, can now be done in minutes and without worry. Here's how:

Setting up form to email in minutes

Create your HTML form on your website or landing page however you want. This could be a contact form, lead generation form or simply a form to collect email addresses for a newsletter.

Below is an example of a contact form with fields for Name, Phone, Email and Message.

<form action="" method="POST">

    <label for="name"> Name: 
    	<input type="text" name="name" id="name">
    </label>
    
    <label for="phone"> Phone: 
    	<input type="text" name="phone" id="phone">
    </label>
    
    <label for="email"> Email: 
    	<input type="email" name="email" id="email">
    </label>
    
    <label for="message"> Message: 
    	<textarea name="message" id="message" rows="4"></textarea>
    </label>
    
    <button type="submit">Send Message</button>
    
</form>
Basic HTML contact form structure

Now, in the above code example, notice we have left the form action blank. The form action attribute is normally where you would enter the script that will handle all the backend code and actually send the form as an email, but by using a form endpoint service like Hyperforms, you don't need to worry about that.

If you haven't already, head over to Hyperforms and create yourself a free (Personal) account, you can use that completely free for up to 50 form submissions. Once you are logged into the Hyperforms Dashboard, lets create a form.

Create a new Form Endpoint

From the Dashboard, click the New Form button.

Dashboard showing New Form button

Then next up, you will need to give your form a Form Name at least. The Send Form Notifications To can be left as the one you signed up with and the Redirect URL can't be used in the Personal plan.

New Form details

Once you have given your form a name, click Create Form and you are done. That was easy right?

The first thing that will pop up is your freshly created, unique endpoint address as you can see below:

Form Integration Details

Click Copy which will copy your unique endpoint address to your clipboard, then head back to your HTML contact form you created earlier and paste your endpoint address in your forms action attribute.

<form action="https://link.hyperforms.app/f/HF0BooU5GdUQZoN" method="POST">

    <label for="name"> Name: 
    	<input type="text" name="name" id="name">
    </label>
    
    <label for="phone"> Phone: 
    	<input type="text" name="phone" id="phone">
    </label>
    
    <label for="email"> Email: 
    	<input type="email" name="email" id="email">
    </label>
    
    <label for="message"> Message: 
    	<textarea name="message" id="message" rows="4"></textarea>
    </label>
    
    <button type="submit">Send Message</button>
    
</form>
Basic HTML contact form with unique form endpoint address

That is it! You're done, you can now test and use your form! Now wasn't that far less stressful?

Hyperforms has a whole host of additional features you can configure and use but the point of this blog post is, form endpoints are fast, reliable and don't require any backend code or additional development. Pretty much any competent diy website builder can get this running in minutes.

Sign up for your FREE Hyperforms account today.

Show Comments