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.