[GUIDE] Custom and self-hosted form processor for your Webflow forms [EN/DE]

Dear Webflow Family,

what takes a long time finally becomes good - at least that’s what I think. I’m back with a great guide for the community. :tada:

We have completely redeveloped the guide structurally, visually and in terms of content in 2023. This Forum Post now serves to support the Tectite Form Processor Guide V2.

Since I shared my list of actions under the title “How to use Webflow in Germany” here in the forum in February 2018, I still receive questions about alternatives for the Webflow Form function.

After recommending the Tectite Form script as a “real” alternative quite often now, I realized that the topic might be a bit too complex to get familiar with it quickly.

So I have finally managed to create a more in-depth guide for you and I hope this brings you a significant benefit!

Here is the link to the clonable guide:

https://webflow.com/made-in-webflow/website/tectite-guide

This post serves as a thread for questions, problems or comments. So feel free to contact me here and also get help from the community.

And now enjoy the guide! :love_you_gesture:

If you like my work for the community, I invite you to support me on Pateon: patreon.com/denniskarg
Every support means a lot to me and enables me to support the Webflow DACH community more intensively.

Best regards from Germany,

Dennis from Vibrand Design

3 Likes

Hi Dennis,

First of all: Your guide is amazing! Huge thanks for that. You cannot imagine how much it helped.

In my implementation of the Tectite Form Processor into a webflow project, everything works fine - except of one thing:

German Umlaute like ä, ö, ü aren’t displayed correctly in the email the recipient gets. They are shown as ä ö ü.

Do you have a solution for that? Or does anybody else have a solution for that?

Thanks again for your awesome work!
Patrick

Moin @Patrick_M,

Thank you for the kind words and appreciation!

That looks like your email template is missing the <meta> element responsible for it.
Add the meta tag <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> for this in the <head> of your email template.

After that, it should work as you expect. :slight_smile:

Best regards and good luck furthermore!

Dennis

Hi @Dennis_K,

Thanks for your answer :slight_smile: - Unfortunately it still doesn’t work. And - after trying it out for hours and reading a lot of stuff in php forums - I am really clueless.

But maybe it helps to explain the problem a bit more in detail:

In my email template <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> is included in the <head>.
And therefore in general the final HTML email CAN display German Umlaute like Ä, Ö, Ü. But ONLY in places, where the text is originally written in the HTML file.

For example if I would write “Hallöchen! $name has send you a message” in the email template, “Hallöchen” would be written correctly, but a $name like “Müller” wouldn’t.

So every information that is inserted from the form itself into the HTML email ($name, $email, $nachricht etc.) somehow doesn’t include German Umlaute. (Screenshot)

I am using Tectite 10.02. And I can see in the source code that there occurred some problems regarding UTF-8 in the past. But I absolutely can’t figure out, how to fix these problems in my email.
And honestly I wonder that no one else in the German webflow community has the same problem :wink:

And now - to test it - I made the most basic form template with this code:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>TEST | Kontaktformularanfrage</title>
</head>
<body>
    <p>I am an HTML paragraph that includes the words 'Hallöchen', 'Fuß', 'Tür' and 'Äh'.</p>
    <p>The following lines get their content from the input fields in the contact form (Name, Email, Telephone, Message).</p>
    <p>$name</p>
    <p>$email</p>
    <p>$phone</p>
    <p>$nachricht</p>
</body>

The result still looks like:

:frowning:

Additional information:
As the FormMail Script Error Messages, which are sent if - for example - the user hasn’t checked the ReCaptcha, include German Umlaute, I would conclude that the error occurs in the moment when the formmail.php-file hands over the form content into the formtemplate.html-file.

I would be glad, if somebody could help me. Or maybe if somebody could tell me, if this problem only occurs in Tectite version 10.02

Hi @Dennis_K,

Thanks to Russell from Tectite I have a solution for my problem.

And I want to share it with you so that you can eventually modify your instruction and you can use it (if necessary) in your own projects.

In the HTML embed, which is written in webflow, the last line currently is:

<input type="hidden" name="mail_options" value="HTMLTemplate=formtemplate.html,TemplateMissing=N/A">

To solve the problem this last line has to be:

<input type="hidden" name="mail_options" value="CharSet=UTF-8,HTMLTemplate=formtemplate.html,TemplateMissing=N/A">

Huge thanks again for your instruction and your support!

Patrick

2 Likes

Hallo Dennis,

vielen lieben Dank für den tollen Guide. Es wäre echt ein Mehrwert wenn du eine Sektion über das Anlegen einer Subdomain und verbinden mit FileZilla erstellen würdest. Alles was du im Guide erklärt hast, werde ich wohl hinbekommen, nur leider weiß ich nicht in wie weit bspw. mein Anbieter Google Domains sich dafür eignet. Magst du das sonst noch einmal hinzufügen oder mir in kurzen Sätzen erklären wie ich das aufsetze? In dem Video mit Jonas zu dem Thema hast du gesagt ihr nutzt Ionos. Ist das besser als Google und warum nutzt ihr das ? Und wenn ich schon dabei bin zu fragen, kann ich von Google meine bestehenden Domains zu Ionos oder einem anderen Anbieter einfach übertragen ohne etwas zu zerschießen ?

Beste Grüße
Marcel

Hey Marcel,

danke für das Lob!
Es gibt so viele verschiedene Domain & Hostinganbieter, dass es mir schlichtweg nicht möglich ist, hier einen allgemeinen Walktrough erstellen zu können, da jedes Backend dieser Anbieter in Teilen komplett unterschiedlich einfach oder komplex aufgebaut ist. Bei einem etablierten Anbieter wirst du jedoch bereits nach 2 Minuten googeln genau das finden, was du benötigst.

Da wir ausschließlich mit IONOS arbeiten, kann ich dir nicht sagen, wie du das in Google Domains machst oder ob sich Google Domains grundsätzlich dafür eignet. Wir haben IONOS damals gewählt, weil Google Domains in Deutschland nicht verfügbar war. Da wir sehr zufrieden bei bei dem Anbieter sind und durch Einblicke in andere Anbieter-Backends durch unsere Kunden erhalten haben, würde ich behaupten, das IONOS im direkten Vergleich wirklich gut und flexibel ist.

Ob du Domains von Google Domains zu einem externen Anbieter umziehen kannst - ja, garantiert. Ob du dabei etwas zerschießen kannst - das kommt darauf an, was bereits mit der oder die Domains verknüpft ist. Etwaige selbst hinzugefügte DNS Einträge musst du nach einem Umzug natürlich neu setzen.

Da du die Frage bereits in Discord gestellt hast, lass ich dir dort noch einen Link zu einer früheren Nachricht zu kommen. :slight_smile:

Viel Erfolg und beste Grüße aus Potsdam,

Dennis

@Dennis_K , auch von mir erstmal vielen Dank für den Guide und die Zeit, die Du dafür aufgebracht hast!

Ich habe noch 2 Herausforderungen:

Schritt 3.3. “Action Methode ändern & Action URL hinzufügen”
Welche der beiden nachfolgenden Varianten muss in die URL kopiert werden?
a) assets.domain.de/forms
b) assets.domain.de/forms/formmail.php

Egal, welche der beiden Variante ich versuche, kommt bei mir der Fehler 404. Hast Du eine Idee, woran das liegen kann?

Zudem hänge ich auch im Schritt 4.2. " Namen der Formular Inputs hinzufügen".
Mir ist nicht klar, in welches Template Du die Eintragungen machst. Ich habe alle Vorlagen aus dem Guide heruntergeladen, kann aber die Einträge, die in Deinem Screenshot zu sehen sind, nicht finden.

Herzlichen Dank für Deinen Support!
Sebastian

Hey @sebastianm,

bitte entschuldige die späte Antwort.
Die Action URL sollte immer die URL zur Datei selbst sein, also inklusive “https://assets.domain.de/formmail.php”. Sofern du deine PHP Datei anders benannt hast, dann demzufolge deinen gewählten Namen der Datei angeben.

Zu deiner 2. Frage habe ich zunächst eine Gegenfrage: Du verwendest aktuell die V1 des Guides, korrekt? Das lässt mich darauf schließen, weil ich in meinem aktuellen Guide kein “4.2” finden kann. Das hier ist der neue Guide:

Unabhängig davon, welchen Guide du verwendest, ist in dem Bild zu 4.2 dargelegt, dass dort die Namen der Inputfelder in den HTML Code des Newsletter Templates eingefügt wird.

Wenn du weitere Fragen hast, werfe Sie hier gerne rein. :slight_smile:

Mit besten Grüßen aus Potsdam,

Dennis von Vibrand Design

Hallo,
auch wenn der Post nun 8 Monate alt ist, antworte ich einmal mit einer Frage darauf. Ich meine weiter oben schriebst du, das ihr mit Domains bei Ionos arbeitet.
Gerade dort habe ich aktuell das Problem, das Ionos vor zwei Monaten etwas am PHP Handling geändert hat. Nun klappt leider dieses Handling mit dem Form Processor (letzte Version, exakte Kopie) so nicht mehr. Ich habe mit dem Support mehrere Telefonate geführt, aber die konnten nicht weiterhelfen.
Das gleiche Script auf einem anderem Server wird ohne Probleme ausgeführt. Gibt es bei euch einen Workaround oder irgendeine Idee was man tu könnte?
Ich danke schon einmal für deine Antwort.
Andreas