Guide for the Tectite Form Processor

After our post in the forum "How to use Webflow in Germany" and the statement there not to use the Webflow forms for a higher DSGVO compliance, we still receive questions about alternatives for this issue. In the German Webflow community group on Facebook and on Discord we have often recommended "our" solution to the problem - the form script from Tectite.

As is so often the case, the hurdle of getting up to speed on such a tool and what needs to be done is no small one.

With this guide, we want to help the entire Webflow community, regardless of whether DSGVO / GDPR plays a crucial role or not, how to integrate a powerful, secure and flexible Form Processor in a project - step by step.

Important information in advance: This guide is written for the low-code community and therefore includes step-by-step instructions on what code to add where in your Webflow project. If you are familiar with custom code, the guide will be much easier for you to understand.

If you have any problems or questions that are not answered in the FAQ, feel free to post a comment in the forum post about the guide:

Let's get started!

In simple terms, a form processor is responsible for digitally processing information entered by the user in input fields (such as in a contact form). The processing can be used to automatically fill databases with the entered content or to generate emails that are sent to a desired recipient. The last one will be explained in this guide.

1. Flexibility

   A form processor usually works independently of the form or website through which the processor is controlled. So you can use your forms as usual in a Webflow project or a static website outside of Webflow.

2. Individuality

   Decide for yourself in which form and presentation the user data will be sent to the recipients of your choice via the form.

3. GDPR security

   Minimize points of attack against your website's GDPR compliance.

Tectite has been around since 2002 and is still being developed today (admittedly, the website doesn't look like it). Russell Robinson is a veteran in software development and developed Tectite to ensure secure and SPAM-free execution of contact forms. And probably the most important reason (why you're probably here too): he offers it completely free. Here is a summary of the benefits of the Tectite Form Script:

1. Free of charge

   Tectite PHP script is completely free of charge. Without fun, really 100% free.

2. No Software as a Service! Standalone solution for own hosting

   No maximum number of emails sent per month. No tool that needs to be controlled and paid for alongside the website. No dependency towards an external provider.

3. No problem with data protection

   There is no (intermediate) storage of potentially sensitive user data with an external provider (the possibility exists, though). The form script converts the received data directly into an email and sends it.

4. Spam protection as top priority

   Tectite's Form script prevents bots from crawling recipients' email addresses via obvious email address obfuscation.

5. File Upload

   While with Webflow you only get the ability for website users to send files via forms starting with the Business Siteplan, with Tectite's Form Script you can do that at no cost.

6. Great documented

   Tectite's script provides documentation for almost every line & function on their website.

General conditions that should be met for use:

1. Server that can run PHP is required.

   The Form script is written in PHP and is executed only on the server side. Access to an environment where PHP code can be executed is therefore essential.

   As a common standard, PHP is run on almost every server that is part of a hosting package from a hoster of your choice.

2. SSL certificate for the domain of the server must be present

   Since personal data is processed via the script, encrypted data transmission should be guaranteed by an SSL certificate. (Mandatory in Germany)

3. Server access

   Access to the server via FTP or terminal must be available so that the necessary files can also be stored.

   Attention: If you intend to host the Webflow project with Webflow, the webspace of your domain can no longer be used. In this case, create a subdomain "assets.clientdomain.com" at the hoster and use the web space belonging to this domain for the storage of the PHP file. The previous points 1 & 2 must also be fulfilled.

   If your hoster does not offer a web-based FTP solution or you prefer to use a classic program, we recommend the following:

   

   FileZilla

   filezilla-project.org

   

   Cyberduck

   cyberduck.io
4. Email template as a basis for the sent emails

   To display the transmitted information in a responsive email, we recommend developing or using a free email template. Below are some recommendations:

   • E-Mail Template 1
   • E-Mail Template 2

   We will use email template 1 in this guide. However, you are completely free to choose which email template you use as long as it is based on HTML.

5. Download Tectite's PHP Form Script

   Download the script from Tectite's website (tectite.com). Since it has often happened that Tectite's website was not accessible, we have uploaded the script on our server as a ZIP file for download. So you can download the ZIP file here as well.

   
6. Code Editor

   We recommend using a code editor for editing the PHP script and email template. Below are some recommendations:

   

   Visual Studio Code

   code.visualstudio.com

   

   Atom Editor

   atom.io

   

   Brackets

   brackets.io

By "condition met" is meant, for example, that a checkbox must first be clicked or an input field must be filled in. Since a checkbox for consent to data processing is mandatory, at least in Germany, we'll just take that.

So our goal for UX Tip 1 is: Once the privacy checkbox is accepted, show the ReCaptcha to the user.

Below is a step by step guide for doing so:

1. Make sure you know what the ID of your privacy checkbox is and give your ReCaptcha or the parent of your ReCaptcha a unique class.

2. Add the following JavaScript in the Webflow Site Settings or directly on the page before the </body>:

   <script>
   /* Check if the ID "GDPR" changes */
   $('#GDPR').change(function(){
   /* whether this has been "checked". */
   if($(this).is(":checked")) {
   /* If so, give the element with the following class the class .show, */
   $('.form__row.recaptcha').addClass("show");
   /* if not, do nothing. */
   } else {return;}
   });
   </script>

   Code copied

   Attention: If you named your classes and IDs differently than we did, change them in the script accordingly. "#GDPR" = the ID of our checkbox".form__row.recaptcha" = The class(es) of the div where our recaptcha resides.

3. Add the following CSS in the <head> in your Webflow Site Settings, directly in the Page Settings or as HTML Embed:

   <style>
   /* Hide the parent of the ReCaptcha */
   .form__row.recaptcha {
   display: none;
   }
   /* Show the parent of the ReCaptcha */
   .form__row.recaptcha.show {
   display: block;
   }
   </style>

   Code copied

   Attention: If you named your classes differently than we did, change them in the code accordingly. ".form__row.recaptcha" = The class(es) of the div where our recaptcha resides.

4. Done. On your published page (website.webflow.io or the target domain), the ReCaptcha should now only be displayed once the user has agreed to the data processing via the checkbox.

To add in UX Tip 2: It will be important to your client and you as the developer of the form that bots do not send emails through the form. Therefore, we want to make sure that the form can only be submitted if the ReCaptcha has also been filled out/accepted. Here's how we do that:

1. Give your ReCaptcha element the Custom Data attribute: "data-callback: enableBtn"

   

2. Give your submit button the ID: "submitRequest"

   

3. Add the following JavaScript in the Webflow Site Settings or directly on the page before the </body>:

   <script>
   /* When loading the page the submit button with the ID submitRequest should be disabled */
   function onloadCallback() { document.getElementById("submitRequest").disabled = true; };
   /* As soon as the ReCaptcha executes the callback enableBtn after activating the user, activate the submit button */
   function enableBtn(){ document.getElementById("submitRequest").disabled = false; }
   </script>
   <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

   Code copied

   Attention: Again, if you have worked with a different name for the elements, you must adjust the values in the script accordingly.

4. We want to give the user the signal that the form cannot be sent yet. We do this by changing the appearance of the submit button. Add the following CSS in the <head> in your Webflow Site Settings, directly in the Page Settings or as HTML Embed:

   <style>
   #submitRequest:disabled,
   #submitRequest[disabled] {
   background-color: #e4e4e4;
   color: #9b9b9b;
   cursor: not-allowed;
   }
   </style>

   Code copied

   How you want to style the disabled button is entirely up to your imagination. We personally find a grayed out button suitable to show the user: "Something is still missing here".