SIMAEC.NET WEB PUBLISHING

Webforms

The primary goal of having a website is to sell services or products. Unless a website limits itself by just publishing an email address or phone number, it needs some sort of webforms to collect leads or close a sale online.

Webform - HTML, CSS

From simple to complex, webforms collect data provided by the website visitor and store it in the backend.

<p class="subscription-alert alert" 
    style="display:none;"></p>
<p class="subscription-success success" 
    style="display:none;"></p>
<form name="subscription" method="post">
    <input type="hidden" name="form-name" 
        value="subscription" />
    <input type="hidden" name="uuid" 
        value="none" />
    <label for="subscription-name">Name</label>
    <input type="text" name="name"  
        id="subscription-name" 
        value="" placeholder="" />
    <label for="subscription-email">Email</label>
    <input type="email" name="email" 
        id="subscription-email" 
        value="" placeholder="" />
    <input type="submit" value="Subscribe" />
</form>

Form Handler - Javascript

Javascript portion of the webform is too long to be published in this page. The code can be found here. To discuss the code here just a list of functions used.

<script>
    // "Cookie Trap"
    generateUUID();
    getCookieUUID();
    setCookieUUID();

    // Form submission functions
    validateForm();
    submitForm();
    submitHandler();
</script>

validateForm

We already rely on HTML5 for some input validation, but this function extends that validation and labels fields if data is missing or incorrect.

submitForm

Serialized the data and submits it to the form API.

submitHandler

Binds a javascript to each form on the page, prevents default action get/post and directs through form validation before sumitting to the form API.

Cookie Trap

To protect form automated form submissions, with a first visit to a page of the website, a unique user id is generated and stored as cookie. The uuid is stored in a hidden field and transferred to the form API. The form API checks the cookie and compares it with the transmitted value. In case of a mismatch no action is taken and an error message returned.

Form API - Python, GAE

To prevent the abuse of your forms for spamming by third party, don't connect the submit action with the event of sending an email to the email address provided. Instead post a success message on page and run a backend process to follow up.

Google Cloud Storage

Storing the form data as txt file in GCS bucket, processed later.

MySQL Database

Storing the submitted data as a record in the database, processed later.

Third Party Ticket Applications

Initiating a ticket using the third party application's API. (e.g. Zendesk, Freshdesk)

Webform Components

Pitfalls

  • Automated Submissions
  • Spamming
  • SQL Injection