Contact-Form

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image:src" content="https://www.mobirise-tutorials.com/assets/images/logo-mobirise-250x250.png"> <meta property="og:image" content="https://www.mobirise-tutorials.com/assets/images/logo-mobirise-250x250.png"> <meta name="twitter:title" content="Contact-Form"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="shortcut icon" href="assets/images/logo-mobirise-250x250.png" type="image/x-icon"> <meta name="description" content="Contact-Form von PHPJabbers. Formular-Generator zum Erstellen von Kontaktformularen 眉ber ein Content Management System."> <title>Contact-Form</title> <link rel="stylesheet" href="assets/web/assets/mobirise-icons2/mobirise2.css"> <link rel="stylesheet" href="assets/web/assets/mobirise-icons-bold/mobirise-icons-bold.css"> <link rel="stylesheet" href="assets/icon54/style.css"> <link rel="stylesheet" href="assets/simple-line-icons/simple-line-icons.css"> <link rel="stylesheet" href="assets/Material-Design-Icons/css/material.css"> <link rel="stylesheet" href="assets/FontAwesome/css/font-awesome.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css"> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="assets/popup-overlay-plugin/style.css"> <link rel="stylesheet" href="assets/dropdown/css/style.css"> <link rel="stylesheet" href="assets/socicon/css/styles.css"> <link rel="preload" href="https://www.mobirise-tutorials.com/News-PHPJabbers/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="https://www.mobirise-tutorials.com/News-PHPJabbers/assets/myfonts/style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript> <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css?v=0hTUCu"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css?v=0hTUCu" type="text/css"> <script src="https://consent.cookiefirst.com/sites/mobirise-tutorials.com-f6a24dff-9a33-4bc8-bd8d-af58db844677/consent.js"></script>  <style> /* Image */ .goog-te-gadget img { display: none !important; } /* Powered */ .goog-te-gadget { color: #e2e2e2 !important; } /* Link */ .VIpgJd-ZVi9od-l4eHX-hSRGPd { color: #6592e6 !important; } /* Link Hover */ .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover { color: #326ede !important; } </style>  <link rel="stylesheet" href="./lightbox/dist/css/lightbox.min.css">  <style> .lb-outerContainer { background-color: #000; } </style>  <script src="./lightbox/dist/js/lightbox-plus-jquery.min.js"></script>  <script> lightbox.option({ 'fadeDuration': 50, 'imageFadeDuration': 100, 'resizeDuration': 200, 'alwaysShowNavOnTouchDevices': true, 'wrapAround': true, 'albumLabel': "Bild %1 von %2" }) </script> </head> <body>  <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'de' }, 'google_translate_element'); } </script>  <script type="text/plain" data-cookiefirst-category="functional" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <section data-bs-version="5.1" class="menu menu1 cid-u9CArwPmw9" once="menu" id="menu1-23"> <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg"> <div class="container"> <div class="navbar-brand"> <span class="navbar-logo"> <a href="https://www.mobirise-tutorials.com/"> <img src="assets/images/logo-mobirise-250x250.png" alt="" style="height: 4.1rem;"> </a> </span> <span class="navbar-caption-wrap"><a class="navbar-caption text-white text-primary display-4" href="https://www.mobirise-tutorials.com/">Mobirise-Tutorials</a></span> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true"><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/">News Blog</a></li><li class="nav-item dropdown"><a class="nav-link link text-white text-primary dropdown-toggle display-4" href="javascript: void();" data-toggle="dropdown-submenu" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Anwendungen</a><div class="dropdown-menu" aria-labelledby="dropdown-552"><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog-anker.php">Blog PHP Einbau mit Anker ID</a><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog-direkt.php">Blog PHP Einbau ohne Anker</a><a class="text-white show text-primary dropdown-item display-4" href="https://mobirise-tutorials.com/News-PHPJabbers/blog.html">Blog Einbau dynamischer Iframe</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/gallery.html">Gallery Script</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/contact.html">Kontakt Formular</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/">News Blog</a><a class="text-white show text-primary dropdown-item display-4" href="https://www.mobirise-tutorials.com/News-PHPJabbers/simpleCMS.html">Simple CMS</a><a class="text-white show text-primary dropdown-item display-4" href="booking.html">Verf眉gbarkeitskalender</a></div></li><li class="nav-item"><a class="nav-link link text-white show text-primary display-4" href="https://www.phpjabbers.com/" target="_blank"><span class="icon54-v1-puzzle-piece mbr-iconfont mbr-iconfont-btn"></span>PHP Jabbers</a></li><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Formular/" target="_blank"><span class="mobi-mbri mobi-mbri-contact-form mbr-iconfont mbr-iconfont-btn"></span>Kontakt</a></li> <li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Forum/" target="_blank"><span class="sli-bubbles mbr-iconfont mbr-iconfont-btn"></span>Forum</a></li> <li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="https://www.mobirise-tutorials.com/Suchen.php" target="_blank"><span class="mbrib-search mbr-iconfont mbr-iconfont-btn"></span>Suchen</a> </li></ul> </div> </div> </nav> </section> <section data-bs-version="5.1" class="header6 cid-u9CArxat8E mbr-fullscreen" id="header6-24"> <div class="mbr-overlay" style="opacity: 0.6; background-color: rgb(0, 0, 0);"></div> <div class="align-center container"> <div class="row justify-content-center"> <div class="col-12 col-lg-10"> <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3 display-2"><strong>Mobirise Tutorials</strong></h1> <h2 class="mbr-section-subtitle mbr-fonts-style mbr-white mb-3 display-5">PHP Contact Form</h2> <p class="mbr-text mbr-white mbr-fonts-style display-7"> Content Management Kontakt-Formular von <a href="https://www.phpjabbers.com/" class="text-warning" target="_blank">PHP Jabbers</a><br><br></p> <div class="mbr-section-btn mt-3"><a class="btn btn-white-outline display-4" href="contact.html#Contact"><span class="icon54-v1-send-mail2 mbr-iconfont mbr-iconfont-btn" style="font-size: 26px;"></span>Formular</a> <a class="btn btn-white-outline display-4" href="contact.html#Tutorial"><span class="mbrib-pages mbr-iconfont mbr-iconfont-btn"></span>Tutorial</a> <a class="btn btn-white-outline display-4" href="https://www.phpjabbers.com/" target="_blank"><span class="fa fa-puzzle-piece mbr-iconfont mbr-iconfont-btn"></span>PHP Jabbers</a> <a class="btn btn-white-outline display-4" href="contact.html#Google" target="_blank"><span class="mdi-action-translate mbr-iconfont mbr-iconfont-btn"></span>Translate </a></div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-u9CArxoKFo" id="Contact"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style mb-4 display-5"><strong>Kontaktformular</strong></h3> <p class="mbr-section-subtitle mbr-fonts-style mb-4 display-7"><a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-primary" target="_blank">Datenschutzregeln <span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a></p> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-u9CArxy7ah" id="contact-form"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-6">  <link href="https://mobirise-tutorials.com/News-PHPJabbers/contact-form/core/framework/libs/pj/css/pj.bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="https://mobirise-tutorials.com/News-PHPJabbers/contact-form/index.php?controller=pjFront&action=pjActionLoadCss&fid=1" type="text/css" rel="stylesheet"> <script type="text/javascript" src="https://mobirise-tutorials.com/News-PHPJabbers/contact-form/index.php?controller=pjFront&action=pjActionLoad&fid=1"></script>  <p style="font-size: 0.8rem; padding-top: 50px; padding-left: 30px;" class="mbr-text mbr-fonts-style display-7"><a href="https://mobirise-tutorials.com/News-PHPJabbers/contact-form/" target="_blank" class="text-primary">Admin</a> </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="content5 cid-u9CAryfneL" id="Tutorial"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-10"> <h4 class="mbr-section-subtitle mbr-fonts-style mb-4 display-5"> Tutorial Contact Form Generator 5.0</h4> <p class="mbr-text mbr-fonts-style display-7"><br><a href="booking.html#booking" class="text-primary"></a><a href="simpleCMS.html#SimpleCMS" class="text-primary"></a><a href="simpleCMS.html#SimpleCMS" class="text-primary"></a><a href="gallery.html#Galerie-1" class="text-primary"></a><a href="contact.html#Contact" class="text-primary">Nach oben <span class="sli-arrow-up-circle mbr-iconfont mbr-iconfont-btn"></span></a><br><br>Hier zeige ich das "Contact Form Generator 5.0" Script von <a href="https://www.phpjabbers.com/php-contact-form-generator/" class="text-primary" target="_blank">PHP Jabbers</a>, das sehr einfach in Mobirise einzubauen geht.<br><br>Gerne k枚nnt ihr das Formular testen. Nach dem Absenden erhaltet ihr automatisch eine Best盲tigung. <br><br>Bitte stellt eventuelle Fragen zu diesem Formular in meinem <a href="https://www.mobirise-tutorials.com/Forum/" class="text-primary" target="_blank">Forum</a>.<br><br>Erstellt euch bei eurem Provider 眉ber das Kundenmen眉 zun盲chst eine MySQL-Datenbank und schreibt euch die Zugangsdaten zu dieser Datenbank auf, die ihr w盲hrend der Installation von dieser Anwendung eintragen m眉sst.<br><br> Das sieht bei meinem Provider "1&1 IONOS" dann ungef盲hr so aus: <br> <br>Hostname: <br>db1234567890.hosting-data.io <br> <br>Username: <br>dbu1234567 <br> <br>Passwort: <br>mein!unlesbares-Passwort <br> <br>Database / Datenbank: <br>dbs12345678<br><br>Den Eintrag "Table prefix" k枚nnt ihr leer lassen. Ein Tabellenpr盲fix ist ein Pr盲fix (Vorsilbe), das jedem Tabellennamen vorangestellt  wird.<br><br>Die Tabellen der Datenbank werden dann automatisch w盲hrend der Installation angelegt.<br><br>Ich habe dieses Script im April 2024 installiert und zu diesem Zeitpunkt nichts f眉r die "Developer License" (Entwickler Lizenz) bezahlt. Es scheint, dass sich die Preispolitik im April 2024 ge盲ndert hat. Nun besteht die M枚glichkeit, t盲glich ein Skript kostenlos herunterzuladen oder das gesamte Paket aller Skripte f眉r EUR 279,00 zu erwerben. Der Support wurde aber leider komplett eingestellt.<br><br>PHPJabbers wurde bereits im April 2021 von <a href="https://onlineonly.com/" class="text-primary" target="_blank">Online Only</a> 眉bernommen. <br><br>Im Kunden-Bereich auf der Webseite von PHP Jabbers muss man sich zun盲chst mit neuen Zugangsdaten registrieren und einloggen. Dort findet man den Download der Skripte sowie den Lizenz-Schl眉ssel.<br><br>Hier geht es zum Download dieser Anwendung von <a href="https://www.phpjabbers.com/php-contact-form-generator/" class="text-primary" target="_blank">phpjabbers.com <span class="mbrib-download mbr-iconfont mbr-iconfont-btn"></span></a>.<br><br>Ihr entpackt also die ZIP Datei vom Download und kopiert s盲mtliche Dateien und Ordner auf den Server, am besten in ein Verzeichnis, das ihr beliebig benennen k枚nnt, wie z.B. "scripts". Ich habe dieses Verzeichnis bei mir "contact-form" genannt.<br><br>Nun ruft ihr im Browser das Verzeichnis mit den hochgeladenen Skripten von PHP Jabbers auf, indem sich auch eine Startseite "index.php" dieser Anwendung befindet, also ungef盲hr so:<br><br>www.DeineDomain.de/contact-form/<br><br>Die Installation ist sehr einfach und jeder Schritt wird sorgf盲ltig erkl盲rt. Unten zeige ich, von den wichtigen Schritten der Installation, einige <a href="gallery.html#Installation" class="text-primary">Screenshots</a>. Nach der erfolgreichen Installation, ruft man mit dieser URL dann den Administratorbereich auf.<br><br>Man kann im Benutzerbereich beliebig viele Benutzer hinzuf眉gen, die ebenfalls eine Mail erhalten k枚nnen. Weiterhin kann man auch eine automatische Antwort, so wie ich es hier getan habe, hinterlegen.<br><br>Unter "Optionen" kann man komfortabel ein Backup von der Datenbank und auch von den Einstellungen der Anwendung erstellen. Dort kann man auch unter "Languages" alle Bereiche der Oberfl盲che in seine Sprache 眉bersetzen.<br><br>Die Mails werden alle in der Datenbank gespeichert und man kann die Datenbank und Einstellungen auch sehr komfortabel in der Anwendung sichern, bzw. bearbeiten.<br><br>Es k枚nnen Dateitypen f眉r den Upload festgelegt werden, ebenso wie die maximale Dateigr枚脽e. Es besteht die M枚glichkeit, entweder mehrere Dateien hochzuladen oder nur eine, wie in meinem Beispiel hier. Die Dateien werden automatisch als Anhang mit der E-Mail versendet und zus盲tzlich auf dem Server in einem gesch眉tzten Verzeichnis gespeichert. Diese Dateien werden auch automatisch gel枚scht, wenn die entsprechenden E-Mails 眉ber das CMS gel枚scht werden.<br><br>Auch bei dieser Anwendung wird der Einbettungscode direkt zu jedem Formular unter dem Tab "Install" generiert, den ich unten im <a href="contact.html#Code-Editor" class="text-primary">Screenshot</a> vom Mobirise "Code Editor" rot markiert habe. Jedes Formular erh盲lt eine eindeutige ID und kann somit an jeder beliebigen Stelle der Webseite eingef眉gt werden.<br><br> Wer 眉ber HTML-Erfahrung verf眉gt und das Formular direkt anpassen m枚chte, kann auch eine zweite Integrationsmethode verwenden. Kopiert dann einfach den bereitgestellten Formular-Code und f眉gt ihn in den "Code Editor" ein. Man kann das Layout, die Farben, Schriftarten, Rahmen usw. nach Belieben 盲ndern. Achtet jedoch darauf, die Formularfelder "Anzahl" und "Namen" nicht zu ver盲ndern.<br><br>Ich habe hier noch zus盲tzlich dem <img> Selektor etwas CSS gegeben, damit der Captcha Code nicht zu gro脽 erscheint, auch das habe ich im Screenshot rot markiert. Im Nachhinein habe ich noch etwas <a href="contact.html#CSS" class="text-primary">zus盲tzliche CSS</a> geschrieben, die ihr unten sehen k枚nnt.<br><br>Das Formular kann entweder als PHP-Formular oder 眉ber SMTP gesendet werden. Aus Sicherheitsgr眉nden empfehle ich die Verwendung von SMTP. Bitte verwendet hierf眉r die gleichen SMTP-Daten wie bei der Konfiguration eures Postfachs in Programmen wie beispielsweise Microsoft Outlook.<br></p> </div> </div> </div> </section> <section data-bs-version="5.1" class="gallery3 cid-u9CAryuI5N" id="Installation"> <div class="container-fluid"> <div class="mbr-section-head"> <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-5">Einige Bilder zur Installation dieser Anwendung</h4> <h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-7">Klicke auf ein Bild zur Anzeige der Installationsschritte</h5> </div> <div class="row mt-4"> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/1-contact.jpg" data-lightbox="image-block" data-title="Anforderungen" onclick="clicksound.playclip()"><img src="assets/images/001-check.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"> <strong>Anforderungen</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/2-contact.jpg" data-lightbox="image-block" data-title="Lizenzschl眉ssel entf盲llt, da kostenlos" onclick="clicksound.playclip()"><img src="assets/images/002-license-key.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Lizenzschl眉ssel entf盲llt</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/3-contact.jpg" data-lightbox="image-block" data-title="MySQL Datenbank Zugang" onclick="clicksound.playclip()"><img src="assets/images/003-mysql.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>MySQL Datenbank Zugang</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/4-contact.jpg" data-lightbox="image-block" data-title="Installations Pfade" onclick="clicksound.playclip()"><img src="assets/images/03-gallery.jpg" alt="Installation" title=""></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Installations Pfade</strong></h5> </div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="gallery3 cid-u9CAryTeWM" id="gallery3-2b"> <div class="container-fluid"> <div class="row mt-4"> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/5-contact.jpg" data-lightbox="image-block" data-title="Admin Zugangsdaten" onclick="clicksound.playclip()"><img src="assets/images/005-administraor-login.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Admin Zugangsdaten</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/6-contact.jpg" data-lightbox="image-block" data-title="Fortschritt der Installation" onclick="clicksound.playclip()"><img src="assets/images/006-installation-progress.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Fortschritt der Installation</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/7-contact.jpg" data-lightbox="image-block" data-title="Alles erledigt" onclick="clicksound.playclip()"><img src="assets/images/007-installation-ok.jpg" alt="Installation"></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Alles erledigt</strong></h5> </div> </div> </div> <div class="item features-image 褋ol-12 col-md-6 col-lg-3"> <div class="item-wrapper"> <div class="item-img"> <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/contact/8-contact.jpg" data-lightbox="image-block" data-title="Erstes Login" onclick="clicksound.playclip()"><img src="assets/images/8-contact.jpg" alt="Installation" title=""></a> </div> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> <div class="item-content"> <h5 class="item-title mbr-fonts-style display-7"><strong>Erstes Login</strong></h5> </div> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="content10 cid-u9N15oNQyP" id="CSS"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md"> <h5 class="mbr-section-title mbr-fonts-style mb-4 display-5"><strong>CSS-Code f眉r das Formular</strong></h5> <h6 class="mbr-section-subtitle mbr-fonts-style mb-4 display-7">Ich habe bereits einige CSS-Anpassungen am Formular zus盲tzlich vorgenommen.<br><br> M枚glicherweise k枚nnen diese an der einen oder anderen Stelle hilfreich sein.<br><br> <div> </div><div>Die Namen der CSS-Klassen k枚nnen bei euch abweichen. Am besten 眉berpr眉ft man dies mithilfe der Entwicklertools des Browsers.</div><br><div> </div><div>Es ist m枚glich, diese Anpassungen direkt in Mobirise vorzunehmen, anstatt in den Anwendungsdateien. Dadurch l盲sst sich sp盲ter besser nachvollziehen, welche 脛nderungen gemacht wurden.</div><br><div> </div><div>Hier sind meine individuellen CSS-Anpassungen, die ich im "CSS Editor" des "Code Editors" im Block mit dem Einbau der Skripte kopiert habe.</div><br><div> </div><div>Die CSS ist anpassbar, jedoch gestaltet sich dies hier manchmal schwierig, da viele CSS-Regeln als Inline-Anweisungen direkt an den Formular-Elementen stehen.</div><div> </div><div> </div><div> </div></h6> </div> <div class="col-md-12 col-lg-5"> <p class="mbr-text mbr-fonts-style display-7"> <code> /* Hintergrundfarbe Upload Feld */<br> #pjWrapperContactForm_1 .pjCfUploadField input {<br>   background-color: #9fdbf8 !important;<br> }<br> /* Button Upload Feld */<br> input::file-selector-button {<br>   font-weight: bold;<br>   color: #4479d9;<br>   background-color: #9fdbf8;<br>   padding: 0.4em;<br>   border: 1px solid #4479d9;<br>   border-radius: 6px;<br>   transition: 0.8s;<br> }<br> /* Button Upload Feld hover */<br> input[type="file"]::file-selector-button:hover {<br>   color: #ffffff;<br>   background-color: #4479d9;<br>   border: 1px solid #02569a;<br> }<br> /* Captcha Code */<br> img {<br>   max-width: 100px;<br>   height: 48px;<br>   border-radius: 6px;<br>   margin-left: 15px;<br>   float: inline-start;<br> }<br> /* Captcha Eingabefeld */<br> #pjCaptchaWrapper_1 {<br>   margin-left: 4px;<br> }<br> /* Button Senden */<br> .btn-lg {<br>   padding: 5px 40px!important;<br>   margin-left: -16px;<br>   margin-top: 30px;<br> }<br> /* Button Senden hover */<br> .btn-lg:hover {<br>   outline: #0177d7 solid 2px;<br>   outline-style: outset;<br> }<br> /* Erfolgsmeldung nach dem Senden */<br> .alert-success {<br>   color: #ffffff!important;<br>   background-color: #4479d9!important;<br>   border-color: black!important;<br>   margin-top: 7rem;<br> }<br> /* Erfolgsmeldung nach dem Senden am Smartphone */<br> @media (max-width: 767px) {<br>   .alert-success {<br>     margin-top: 2rem;<br>   }<br> } </code> </p> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-u9CArzhfEl" id="Code-Editor"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/code-editor.jpg" alt="Einbettungscode" title="Einbettungscode im Code-Editor"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Einbettungscode im Mobirise Block</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-u9CArzASW9" id="image3-2d"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/smtp-wahl-1.jpg" alt="Mail Versand" title="Ansicht vom Editor"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Ansicht vom Mail Versand via PHP oder SMTP</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image3 cid-u9CArzSN3f" id="image3-2e"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper"> <img src="assets/images/felder.jpg" alt="Felder" title="Ansicht vom Editor"> <p class="mbr-description mbr-fonts-style mt-2 align-center display-4"> Ansicht Formular Generator</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="image1 cid-u9DdpkJERK" id="image1-2g"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-lg-6"> <div class="image-wrapper"> <img src="assets/images/mail-admin.jpg" alt="Mail an Admin"> <p class="mbr-description mbr-fonts-style pt-2 align-center display-4"> Mail an Admin</p> </div> </div> <div class="col-12 col-lg"> <div class="text-wrapper"> <h3 class="mbr-section-title mbr-fonts-style mb-3 display-5"> <strong>Mail an Administrator</strong><br></h3> <p class="mbr-text mbr-fonts-style display-7"> <br>Bitte achtet darauf, dass ihr am Tab "Confirmation Email" den Token:<br><br>{Fields}<br><br>in dieser Form, mit den geschweiften Klammern, eintragt. Durch diesen Token werden alle Felder vom Formular als Mail an den Administrator gesendet. <br><br>Falls weitere Empf盲nger unter dem Men眉 "Users" erstellt wurden, k枚nnen auch diese eine Kopie erhalten.<br><br>Am Tab "Auto responder" kann eine automatische Antwort eingetragen werden und am Tab "Install" findet ihr den Code zum Eintragen im Code Editor.</p> </div> </div> </div> </div> </section> <section data-bs-version="5.1" class="footer7 cid-u9CArAaTfb" once="footers" id="Google"> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="col-12"> <p class="mbr-text mb-0 mbr-fonts-style display-7"> 漏 Copyright Mobirise-Tutorials.com<br><br><a href="https://www.mobirise-tutorials.com/Datenschutz/" class="text-primary" target="_blank">Datenschutz und Impressum</a><br><br><span style="color: #ffe161;">Google Translator</span><br><span style="font-size: 0.8rem;"><a href="javascript: void();" onclick="cookiefirst_show_settings();" class="text-white">Funktionale Cookies akzeptieren</a></span></p> <div class="d-flex justify-content-center"> <div style="text-align: center;" id="google_translate_element"></div> </div> </div> </div> </div> </section> <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/ytplayer/index.js"></script> <script src="assets/dropdown/js/navbar-dropdown.js"></script> <script src="assets/theme/js/script.js"></script>  <script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } // Initialize sound clips: var watersplash=createsoundbite("./sound/water-splash.mp3") var dropsound=createsoundbite("./sound/bubbles.mp3") var clicksound=createsoundbite("./sound/click.mp3") </script> <div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbr-arrow-up-icon mbr-arrow-up-icon-cm cm-icon cm-icon-smallarrow-up"></i></a></div> </body> </html>

CINXE.COM

Contact-Form