Use message templates to configure your email notifications

SimpleForm has had the ability to configure how your email notifications look for a long time now.
However, it hasn’t bee properly documented. This blog post tries to remedy that :)

All your forms have a settings page which can be accessed by using the following url:

https://getsimpleform.com/forms/<api-token>/edit (The api token is different from the form_api_token, I know I should have named it better :) )

This page allows you to set up the following:

  1. akismet key to use akismet for spam prevention.
  2. reply to to change the reply to in your email notifications.
  3. subject template to change the subject of the emails that you receive on a form submission.
  4. body template to change the body of the email you receive on form submission.

The subject template and the body template support a special syntax called liquid markup.
This allows you to create your email notifications in all sorts of shapes based on whatever logic you can think of.

SimpleForm provides variables named the same as the names of your input fields in this markup.

Example

If we have a form which looks like below

1
2
3
4
5
6
<form ... >
<input type="text" name="name" />
<input type="text" name="title" />
<textarea name="message" />
<input type="submit" value="Submit Form">
</form>

We can configure our body template to look like:

1
2
3
4
5
6
7
8
9
Hello Mr. K,
<br />
You received a message from {{name}}: <br />
with the title: {{title}} <br />
Message:
<br />
{{message}}
<br />
<p>Just reply to this message to continue the conversation</p>

This of course is a simple look, you have freedom to use any valid html body here.
Mailgun for instance has created free email templates which can be used to style your forms: https://github.com/mailgun/transactional-email-templates

Here is a bonus template from a friend of SimpleForm @marcogargo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<table bgcolor="#eeeeee" cellpadding="10" cellspacing="0" border="0" width="100%" align="center" style="max-width: 500px; font-family: arial; font-size: 13px; color: #555555;">
<tr>
   <td>
     <table width="100%" cellspacing="5" cellpadding="5">
<tr>
         <td align="left" valign="baseline" style="font-size: 17px;">
Hi, you have <strong style="background: #df691a; color: #fff;">&nbsp;1&nbsp;</strong> new message!
         </td>
<td align="right" valign="baseline" style="color: #df691a;">
Simple&nbsp;Form
</td>
</tr>
     </table>
   </td>
</tr>

<tr>
<td>
<!-- Start: Table with the data -->
<table cellpadding="10" cellspacing="2" bgcolor="#eeeeee" border="0" align="left">
<tr bgcolor="#ffffff">
<th>Name</th>
<td>{{name}}</td>
</tr>
<tr bgcolor="#ffffff">
<th>Email</th>
<td>{{email}}</td>
</tr>
<tr bgcolor="#ffffff">
<th>Message</th>
<td>{{message}}</td>
</tr>
<tr bgcolor="#ffffff">
<th>Attachments</th>
<td><img src={{file}} /></td>
</tr>
</table>
<!-- End: Table with the data -->

</td>
</tr>
</table>

Checkout this codepen for a full view of the template: https://codepen.io/marcogargano/full/KRWgvY/

Hope you find this useful!

We have added ability to get messages using jsonp

If you want to get all your messages (maybe to display on an internal web page) via ajax you can do the following (using jquery)

1
$.get("http://getsimpleform.com/messages.js?api_token=479afc5e07adc370e79cc75ad751d071",{}, function(response){console.log(response)}, 'jsonp')

Note that the path is /messages.js instead of /messages.json also the last argument in $.get is jsonp

###Warning

If you put this on a public page everyone can view your messages and will be able to delete them as the ‘api_token’ is a private token, so put this only on non public pages.

We have added the ability to submit forms through ajax

You can now submit form through ajax in a simple way. Below is an example using jquery which submits data to our demo form.

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
dataType: 'jsonp',
url: "http://getsimpleform.com/messages/ajax?form_api_token=39c8f9e5a2de15ad63469475702522b9",
data: {
name: "John",
message: "Boston",
}
}).done(function() {
//callback which can be used to show a thank you message
//and reset the form
alert("Thank you, for contacting us");
});

Note that the url here is different than the normal form url. It has an extra /ajax in it. For normal forms the url for action would be http://getsimpleform.com/messages?form_api_token=39c8f9e5a2de15ad63469475702522b9 but for ajax requests it should be http://getsimpleform.com/messages/ajax?form_api_token=39c8f9e5a2de15ad63469475702522b9

We have added spam prevention to Simpleform!

Now you can prevent getting notified for spammy messages just by signing up for an https://akismet.com/ account and configuring it on simpleform. Say goodbye to Spam!

If you already have a simpleform account, go to the page http://getsimpleform.com/forms/<your-api-key>/edit and enter your akismet key, and change the name attribute of your input/textarea fields to message or content. That’s it! you are all set.

Update: The url to edit your akismet key has changed to http://getsimpleform.com/forms/your-api-key/edit

Access your messages programmatically as json

Access your messages programmatically as json

You can now access the messages in simpleform as json. You just have to append a .json to the url. e.g. http://getsimpleform.com/messages.json?api_token=479afc5e07adc370e79cc75ad751d071 This way you can display your messages anywhere you want.

Update:

Here is some code to get the data using jsonp.

1
2
3
4
5
6
7
//replace the api_token with your api token!
$.ajax('http://getsimpleform.com/messages.json?api_token=2d124f03e54c6bf83ae49ab756c4d04c', {
complete: function(data) {
console.log(JSON.parse(data.responseText));
},
dataType: 'jsonp'
})

###Fair Warning!!

You need to remember that if you are embedding this code on a public page, Everyone can read your messages.

We have added file uploads to simple form!

You can now use Simpleform to create forms capable of accepting files as inputs. This makes it capable of creating all kinds of forms.

file upload

You can checkout the demo form (with a file input) at http://getsimpleform.com/demo !

All you need to do to have file uploads in your form, is add an file input element and set the form’s enctype attribute to multipart/form-data like the snippet below:

1
2
3
4
5
<form id='demo-form' action="http://getsimpleform..."  method="post" enctype="multipart/form-data">
....
<input type='file' name='avatar' />
....
</form>

Have fun!

Hello World

Today we have launched Simple Form to make online forms easier to build and style. It is very flexible, It allows you to use a form without the annoying iframes and doesn’t impose any pre-built themes on your forms.

The only thing you need to change, to use simple form, is the action attribute on your form and use the post method on it.

An example of the form’s usage is at http://minhajuddin.com/about/#Contact_Me . You can checkout the source, it’s very simple.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="http://getsimpleform.com/messages?form_api_token=475339605245a246498c3b1d364a845b" method="post">
<input type='hidden' name='redirect_to' value='http://minhajuddin.com/thank-you' />
<label for='name'>Name</label>
<br />
<input type='text' id='name' name='name' placeholder='Your Name' />
<br />
<label for='email'>Email</label>
<br />
<input type='text' id='email' name='email' placeholder='Your Email' />
<br />
<label for='email'>Message</label>
<br />
<textarea id='message' name='message' placeholder='Message' rows='8' cols='50'></textarea>
<br />
<input type='submit' value='Submit' />
</form>

As you can see, simple form integrates easily and seamlessly into your app. Hope you guys find it useful.

Edit

I should have mentioned this earlier, Simple Form sends you an email notification whenever a new form entry is made on your form (Please add bot@getsimpleform.com to your contacts so it doesn’t go to your spam folder). We’ll make the notifications more flexible in a future version :)