Let us setup a form from the beginning to see how to create custom outgoing email notifications.
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.
]]>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 will be redirected to a “Thank You” page after submitting the form.
name
of this input field from your contact form.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.
|
|
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:
|
|
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.
]]>That’s all folks. Once you do this, all your form submissions will be checked for spam using Akismet!
]]>
|
|
Now you can just use the /form
endpoint in your html. e.g.
|
|
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
|
|
Now, let us create a file called new.html
which will hold the form for our uploads
|
|
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
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.
|
|
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/
]]>enctype="multipart/form-data"
<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.
]]>