Setting Up

Getting set up with enformed.io Green Logo is simple. This section will help you get up-and-running in less than five minutes.
  1. Sign up

    Create a username and password and we'll send you an activation link. After you have activated your account, you'll get a special token that relates specifically to your account. We do this for two reasons. First, we want to know who we need to notify when a form submission comes in and, second, we want to protect your identity on the web. By giving you a token, we can get you the form submissions without compromising your identity online.

    If you haven't done so yet, you can sign up for a free account here.

  2. Create a form and point it our way.

    We assume that you know the basics about creating HTML forms, but if not, that's okay. We'll walk through form basics now. Every form needs to start and ends with a form tag. Your form element should contain two additional attributes to ensure that it makes it to our servers. Make sure to set the action and method attributes inside your form tag so that your form knows what to do when someone submits your form.

    Basic form tag setup with action and method attributes. 
    
<form action="https://www.enformed.io/YOUR_TOKEN" method="POST" >

    Replace the YOUR_TOKEN value with your unique token that we gave you. If you are not sure where to find your key, we can help you find it here.

    Now that you've got the form attributes up and pointing to our servers, you are ready to create form fields that you would like to include in your form.

  3. Add a "name" to each form element

    Now, just add a name attribute to each input, select and textarea that you use in your form. When the form is submitted, we will look for those names to store form submissions and to notify you.

    Named form fields styled with Bootstrap. 
    
<!-- Form groups for your form's fields -->

<div class="form-group">
  <label>Name</label>
  <input name="first_name" type="text" class="form-control"/>
</div>

<div class="form-group">
<label>Your car</label>
<select name="car" class="form-control"/>
  <option value="Honda" class="form-control"/>Honda</option>
  <option value="Subaru" class="form-control"/>Subaru</option>
  <option value="Toyota" class="form-control"/>Toyota</option>
</select>
</div>

<div class="form-group">
  <label>Your message</label>
  <textarea name="message" type="text" class="form-control"/></textarea>
</div>
  4. Submit the form

    The final touch is including a way for your users to submit the form. You can do this with a button or input by specifying type="submit". Whenever someone submits your form, we will receive the information, package it up in a pretty email, and send it your way.

    Submit button and input styled with Bootstrap. 
    
<!-- Submit your form with a button -->
<button type="submit" class="btn btn-default">Submit Me</button>

<!-- or with an input -->
<input type="submit" class="btn btn-default" value="Finish!" />
  5. Let us do our magic

    You are all set. Now, kick back, relax, and we will process each form submission. You'll be notified via email of each new form submission. If you have a Pro account, you'll also have access to full submission history and form analytics to help you understand what's going on with your forms.

    If you aren't signed up for a Pro account, click here to take advantage of enformed power.

Advanced Setup

We explained the basic form setup in the section above, but there is a lot more that you can do with enformed.io Green Logo. Here are some additional attributes that you can add to your forms for more form functionality. Note that each of these special attributes is preceded by an asterisk ("*") character. Each of these fields should be added as a hidden form input.


<!-- This is how to make a form input hidden -->
<input type="hidden" value="Sorry, I'm hidden." />
  • *redirect

    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" />
  • *default_email

    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" />
  • *formname

    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" />
  • *reply

    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" />
  • *honeypot

    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" />
  • *subject

    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..." />

Form submission 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 just yet. You can easily submit the form using AJAX without ever having your users leave the page. If you are using JQuery, just paste the following code into a script tag in your page. You will no longer need an action or method in your opening form tag. Don't forget to replace the #thisForm with your form id and replace yourToken with your actual enformed.io token.

Submit form with JQuery AJAX call. 

<script>
  $(document).ready(function(){
    $("#yourForm").submit(function(event){
      event.preventDefault();
      $.ajax({
        url: "https://www.enformed.io/yourToken",
        method: "post",
        dataType: "json",
        accepts: "application/json",
        data: $("#yourForm").serialize(),
        success: function(){
          console.log("Your form was successfully received!");
          // Show a success message here...
        },
        error: function(){
          console.log("Failure. Try again.");
          // Show an error message here...
        }
      });
    });
  });
</script>

Need more info?

We hope that this quick setup was useful. If you need more in-depth explanation of how to use your account, visit our User's Guide to find out what else you can do with enformed.io.