Now, Keep a track of each and every form that is been submitted on your website.

What does it do ?

LoadForms is a form processing service, It allows you to save all your form data on LoadForms server as the form is been submitted on your website. No Back-end coding, No iFrames, No embeds, No PHP required.

LoadForms provide you with the API endpoint use the same API endpoint as form action attribute.
Rest we will handle like a charm :) While you work on more important things.

Key Advantages

  1. No need to write Back-end coding to save HTML form submitted data.
  2. In-Built validations available (you can add your own regex as well).
  3. Custom and Global call-back function when the form is been submitted.
  4. Always Ajax.
  5. Auto reply to the one who submitted.
  6. Get notified each and everytime when the form is been submitted.
  7. File Upload.
  8. Google Recaptcha.
  9. API endpoints to fetch submitted form data.
  10. Zapier Integration
  11. CSV Export, JSON Export, Webhooks, Spam Prevention...

See, You got 11 the best advantages to use loadForms.

LoadForms helps you with even more than this, you can manage multiple domains under one roof. Really simple and easy to integrate.

Step: # 1. Register New Site

Login to loadforms dashboard. Once done navigate your self to Add New Site page.
Click the button called ADD NEW SITE.

add-you-new-site-by-clicking-this

The very first step is to register your site with LoadForms only then we can identify your domain name.
The page will look some thing like this.

add-new-site

Enter your domain name where it says Site URL as shown in above image in this example we are using (loadforms.com) You need to add your own domain name.

After adding valid domain name,

You need to add HTML form on your website

Make sure to add LoadForms API as form action="{{YOUR_API_KEY}}" attribute you can find your Form API key here.

form-api-endpoint

Add class="loadforms" attribute to < form > tag and one unique id="{{YOUR_FORM_ID}}" attribute.

Your Form tag should look like this.

<form id="{{YOUR_FORM_ID}}" action="{{YOUR_API_KEY}}" class="loadforms"> 
	<input type="text" name="fname" data-validation="required" /> 
	<input type="text" name="email" data-validation="email" /> 
	<input type="submit" value="Submit Now" /> 
</form>

Note: Every user will have unique API key and all YOUR domains will have same API key.


Add the below script tag above the </ body> closing tag.

<script type="text/javascript" src="https://loadforms.com/client/v1/loadforms-script.js" ></script>

Once done, Mark the Yes, I Have Added The Code On My Website as checked and click the button SAVE AND CONTINUE

Step: # 2. Adding mail server details

You need to provide your mail server details.

We will be using your own mail server details to notify you when ever a form is been submitted on your website.

Currently we have only Two option (Web Mail -or- Gmail)

we will be adding more options like Amazon SES, SendGrid, MailGun, CloudSMTP...etc and many more.

mail-server-details

You can select anyone among the above shown options. Once selected fill in the details and make sure you send test mail by clicking the SEND TEST MAIL button below.

Note: You can even SKIP this step but we recommend you not to skip, Use your gmail if you don't want to provide your mail server details .

gmail-oauth-for-mail-server-details

(No need to provide your details if you select gmail, because we are using gmail oAuth. )

Step: # 3. Creating An HTML Form

(we already covered this in step one)

To use loadForms you need a form on your website. Sample HTML form will look like this.

<form id="contactform" action="#" class="loadforms"> 
	<input type="text" name="fname" data-validation="required" /> 
	<input type="text" name="email" data-validation="email" /> 
	<input type="submit" value="Submit Now" /> 
</form>

action="#" part of your form use loadForms API as forms action attribute. You can find it here.

form-api-endpoint

class="loadforms" you need to add loadforms as class name to each and every form tag wihtout this the submit action own trigger.

id="contactform" you need to add one UNIQUE id attribute on form tag every form tag should have different ID

Finally our form should look like this.

<form id="{{YOUR_FORM_ID}}" action="{{YOUR_API_KEY}}" class="loadforms"> 
	<input type="text" name="fname" data-validation="required" /> 
	<input type="text" name="email" data-validation="email" /> 
	<input type="submit" value="Submit Now" /> 
</form>

(Optional) -BUT- (Recommended)

Use data-validation attribute on every input field this will help you to validate your form data.

In-Built Validation options

  1. data-validation="required"
  2. data-validation="email"
  3. data-validation="number"
  4. data-validation="url"
  5. data-validation="domain"

Do's and Dont's

Every input field must have name attribute

    <input type="text" name="firstname" />
    <input type="text" name="lastname" />
    <input type="text" name="email" />
    <input type="text" name="contact" />

name="firstname" attribute is use to identify the field name if you don't pass this attribute the form won't send this data to backend.

Note: If in case you submitted the form without proper name attributes or changing the name attributes you need to changed the form id attribute as well or else the form won't submit.

Step: # 3. Submit your form.

Final Step.

  1. Register a site (done)
  2. Adding LoadForms script on your site (done)
  3. Adding action, class, id attribute on form tag (done)
  4. Adding data-validation attribute on input fields (done)

Final Step, You need to submit your form.
Visit your site where you have added the form, Go ahead and submit all the forms.

All your domains should list here

listing-all-sites-on-loadforms-dashboard

By default we add localhost in your account you can use this for testing from your local machine.

If you click on any of the domain name, All forms of that domain name will be listed. As shown in the below image.
all-forms-listing-for-single-domain

On the right you can see number of submissions in that form. Too See the submitted data of individual forms click on the form id which will list all the submitted data. As shown in the below image.
signle-form-listing

This is not the limit!

We are constantly works on things to provide you will the best platform, where you will have everything releated to form under one roof.

Few featured that we have
File Uploads, Spam Prevention, Notify on submission, Custom Validation, Call Back, In-Built Thank you page, SMTP configuration....etc

and many more will be coming soon.

Learn how to

  1. How to add Custom Validation
  2. How to Add Call Backs on every form submit
  3. How to Add File Upload

Hope you like the article, If you got any suggession and new functionalities which you wish to have in LoadForms then please do contact us. We will really be happy to help you.