SIMAEC.NET WEB PUBLISHING

Webforms

Unless a website limits itself to just publish an email address or phone number, it needs some sort of webforms to collect leads or close a sale online. Using the simple example of a newsletter subscription form, this page introduces all components required for a functional webform.

Webform - HTML, CSS

Our journey starts with a the webform itself.

Newsletter Subscription

Inspect source to view html of the form

We have 2 hidden fields, one named "form-name" and the other "uuid". Form name is used to organize data of form submissions in the backend. UUID is used in a roadblock for automatic submissions. More details later.

Never ask for more data than necessary. For the newsletter subscription, the only data we need to collect is the email address.

We prepared two, on page load hidden and empty containers with the class subscription-alert and subscription-success. They are used to show the response of the submit action to the form user.

Form Handler - Javascript

Full js code can be found here

submitHandler

Bound to each form on page, preventing default action get/post and redirecting the form action to data validation before sumitting to the form API.

validateForm

The form already relies on HTML5 for some input validation. This function extends validation and provides a place to add customized validation. Labels fields if data validation wasn't successful.

submitForm

Posts the validated data in JSON format to the form API.

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