How to customize outgoing email notifications

LiveForm now has a shiny new feature! The ability to customize the email notifications that you receive when a form is submitted. Let us look at an example of how to do this.

Let us setup a form from the beginning to see how to create custom outgoing email notifications.

  1. Create a formCreate a new Form
  2. Browse to the new “Customizable email templates” tab in the form.Customizable email templates tab
  3. Create a new email notification templateCreate a new notification template Let us look at all the fields on this page in detail. We have a recipients input field which allows you to fill the recipients for this new notification. This can be filled with multiple recipient emails. The Subject template as the name implies is the template for the subject of the outgoing email. This template can have any text plus data using the liquid markup language. In this example we are creating a subject line using the first 100 characters of a field named message in our form. The Body template is actually simpler, it just takes whatever was received in the message input field and adds <br> tags instead of newlines.

That is it! We have successfully created a new notification template. Let us use our new test drive feature to test out our form.

Go to the form’s messages tab and click on the “Test your form” button. Messages tab

This page allows you to test the new form we just created by sending it data Test your form

Let us submit some test data into this form. Filled up test form

This the email that I received. As you can see, the subject and body of the email have been created based on our subject and body templates. Email notification

How to setup a form from start to finish

STEP 1:

  • Go to liveformhq.com website and click to the signup button shown on the right side of the header in orange color.
  • There are three input elements, enter your email id danny@mailinator.com and password respectively, as shown below.Liveform signup page

STEP 2:

  • You will be confirmed by a message sent to your email id.
  • In this scenario danny@mailinator.com will be sent a mail with instructions.

STEP 3:

  • A field for New Form will be shown, here you can enter any form name that you want to create.
Liveform New Form
  • For example Contact Us is form name that you want to create.
  • Click Create Form button and a form will be created.
Liveform Example form

STEP 4:

  • After the form is created a notification message is shown at the top.
  • You will be provided with a wide range of options from Messages to Edit…
Liveform Notification
  • For first time setup click the option Setup in the bar and you will be forwarded to a page with an example form as shown.

    Liveform default form
  • If you already have a form then all you have to do is change the form’s action and method attributes.

<form action="https://liveformhq.com/form/bdd19515-fcc7-4e27-a3a3-c28958f7e708" method="POST" accept-charset="utf-8">
...form code which is already present or created one as per your requirements….
</form>
  • You can add any number….
  • One such form with name and email fields is created as an example.
  • Copy the code and paste in the file in your computer.
Liveform copying form code

STEP 5:

  • Browse to the file path in your favourite browser and submit the form as shown.
Liveform browse to file path
  • Enter the fields as in our example the name of the person to contact is Amanda Fatima and the email id is amandafatima@gmail.com .
  • Click submit button and a message will be sent to you.
  • Any one can browse and thereby enter the information and create messages.
Liveform submitting a form

*You will be redirected to a “Thank You” page after submitting the form.

Liveform Thank You Page
  • When you sign in to your account at liveformhq.com a series of all the messages will be shown in the Messages tab of your particular form
Messages received
  • That’s it! You have created a form and anyone can post it so that you can check it!

How to use the new Reply To feature to seamlessly communicate with your users

We have released a new feature which allows you to seamlessly communicate with your users. We love dogfooding and use LiveForm for our contact forms. We get a lot of messages and it becomes tedious to create a new email and copy the recipient address to a new email and then respond. We have been using this feature for a while and are making it public now. To use this feature just do the following:

  1. Add an email field to your contact form, you may already have this field. Copy the name of this input field from your contact form.
  2. Go to the ‘Repy To’ tab for your form and set the reply_to value to the name from step (1)Reply To tab for your form

That is it, now when you get a notification email for your contact form. Just hit ‘Reply’ and continue the conversation.

How to build an ajax form using LiveForm and jQuery

In this blog post we’ll see how we can use LiveForm and jQuery to build an Ajax form.

Take this form for example, it has a name, email and a message field.

1
2
3
4
5
6
7
8
9
<form id="contact-form" method="post" action="https://liveformhq.com/form/27fb4351-d2f7-45d3-96ac-8dae0eda2d26">
<input id="name" name="name" type="text" />
<br />
<input id="email" name="email" type="email" />
<br />
<textarea id="message" name="message" rows=8 cols=40></textarea>
<br />
<button id="submit" type="submit">Send Message</button>
</form>

By default this form will make a full page post request to the server. We can use jQuery to make it do the submission via AJAX. All we need to do, is include jQuery (a CDN version can be found at https://code.jquery.com/) And intercept the form submission and make an AJAX post instead of the default. Here is some code which does that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
// intercept the form submission
$("#contact-form").on("submit", function(e) {
e.preventDefault(); // stop the form from being submitted
// make an ajax POST request to the form's action
$.ajax({
type: "POST",
url: $(this).attr("action"), // use the form's action attribute as the endpoint
data: $(this).serialize(), // use the data from the form
headers:
{
"Accept": "application/json" // this makes the server send you a JSON response
},
success: function(response) // handle the successful submission of your POST
{
console.log(response); // response contains the form submission that was just made
alert("Thank you for your submission, we'll get back to you soon :)");
$("#contact-form")[0].reset();// reset the form
},
});
});
})

You can check out a full working demo at http://demos.liveformhq.com/ajax-form/

Use Akismet to prevent spam on your blogs and sites

You can wire up LiveForm to use Akismet to prevent spam on your blogs and sites easily.

  1. Get an Akismet key by signing up on Akismet.
  2. Once, you have a key set it up on LiveForm by browsing to the form’s Akismet tab and pasting your Akismet key.Akismet Key Setting

That’s all folks. Once you do this, all your form submissions will be checked for spam using Akismet!

Using nginx to mask the liveform url on your contact forms

You can use Nginx to mask the form id of your LiveForm url. Here is a configuration which lets you do that.

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
server_name awesome.com;
# ....
location /form {
proxy_pass https://liveformhq.com/form/369c5f72-7940-4d20-b3c7-8a963fc49a15;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X_FORWARDED_PROTO $scheme;
}
}

Now you can just use the /form endpoint in your html. e.g.

1
2
<form method='post' action='/form'>
</form>

Creating an Imgur clone using Github Pages and Liveform

Yesterday, we released the ability to upload files using Liveform Today, we released readonly API access to messages. These two features allow us to build simple and powerful tools with minimal work. In this blog post, we’ll build a clone of Imgur, the popular image hosting website. We’ll do this using Github Pages and Liveform. Let’s get started!

  1. Create a new form called Imgur Form in Liveform.Create Imgur Form
  2. Create a new repository in Github, let’s name it imgur_cloneCreate Github repository
  3. Now let’s create a branch called gh-pages on Github. This will hold our final website.
  4. Let us now create our home page index.html at the root of our repository. This is a simple stub page, with 2 links and a placeholder for our images

    1
    2
    3
    4
    5
    6
    7
    8
    <!doctype html>
    <a href='/'>Imgur</a> | <a href='/new.html'>New Upload</a>
    <br />
    Show all images....
  5. Now, let us create a file called new.html which will hold the form for our uploads

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!doctype html>
    <a href='/'>Imgur</a> | <a href='/new.html'>New Upload</a>
    <br />
    <form action="https://liveformhq.com/form/369c5f72-7940-4d20-b3c7-8a963fc49a15" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" value="https://minhajuddin.github.io/imgur_clone/" name="_redirect" />
    <label for="title">Title</label>
    <input type="text" id="title" name="title"> <br />
    <label for="upload">Upload</label>
    <input type="file" id="upload" name="upload"> <br />
    <button type="submit">Upload</button>
    </form>

    A few things to note here a. We copied the form from the Liveform setup page

    Liveform setup starter code

    b. We added an extra attribute to the form: enctype="multipart/form-data" c. We added two input fields, one for the title and another of type file for the file upload d. We set a hidden field called __redirect to redirect the user back to the home page

  6. The upload form should be all setup now. Let’s flesh out our home page. We want the user to be able to view all the uploads as soon as he visits the home page. We can easily do this using the Liveform API.

    Liveform ajax starter code

    The code below is straightforward. a. We are fetching our messages using the Liveform api. b. With these messages we are building some html for each post c. We are also building the pagination footer using the meta info in the response d. Finally we are sticking this into the #container div.

    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
    43
    44
    45
    46
    47
    48
    49
    50
    <!doctype html>
    <a href='/'>Imgur</a> | <a href='/new.html'>New Upload</a>
    <h2>All Images</h2>
    <div id="container">
    Loading...
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
    $.get("https://api.liveformhq.com/v1/forms/369c5f72-7940-4d20-b3c7-8a963fc49a15/messages", {
    api_key: "11d43d92-d928-4a8b-b55c-50f98227c794"
    },
    function(response) {
    var body = "",
    messages = response.messages;
    for(var i=0; i < messages.length; i++){
    body += imageTemplate(messages[i], i + 1)
    }
    body += pagnationTemplate(response);
    $("#container").html(body)
    })
    })
    function pagnationTemplate(response){
    var meta = response.meta;
    return "<div>" +
    "<h4> Showing " + response.messages.length + " records out of " + meta.total_count + ", page " + meta.current_page + " of " + meta.total_pages + " </h4>" +
    "<div>"+(meta.next_link ? "<a href='"+meta.next_link+"'>Next</a>" : "" ) + "|" + (meta.prev_link ? "<a href='"+meta.prev_link+"'>Prev</a>" : "") +"</div>" +
    "</div>";
    }
    function imageTemplate(message, id){
    if (!message.data.upload) {
    return "";
    }
    var title = (message.data.title || "Untitled");
    return "<div class='post'>" +
    "<h2>" + id + "." + title + "</h2>" +
    "<div class=image><img alt='" + title + "' style='max-width: 100%;' src='" + message.data.upload + "' /></div>" +
    "</div>"
    }
    </script>

Here is the final screenshot of the website Imgur clone screenshot

Obviously this is not the same as Imgur :) But you get the idea ;)

Oh, and here is a link to the final Github Pages website: https://minhajuddin.github.io/imgur_clone/

File uploads for your forms

You can now do file uploads using Liveform. You just need two things to be able to upload files.

  1. Make sure your form has an attribute enctype="multipart/form-data"
  2. Add a file field e.g. <input type=file name=resume />

That’s it, once you have those, files can be uploaded through your forms.