✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden

11

Eine WordPress-Website zu haben bedeutet, dass Sie höchstwahrscheinlich irgendwo ein Kontaktformular benötigen, sei es für einen Newsletter, eine Kontaktseite, eine Umfrage oder für etwas anderes. Mit CMS wie WordPress ist die Einrichtung eines Kontaktformulars eine ziemlich einfache Aufgabe. Es gibt nämlich viele Kontaktformular-Plugins, die Sie verwenden können, und Contact Form 7 ist eines der beliebtesten.

Damit Sie sich ein klareres Bild davon machen können, was das Contact Form 7-Plugin kann, finden Sie hier einige Beispiele für Kontaktformulare, die mit diesem Plugin erstellt wurden und mit Premium-Designs auf ThemeForest geliefert werden:

Es ist nicht nur einfach, jegliche Art von Kontaktformular in WordPress zu erstellen, sondern der Prozess selbst ist auch gut dokumentiert. Deshalb gehen wir gleich zur Sache.

Durch die Verwendung dieses Plugins müssen Sie sich nicht die Mühe machen, ein benutzerdefiniertes Formular und Backend-Funktionen zu erstellen, was den Prozess drastisch beschleunigt. Was Sie jedoch möglicherweise als problematisch empfinden, ist eine Schaltfläche zum Senden in Contact Form 7, die ein Eingabeelement vom Typ "submit" ist.

Selbst mit der Standard-Eingabe-Senden-Schaltfläche haben Sie ein schönes Arbeitsformular. Dennoch tritt  das Problem auf, wenn Sie diesem Element ein zusätzliches Styling hinzufügen möchten. Wie Sie vielleicht bereits wissen, gibt es gewisse Einschränkungen, wenn es um CSS geht, da Sie die Pseudoelemente hier nicht verwenden können, wie :before oder :after, was praktisch sein kann, um eine Hover-Unterstreichung, ein ikonisches Schriftsymbol oder irgendetwas anderes für die Animation hinzuzufügen was Ihrem Formular einen schönen letzten Schliff verleihen würde.

Natürlich ist es möglich, hervorragende Animationen zu erzielen, indem man einfach eine Submit-Schaltfläche mit einem div mit benutzerdefinierter Klasse umschließt, aber wenn man die Eingabe in eine Schaltfläche ändert, hat man viel mehr Kontrolle.

Sehen wir uns an, wie Sie ein HTML5-Schaltflächenelement als Sendeschaltfläche für Ihr Kontaktformular verwenden können.

Vor der Änderung sieht ein Submit-Button so aus.

Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden

Zuerst müssen wir das Standard-Submit-Tag von Contact Form 7 entfernen. Sie können dies mit dieser einfachen Codezeile tun:

/ Standard-Submit-Tag entfernen /

remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);

/ Standard-Submit- Tag entfernen / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);

/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');

Zweitens müssen wir eine Aktion mit unserer Funktion hinzufügen, die unser benutzerdefiniertes Markup für die Schaltfläche enthält. Dies ist eine weitere einfache Zeile:

/ Aktion mit Funktion hinzufügen, die unser Button-Markup verarbeitet /

add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);

/ Aktion mit Funktion hinzufügen, die unser Button-Markup verarbeitet / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);

/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');

Als Nächstes fügen wir ein Tag hinzu, das eine Schaltflächen-Handler-Funktion aufruft:

/ Submit-Button-Tag hinzufügen /

if (!function_exists(‘twentysixteen_child_cf7_button’)) {

Funktion Twentysixteen_child_cf7_button() {

wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);

/ Submit- Button-Tag hinzufügen / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } }

/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}

Schließlich müssen wir dem Handler ein Markup hinzufügen:

/ out button markup inside handler /

if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {

Funktion Twentysixteen_child_cf7_button_handler($tag) {

$tag = neuer WPCF7_FormTag($tag);

$class = wpcf7_form_controls_class($tag->type);

$atts[‘class’] = $tag->get_class_option($class);

$atts[‘class’] .= ‘sechzehn-kind-benutzerdefinierte-btn’;

$atts[‘id’] = $tag->get_id_option();

$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);

$value = isset($tag->values[0])? $tag->values[0]: ";

$value = esc html_ (‘Kontaktieren Sie uns’, ‘twentysixteen’);

$atts[‘type’] = ‘submit’;

$atts = wpcf7_format_atts($atts);

$html = sprintf(”, $atts, $value);

/ Schaltflächen-Markup innerhalb des Handlers ausgeben / if (!Funktion existiert(‘twentysixteen child_cf7_button_handler’)) { Funktion Twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $class = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘sechzehn-kind-benutzerdefinierte-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->values[0])? $tag->values[0]: “; if (empty($value)) { $value = esc_html (‘Kontaktieren Sie uns’, ‘twentysixteen’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); gib $html zurück; } }

/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0])? $tag->values[0]: '';
if (empty($value)) {
$value = esc_html__('Contact Us', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('', $atts, $value);
return $html;
}
}

Die Handler-Funktion ist der wichtigste Teil. Neben dem Drucken einer Standardklasse und ID werden wir auch eine benutzerdefinierte CSS-Klasse darin hinzufügen. Im letzten Teil, in dem wir eine $html-Variable haben, platzieren wir ein Schaltflächen-Markup mit dem Chevron-Symbol von FontAwesome. Beachten Sie, dass Sie diese FontAwesome-Schriftart in Ihrem Design haben müssen. Wenn Sie es nicht haben, stellen Sie sicher, dass Sie ein Plugin finden, das es enthält.

Jetzt sieht unser geänderter Submit-Button so aus:

Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden

Wie Sie sehen können, enthält Ihre Seite, wenn Sie sie mit dem Chrome-Webinspektor untersuchen, genau das gleiche Markup, das wir im Handler festgelegt haben.

Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden

Und hier der komplette Code:

/ Standard-Submit-Tag entfernen /

remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);

/ Aktion mit Funktion hinzufügen, die unser Button-Markup verarbeitet /

add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);

/ Submit-Button-Tag hinzufügen /

if (!function_exists(‘twentysixteen_child_cf7_button’)) {

Funktion Twentysixteen_child_cf7_button () {

wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);

/ out button markup inside handler /

if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {

Funktion Twentysixteen_child_cf7_button_handler($tag) {

$tag = neuer WPCF7_FormTag($tag);

$class = wpcf7_form_controls_class($tag->type);

$atts[‘class’] = $tag->get_class_option($class);

$atts[‘class’] .= ‘sechzehn-kind-benutzerdefinierte-btn’;

$atts[‘id’] = $tag->get_id_option();

$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);

$value = isset($tag->values[0])? $tag->values[0]: “;

$value = esc html_ (‘Senden’, ‘sechzehnundzwanzig’);

$atts[‘type’] = ‘submit’;

$atts = wpcf7_format_atts($atts);

$html = sprintf(”, $atts, $value);

/ Standard-Submit- Tag entfernen / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / Aktion mit Funktion hinzufügen, die unser Button-Markup verarbeitet / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / Submit- Button-Tag hinzufügen / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / Markup der Schaltfläche im Handler ausgeben / if (!Funktion existiert(‘twentysixteenchild_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $class = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘sechzehn-kind-benutzerdefinierte-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->values[0])? $tag->values[0]: “; if (empty($value)) { $value = esc_html (‘Send’, ‘twentysixteen’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); gib $html zurück; } }

/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');
/*adding action with function which handles our button markup*/
add_action('wpcf7_init', 'twentysixteen_child_cf7_button');
/*adding out submit button tag*/
if (!function_exists('twentysixteen_child_cf7_button')) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');
}
}
/*out button markup inside handler*/
if (!function_exists('twentysixteen_child_cf7_button_handler')) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$atts = array();
$atts['class'] = $tag->get_class_option($class);
$atts['class'] .= ' twentysixteen-child-custom-btn';
$atts['id'] = $tag->get_id_option();
$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);
$value = isset($tag->values[0])? $tag->values[0]: '';
if (empty($value)) {
$value = esc_html__('Send', 'twentysixteen');
}
$atts['type'] = 'submit';
$atts = wpcf7_format_atts($atts);
$html = sprintf('', $atts, $value);
return $html;
}
}

Wenn alles vorhanden ist, können Sie zusätzliche Klassen und Markups verwenden, um die Schaltfläche nach Ihren Wünschen zu gestalten. Als Extra fügen wir unten eine einfache Hover-Animation mit einem CSS-Code hinzu.

button.twentysixteen-child-custom-btn {

-webkit-transition: -webkit-background .2s Ease-out;

-moz-transition: -moz-background .2s Ease-out;

Übergang: Hintergrund .2s Leichtigkeit;

button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {

button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {

-webkit-transition: -webkit-transform .2s Ease-out;

-moz-transition: -moz-transform .2s Ease-out;

Übergang: transform .2s Ease-out;

button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {

-webkit-transform: translate3d(3px,0,0);

-moz-transform: translate3d(3px,0,0);

transformieren: translate3d (3px,0,0);

button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transition: -webkit-background .2s Ease-out; -moz-transition: -moz-background .2s Ease-out; Übergang: Hintergrund .2s Leichtigkeit; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {Rand rechts: 7px; Schriftgröße: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { Schriftgröße: 12px; Position: relativ; Anzeige: Inline-Block; vertikale Ausrichtung: Mitte; Zeilenhöhe: erben; -webkit-transition: -webkit-transform .2s Ease-out; -moz-transition: -moz-transform .2s Ease-out; Übergang: transform .2s Ease-out; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); transformieren: translate3d (3px,0,0); }

button.twentysixteen-child-custom-btn {
padding: 15px 45px;
-webkit-transition: -webkit-background .2s ease-out;
-moz-transition: -moz-background .2s ease-out;
transition: background .2s ease;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
margin-right: 7px;
font-size: 15px;
}
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
font-size: 12px;
position: relative;
display: inline-block;
vertical-align: middle;
line-height: inherit;
-webkit-transition: -webkit-transform .2s ease-out;
-moz-transition: -moz-transform .2s ease-out;
transition: transform .2s ease-out;
}
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {
-webkit-transform: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
transform: translate3d(3px,0,0);
}

Das CSS kann innerhalb der CSS-Datei des untergeordneten Themas oder einfach über das WordPress-Backend > Aussehen > Anpassen > Zusätzliches CSS-Feld hinzugefügt werden, und damit haben Sie eine gut aussehende Animation eines sich bewegenden Pfeils beim Schweben.

Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden

Und so ersetzen Sie eine Contact Form 7-Schaltfläche zum Senden durch ein HTML5-Schaltflächenelement. Hoffentlich finden Sie unsere Anweisungen hilfreich. Wenn ja, teilen Sie es bitte mit anderen, die es ebenfalls verwenden können.

Aufnahmequelle: wpklik.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen