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

1. Create a form
2. Browse to the new “Customizable email templates” tab in the form.
3. Create a new email 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.

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

Let us submit some test data into this 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.

• 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.

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.

• For example Contact Us is form name that you want to create.
• Click Create Form button and a form will be created.

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…

• 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.

  

• 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.

STEP 5:

• Browse to the file path in your favourite browser and submit the form as shown.

• 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.

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

• 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

• That’s it! You have created a form and anyone can post it so that you can check it!

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)

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

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/

All you need to do is, go to the Exports page and click on the Download button. This will create a new export which can be downloaded by clicking on the **Download button.

Here is a screenshot:

If you have any more suggestions feedback, we’d love hear them.

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.

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

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>

1. Create a new form called Imgur Form in Liveform.
2. Create a new repository in Github, let’s name it imgur_clone
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

   

   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.

   

   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

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/

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.

We hope you guys find it useful :)

You can read more about how to use LiveForm by checking out the documentation at http://docs.liveformhq.com/. The tl;dr; version of it is: Use LiveForm for all your online forms without the need for iframes!

So, go ahead and sign up now!

We’ll be sharing technology and related stuff used in LiveForm here.