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.
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.
<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.
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.
<!-- 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>
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 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!" />
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.
We explained the basic form setup in the section above, but there is a lot more that you can do with . 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." />
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 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 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 type="hidden" name="*formname" value="enformedForm" />
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 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 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.
<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 type="hidden" name="*subject" value="enformed.io loves you..." />
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
https://github.com/github/fetch
*/
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
https://github.com/axios/axios
*/
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
https://api.jquery.com/jQuery.ajax/
*/
$.ajax({
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)
});
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.