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.
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.
Full js code can be found here
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.
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.
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.
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)
- Automated Submissions
- SQL Injection