• Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
  • Home
  • Blog
  • Documentation
  • FAQ
    • Pre-Sales Questions
  • Sign Up
  • Log Out
  • Get Easy Forms
home/Knowledge Base/Advanced Techniques
Popular Search:Getting Started

Form Endpoints: Make fully customizable forms

346 views August 1, 2019 admin 5

Form Endpoints allows you using Easy Forms as a form backend platform to handle your forms on your websites and mobile apps. You can set up a form and start collecting submissions to your form within minutes.

Collecting form submissions

As a starting point, you can download the HTML code of your form. Then, you can adapt it to the needs of your website or mobile application.

To collect form submissions, follow the next steps:

  • In the navigation bar, click “Forms“
  • Click on the form name you want to share
  • Click on the “Publish and Share” button (the green arrow icon)
  • Click on the “Download the HTML” menu.
  • Finally, upload the HTML file to your host and submit it.

See the example:

See the Pen
Easy Forms: External Form with Regular Request
by Baluart (@baluart)
on CodePen.

If everything is OK, you will be redirected to a Confirmation page. You can set the Confirmation Page as always (Forms -> Actions -> Settings -> Confirmation Settings -> Redirection to Another Page).

If a system error or validation error occurs, you will be redirected back to your form page. In the URL you will see the name of the field and associated error message so that you can show them to your users. If, for some reason, the app can’t detect the referrer page, an error page will be displayed by default.

Notes:

  • To receive your submissions correctly, include the accept-charset="UTF-8" attribute to your form tag.

Uploading Files

While collecting submissions on Easy Forms, you might want to collect files too. Easy Forms supports file uploads to your form. The size limit for your files is limited by your PHP settings (php.ini). However, you can use Easy Forms to validate File Sizes and File Types as always.

To send files don’t forget to add enctype=multipart/form-data" into the Form tag.

Note: At the moment, Easy Forms does not support HTML5 multiple file upload syntax. So, if you want to receive multiple files, you will need to add multiple File fields.

Sending submissions with AJAX

With Easy Forms, you can send your form data with AJAX.

Just take into account that your request must have the following header:

"X-Requested-With": "XMLHttpRequest"

If you want to get your responses in JSON format, you need to add dataType: "json", it sets Accept Http Header to application/json. Also, if you want to get your responses in XML format, you need to add dataType: "xml", it sets Accept Http Header to application/xml.

As a summary, we can send the response in 3 different formats:

  • “Accept”: “text/html”
  • “Accept”: “application/json”
  • “Accept”: “application/xml”

You will need to set up any of these data types in your header request. But, for Ajax request, we suggest using JSON.

See our example:

See the Pen
Easy Forms: External Form with Ajax Request
by Baluart (@baluart)
on CodePen.

In this example, we are using the following javascript code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$("#form-app").submit(function(e){
  e.preventDefault();
  var action = $(this).attr("action");
  $.ajax({
    type: "POST",
    url: action,
    crossDomain: true,
    data: new FormData(this),
    dataType: "json",
    contentType: "multipart/form-data",
    processData: false,
    contentType: false,
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      "Accept": "application/json"
    }
  }).done(function(res) {
    if (res.success) {
      $('.alert-success').show();
    }
  }).fail(function() {
    alert('An error occurred please try again later.')
  });
});
</script>

Uploading files with AJAX

Easy Forms can accept files with AJAX requests, however, some browsers like Internet Explorer don’t support this feature.

See the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$("#form-app").submit(function(e){
  e.preventDefault();
  var action = $(this).attr("action");
  $.ajax({
    type: "POST",
    url: action,
    crossDomain: true,
    data: new FormData(this),
    dataType: "json",
    contentType: "multipart/form-data",
    processData: false,
    contentType: false,
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      "Accept": "application/json"
    }
  }).done(function(res) {
    if (res.success) {
      $('.alert-success').show();
    }
  }).fail(function() {
    alert('An error occurred please try again later.')
  });
});
</script>

Note: You need to add enctype="multipart/formdata" like with the regular form.

<form id="form-app" action="YOUR_ENDPOINT_URL" method="post" enctype="multipart/form-data" accept-charset="UTF-8"> 
    <label class="control-label" for="filename">Picture</label>
    <input type="file" id="filename" name="filename" data-alias="filename" accept=".gif, .jpg, .png">
    <input value="Submit" type="submit">
</form>

Custom Field Names

If you want to replace the “name” attribute of each field, you need to set it as a Field Alias in the Form Builder. This way, your data will be saved and shown correctly on the “Submission Details” page.

By default, our application generates field names in a required format to identify its type in the system (text_123, email_123, etc.). With an endpoint you can customize the field name by the name you want, just don’t forget to add the same name as Field Alias in the Form Builder.

For example. if we want to submit an input with the name attribute “email”.

<form id="form-app" action="YOUR_ENDPOINT_URL" method="post" accept-charset="UTF-8"> 
    <input name="email" type="email" id="email">
    <input value="Submit" type="submit">
</form>

We need to add “email” as Field alias.

Spam Filtering

We use the Honeypot technique for spam filtering. If you want to get this protection in your form, just add a field with the name attribute: “_email“. For example:

<div style="display:none"> 
    <label for="_email">Excuse me, but leave this field in blank</label> 
    <input type="text" id="_email" name="_email"> 
</div> 

If the ‘_email‘ field is filled, Easy Forms will detect it and return an Error 404 Not Found.

reCAPTCHA validation

To use Google reCAPTCHA in your form, follow the next steps:

  1. Go to Site Settings and enter reCAPTCHA API Keys
  2. Go to the Form Builder and add the reCAPTCHA field to your Form
  3. In your external HTML page, load the javascript file provided by Google reCAPTCHA:
    <script src="https://www.google.com/recaptcha/api.js"></script>
  4. Add the hidden field where the reCAPTCHA field will be displayed:
    <div class="g-recaptcha" data-sitekey="YOUR reCAPTCHA SITE KEY"></div>

That’s all! But, don’t forget to allow access to display reCAPTCHA on your domains.

CORS and domain restriction

You can restrict the domains from where you can receive form submissions. Just go to Forms -> Actions -> Settings -> Authorized URLs and enter comma-separated domains from where you want to receive form requests.

HTML5 validation

Our forms support HTML5 validation by default, however, you can disable this feature to implement your custom client-side validation, just add the ‘novalidate’ attribute to the ‘form’ tag. Eg.

<form id="form-app" action="YOUR_ENDPOINT_URL" method="post" enctype="multipart/form-data" accept-charset="UTF-8" novalidate> 

Was this helpful?

5 Yes  1 No
Related Articles
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
  • How to Display Radio Buttons as Buttons
Leave A Comment Cancel reply

You must be logged in to post a comment.

Advanced Techniques
  • Form Endpoints: Make fully customizable forms
  • Create Users that Can Only Submit Forms
  • How To Calculate Age From Date Of Birth
  • Calculate the Number of Days between Two Dates
  • Create Users that Only Can Manage Form Submissions of Shared Forms
  • Reject Email Addresses From Specific Domains
View All 16  
Popular Articles
  • How to enable / disable DEBUG mode
  • How to update Form Stats from the command line
  • How to RTL (right-to-left) a Form?
  • How to Remove the Default Choice from a Select List Field
  • How to Insert an Image into a Notification or Confirmation Email
KB Categories
  • Add-Ons
  • Advanced Techniques
  • Common Issues & Troubleshooting
  • Developers "How To's"
  • How To
About Easy Forms

With Easy Forms you can create unlimited web forms and most importantly the complete management of them without paying monthly fees

Resources
  • Knowledge Base
  • Documentation
  • Pre-sales Questions
  • Blog
Useful Help Links
  • Get Easy Forms
  • Live Demo
  • License Terms
  • Contact Us
Frequent Visit Links
  • Pre-Sales Questions
  • System Requirements
  • Installing Easy Forms
  • Upgrading Easy Forms
  • Privacy Policy
  • © 2015 - 2020 Baluart EIRL. All Rights Reserved.