Schöne Optin Formulare ohne Plugins: CSS Tricks mit Mautic Forms

by | Jun 21, 2021 | 0 comments

Schöne Optin Formulare ohne Plugins: CSS Tricks mit Mautic Forms

by | Jun 21, 2021 | CSS Tips and Tricks | 0 comments



Kostenlose Optin Formular CSS-Codes:

Freebie CSS-Formulare SU

Plugins machen WordPress oder auch andere CMS wie Typo3 oft langsam. Daher ist es oft sinnvoll die Formulare die geladen werden auch gleich als Komplettpaket zu liefern… mit Design-Styles (CSS) und allem drum und dran.
Mit Mautic kannst du genau das machen. Und das Coole ist: Egal wo du das Formular einbaust, sobald du den Code im Formular direkt änderst, sieht es sofort überall so aus. Du sparst dir also haufenweise Arbeit alte Formulare zu ändern.
Natürlich musst du wissen wie das geht. In Mautic gibt es bei den Formularen dafür ein geniales Tool das schon eingebaut ist. Du kannst in jedem Formular eine eigene HTML-Area platzieren und darin dann den Code den du brauchst, damit dein Formular so aussieht wie du es dir wünschst.

Das ganze geht einfacher als du vielleicht glaubst. Mit ein paar Zeilen einfachem CSS Code bist du im Rennen. Hier zeige ich es dir Schritt für Schritt:

1:44 ein neues Formular erstellen
2:18 Felder hinzufügen
3:50 Design anpassen
5:34 Mauticform Input anpassen
8:08 Mauticform Button anpassen
11:05 Mauticform Button Hover-Effekt
12:00 Formular Breite anpassen
13:02 In WordPress einbetten und testen
14:01 Troubleshooting

========== DIE BESTEN TOOLS FÜR DEINE FUNNELS ==========
📩 Mautic: https://hartmut.io/managed-mautic
🚀 Social Media Posting: https://hartmut.io/social-media-planner-for-mautic/
🎧 Webinare: https://hartmut.io/webinaris
📝 WordPress Tools: https://hartmut.io/thrivethemes
🎥 YouTube: https://hartmut.io/vidiq

========== WISSEN UND KOSTENLOSE HILFE ==========
🎼 Marketing How-To’s: https://hartmut.io/blog
🧲 50 Ideen für Lead-Magneten: https://hartmut.io/was-ist-ein-lead-magnet/
👨‍💻 Mautic 3 Install-Skript: https://hartmut.io/freebie-mautic-install-skript-su/
👩‍💻 Mautic CSS Skript für schönere Formulare: https://hartmut.io/css-stylesheet-fur-mautic-formulare/
📫 Kostenlose Mautic Strategien: https://hartmut.io/newsletter/

========== CONNECTE MIT UNS ==========
FB: https://www.facebook.com/hartmut.io/
Linkedin: https://www.linkedin.com/company/hartmutrocks/

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>