enformed.io User's Guide

Welcome to enformed.io. Our goal is to make managing your HTML forms as easy as possible. Our user's guide will walk you through how to set up a form using enformed and then how to harness some of the Pro features. We want to make this as useful as possible to you, so if you stumble anywhere across the way or think that our documentation doesn't quite explain what you need, get in touch! We'll get back to you as soon as possible to help you get up and running.

The following sections will help you understand how to set up your first form with us. The first few section talk about some basics, so if you feel comfortable, feel free to jump to later sections. Enjoy and thanks for choosing enformed.io!

Getting Set Up

You are here, so we assume that you have signed up for either our free or Pro account. We appreciate your interest and are sure that you are going to love how simple it is to manage your HTML forms with us.

This guide assumes that you already have an HTML form that you would like to submit. If you don't, no problem, just scroll down to the Tutorials section of this guide and we'll help you set up an HTML form. If you already have a form, continue on...

Here at enformed.io we will process your data forms and let you know what is going on in each of them. However, when a form comes to us, we need to know which of our clients it belongs to. To that end, we provide you with a special enformed.io token. Just place the token on your form's action and you're ready to go.

When you sign up, we'll send you an email that contains your enformed.io token. You can also access your token by logging into your enformed.io account. The token is found in two different places depending upon which type of account you use. No need to worry, we've provide examples of how to find your token for each of our account types below.

Token for enformed.io Pro account Token for enformed.io free account

Now that you have your token, simply copy and paste it into your opening form action attribute along with our url and the POST method.

<form action="https://www.enformed.io/abcdefgh" method="POST" >

Once you add the url and token all of your form submissions will come to us. We'll process the submissions and notify you when a new one comes in. Now, let's harness some enformed.io power. It's really easy to configure your form inputs. Just place a name attribute within your input, textarea, or select so we can identify the information that you would like to receive. See the following examples for how to set up each element.

Input with first_name as element name.

<input type="text" name="first_name" class="your-class" />
Textarea with message as element name.

<textarea name="message" cols="4" placeholder="Your message here..." >
Select with city as element name.

<select name="city" class="form-control" >
  <option value="NYC">New York City</option>
  <option value="BOS">Boston</option>
  <option value="SEA">Seattle</option>
  <option value="LA">Los Angeles</option>

That's it. The last step is to submit your form to us and you are done.

Submitting your form

Your form needs to know when it is ready to be sent. You need to specify a submit type either within a form button or input so that your page knows when to send the form submission off. As soon as it is sent, we will process the information and let you know what people are doing in your form.

Whether you choose to submit your form through a button or input doesn't really matter and it is up to you. Just be sure to let your form know when you would like for it to be submit and we'll do the rest.

Form submit with button or input

<!-- Submit with button -->
<button type="text" class="submit-button">Submit Me</button>

<!-- Submit with input -->
<input type="text" value="Submit Me" class="submit-button" />

You're done. There are a bunch of different custom names that you can add to your form elements if you would like to personalize how it behaves. If not, sit back, relax, and wait for the form responses to start rolling in.

Custom form elements

We want to make this as easy on you as possible, so we've created a few custom form elements that you can use to enrich your use of our product. Each one of these elements is invisible to your website's visitors; they are just for you. Note that each of these special attributes is preceded by a asterisk ("*") character. Each of these fields should be added as a hidden form input to keep them out of sight.

  <!-- This is how to make a form input hidden -->
  <input type="hidden" name="*redirect" value="https://www.enformed.io" />

It's important to say thank you. To that end, we'll send each person to a special "Thank you" page so they know their submission was successful and that you appreciate them. This happens by default, but if you want to change where people are redirected after submitting your form, no problem. Add the *redirect attribute to a form input and add the new URL as the input's value.

Input attribute for custom redirect using *redirect.

<input type="hidden" name="*redirect" value="https://www.yoursite.com" />

You like receiving email notification about your forms, right? However, maybe you are working for a client and you'd prefer to not receive notification each time someone answers their form. The *default_email attribute lets you say who the default email recipient should be. If you use this attribute, we will not send an email notification to the email registered with us.

Input attribute to change form notification email using *default_email.

<input type="hidden" name="*default_email" value="enformed@enformed.io" />

By default you can submit as many different forms as you would like. However, sometimes it can get messy when you want to start grouping form submissions and analyzing form data. Just add a *formname attribute with the form's name as the input value and we'll group your form submissions for each unique form. If you are using our Pro account, you can sort and filter all of your submissions by form name to really understand where you data is coming from.

Input attribute for custom form name using *formname.

<input type="hidden" name="*formname" value="enformedForm" />
*cc, *bcc

Want to send a copy of the form submissions to someone else? Use the *cc attribute and place their email address as the input value. If you want to copy more than one person, just separate the emails by a comma and you're set. You can send additional emails via cc or bcc.

Input attribute for adding additional email recipients using *cc.

<input type="hidden" name="*cc" value="user@enformed.io, other@enformed.io" />

If you would like to contact the people who submit directly from our email, simply add the *reply attribute and you'll be in touch with them in no time. One caveat to keep in mind... For this to work, you must have a form input named email so we know who you want to reply to.

Input attribute for email replies using *reply.

<input type="hidden" name="*reply" value="email" />

Keep evil robots from submitting form responses. Add the *honeypot input field that will be hidden from your user's input options. If there is a response (which is what happens when robots read HTML forms), the submission will be discarded.

Stop evil robots by using *honeypot.

<input type="hidden" name="*honeypot" />

Change the subject line of the email that is sent to you with each form submission by adding the *subject attribute. Want it to say "I love you and that's why I submitted this form..." ? No problem. Just add the text as the value for this input and you'll get what you want.

Input attribute for notification email subject using *subject.

<input type="hidden" name="*subject" value="enformed.io loves you..." />

There you go. You've got your form set up and are using some of our custom elements. Now, in the next section we want to put is all together and give you a form that you can easily copy and paste into your site to get started.

Submitting Forms with AJAX

You may have noticed that by default we redirect your user to a special "Thank you" page when they submit your form. While that is great in many situations, maybe you don't want them to leave your page just yet. You can easily submit the form using AJAX without ever having your users leave the page. We've included a couple of examples from some of the most popular libraries for making HTTP requests.

Don't forget to replace your_token with your actual enformed.io token. Also, note that in each of the examples, your_data is a plain Javascript object containing the keys and values of the form's responses.

    Example using the Fetch Library

  fetch('https://www.enformed.io/your_token/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    body: JSON.stringify(your_data)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(err));

    Example using the Axios Library

  axios.defaults.headers.post['Content-Type'] = 'application/json';

  axios.post('https://www.enformed.io/your_token/', your_data)
    .then(response => console.log(response))
    .catch(error => console.log(error));

    Example using the jQuery Library

    method: 'POST',
    url: 'https://www.enformed.io/your_token/',
    dataType: 'json',
    accepts: 'application/json',
    data: your_data,
    success: (data) => console.log(data),
    error: (err) => console.log(err)

Pretty simple, huh? However, even the best of us can get hung up on some small detail. If you have any questions or are having difficulty using HTTP requests to send form submissions, get in touch with us so we can help you out.