Springe zum Hauptinhalt

Wie das Formular Kontaktformular 7 anpassen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Kontaktformular 7 ist ein Plugin WordPress unglaublich beliebt für die Erstellung von Kontaktformularen. Sie können Formulare ohne HTML-Codierung erstellen. diese Formen kann Funktionen wie das anbieten CAPTCHAHerunterladen von Dateien Umfragefelder etc ...

Obwohl der 7-Standardstil für die meisten grundlegenden Kontaktformulare ausreicht, müssen Sie ihn häufig ändern.

Dadurch wird die Standardformularstruktur geändert, um den Zugriff zu erleichtern. Er fügt auch die Kurzwahlnummern [responsive] über dem Formular, damit ein Fehler beim Absenden des Formulars auf dem Formular angezeigt wird.

Wenn Sie noch nie eine Website in WordPress erstellt haben, entdecken Sie So installieren Sie ein WordPress-Blog mit einem FTP-Client

Für das Standardformular lautet der vom Plugin generierte Code:

[Antwort] <label> Ihr Name </ label> [Text * Ihre-Name-ID: Ihr-Name] <Label für = "Ihre-E-Mail"> Ihre E-Mail-Adresse (erforderlich) < / label> [E-Mail * Ihre-E-Mail-ID: Ihre-E-Mail-Adresse] <Label für = "Ihr-Thema"> Ihr Betreff </ Label> [Text Ihre Betreff-ID: Ihr Thema] <Label für = "Ihre Nachricht "> Ihre Nachricht </ label> [textarea your-message id: Ihre Nachricht] [submit" Send "]

Einige Plugins das Formular Kontaktformular anpassen 7

1. Kontaktformular 7 Style

Le-Plugin Kontakt-Formular 7 Stil hat eine Reihe von Stilen zur Auswahl.

Für Benutzer des Twenty Fifteen-Themas gibt es auch einen kompatiblen Stil.

Um einen Stil anzuwenden, gehen Sie zu " Kontaktstile> Schnelle Bearbeitung Überprüfen Sie das Formular, in dem Sie den Stil anwenden möchten, und klicken Sie dann auf " Aktualisierung ".

2. Kontaktformular 7 Skins

So verwenden Skin Kontaktformular 7, erstellen Sie ein neues Kontaktformular und scrollen Sie zum Abschnitt Skins. Sie können eine Vorlage und einen Stil für Ihr Formular auswählen.

Hier finden Sie Modelle, die sich den Formen von widmenévénements, anmeldung und hinweis.

So sieht das Umfrageformular mit dem Topaz-Stil unter Verwendung des Twenty Fifteen-Themas aus.

3. Materialdesign für Kontaktformular

Diese Stile werden auf der Grundlage der Stil Material Design.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Dieses Plugin schlägt vor, dass Sie das Standardformular entfernen und dessen Shortcodes verwenden.

Hier ist ein Beispiel mit dem Thema Hestia. Beachten Sie die unverankerte Beschriftung, wenn der Zeiger in einem Formularfeld bewegt wird.

7-Kontaktformulartest für einige WordPress-Themes

Kontaktformular mit ColorMag WordPress Theme

In den meisten Fällen übernimmt das Kontaktformular 7 den Stil Ihres WordPress-Themas. Dies ist beim Thema der Fall Coral Dunkel.

Kontaktformular zum Thema WordPress ColorMag

Hier ist das Formular ohne benutzerdefinierten Stil. Er erbt die Farbe des blauen Knopfes ColorMag WordPress-Theme.

Zunächst habe ich ein Foto hochgeladen, das als Hintergrundbild für das Formular verwendet werden soll, und den Beschriftungscode von grau in weiß mit einem blauen Schatten auf dem Text geändert.

Die folgenden Änderungen wurden vorgenommen, um die Ränder zwischen Formularbeschriftungen und Formularfeldern zu vergrößern, die Subtraktionsschaltfläche zu ändern und einen Rahmen hinzuzufügen, wenn der Zeiger in die Formularfelder eintritt.

Die Anzeige von Fehler- / Erfolgsmeldungen beim Absenden des Formulars muss ebenfalls so geändert werden, dass sie korrekt angezeigt werden.

Das GIF, das beim Absenden des Formulars ausgeführt wird, wurde nicht ordnungsgemäß angezeigt. Ich habe eine Alternative zu Loading.io gefunden und mit CSS darauf verwiesen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Hier ist das resultierende Formular:

Hier ist der Code:

div.wpcf7 {Marge: 0; Polsterung: 1.5em; Hintergrund: URL ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; } .wpcf7-Label, .wpcf7-submit {Farbe: weiß; Textschatten: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {background: #186d8e; } .wpcf7-form-control: focus {border: 2px fest #289dcc; } div.wpcf7-response-output {background: #F8F8F8; Text ausrichten: Mitte; Breite: 92.5%; Marge: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; } span.wpcf7-not-valid-tip {background: #F8F8F8; Anzeige: Inline-Block; Breite: Auto; Auffüllen: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); Breite: 50px; Höhe: 50px; }

Wenn Sie den Code nicht kritzeln müssen, empfehlen wir Ihnen, unsere zu überprüfen 10 WordPress-Plugins zum Erstellen eines Kontaktformulars in Ihrem Blog

Entdecken Sie auch 3 Premium-Alternativen, mit denen Sie Ihre Kontaktformulare erstellen können.

1. W8-Kontaktformular

Das W8-Kontaktformular ist eines der beliebtesten Plugins für Kontaktformulare in WordPress. Es bietet alle Funktionen wie das Senden an mehrere Empfänger, die Unterstützung von Animationen, die unbegrenzte Erstellung von Formularen, verschiedene Stile und eine Vielzahl zusätzlicher Anpassungsoptionen.

Außerdem erhält Ihre Website oder Ihr Blog ein professionelles System, mit dem Sie einfacher mit Ihren Kunden in Kontakt treten können. Sie können alle Ihre Formen nach Ihren Bedürfnissen und Ihrem Geschmack personalisieren.

Download | Demo | Web-Hosting

2. Kontaktieren Sie uns

Contact Us Form ist ein responsives WordPress-Plugin und ein einfaches, aber reichhaltiges Anpassungstool, das ein übersichtliches und ermutigendes Formular anzeigt, in dem Ihre Besucher Sie mit ihrer Nachricht kontaktieren können.

Sie können die erforderlichen Felder definieren, das beste Layout der Felder auswählen und es vollständig anpassen, um Ihre Kunden oder Besucher zu ermutigen, ihre Vorschläge oder Nachrichten zu hinterlassen.

Richten Sie einfach die E-Mail-Adresse ein, unter der Sie die Nachrichten erhalten möchten, und verwenden Sie sie, um Ihr Unternehmen in die profitabelste Richtung zu führen.

Download | Demo | Web-Hosting

3. Slick Popup Pro

Slick Popup Pro ist eine relativ einfache und leichtgewichtige WordPress-Erweiterung, die alle vom Plugin erstellten Formulare konvertiert Kontaktformular 7 in einem Popup. Sie verwendet das Formular und konvertiert es in ein schönes und perfekt ansprechendes Popup.

Das Formular-Popup kann verschiedene Zwecke haben, darunter ein Formular zur Sammlung von Informationen, ein Kontaktformular, ein Anmeldeformular, ein Angebotsformular, ein Formular für Vorschläge / Beschwerden und andere.

Download | Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Empfohlene Ressourcen

Entdecken Sie weitere empfohlene Ressourcen, mit denen Sie Kontaktformulare auf Ihrer Website oder in Ihrem Blog besser erstellen und verwalten können.

Fazit

Voila! Das ist alles für dieses Tutorial. Ich hoffe, Sie haben weitere Ideen, um Ihr Kontaktformular anzupassen. Zögern Sie nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...

Dieser Artikel enthält Kommentare 2
  1. Um eine professionelle Website zu erstellen, muss man präzise und präzise sein, um den Benutzer schnell zu überzeugen. Wir bieten Ihnen die Möglichkeit, eine professionelle Website zu erstellen, sei es zum Thema der Erstellung einer Showcase-Site oder eines Portfolios. Die Erstellung einer Online-Site oder einer professionellen Website ist nun für alle zugänglich. Aus diesem Grund fügt Ihre Orson-Website all diese Funktionen von Natur aus hinzu.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
106 Aktien
Aktie4
tweet
Registrieren102