{"id":367990,"date":"2022-10-25T11:13:00","date_gmt":"2022-10-25T08:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367990"},"modified":"2023-05-09T17:24:33","modified_gmt":"2023-05-09T14:24:33","slug":"verwenden-eines-html5-button-elements-als-kontaktformular-7-senden","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/verwenden-eines-html5-button-elements-als-kontaktformular-7-senden\/","title":{"rendered":"Verwenden eines HTML5-Button-Elements als Kontaktformular 7 Senden"},"content":{"rendered":"\n

Eine WordPress-Website zu haben bedeutet, dass Sie h\u00f6chstwahrscheinlich irgendwo ein Kontaktformular ben\u00f6tigen, sei es f\u00fcr einen Newsletter, eine Kontaktseite<\/a>, eine Umfrage oder f\u00fcr etwas anderes. Mit CMS wie WordPress ist die Einrichtung eines Kontaktformulars eine ziemlich einfache Aufgabe<\/strong>. Es gibt n\u00e4mlich viele Kontaktformular-Plugins<\/a>, die Sie verwenden k\u00f6nnen, und Contact Form 7<\/a> ist eines der beliebtesten.<\/p>\n

Damit Sie sich ein klareres Bild davon machen k\u00f6nnen, was das Contact Form 7-Plugin kann, finden Sie hier einige Beispiele f\u00fcr Kontaktformulare, die mit diesem Plugin erstellt wurden und mit Premium-Designs auf ThemeForest geliefert werden:<\/p>\n

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.<\/p>\n

Durch die Verwendung dieses Plugins m\u00fcssen Sie sich nicht die M\u00fche machen, ein benutzerdefiniertes Formular und Backend-Funktionen zu erstellen, was den Prozess drastisch beschleunigt. Was Sie jedoch m\u00f6glicherweise als problematisch empfinden, ist eine Schaltfl\u00e4che zum Senden in Contact Form 7, die ein Eingabeelement vom Typ "submit" ist.<\/p>\n

Selbst mit der Standard-Eingabe-Senden-Schaltfl\u00e4che haben Sie ein sch\u00f6nes Arbeitsformular. Dennoch tritt \u00a0das Problem auf, wenn Sie diesem Element ein zus\u00e4tzliches Styling hinzuf\u00fcgen m\u00f6chten<\/strong>. Wie Sie vielleicht bereits wissen, gibt es gewisse Einschr\u00e4nkungen, wenn es um CSS geht, da Sie die Pseudoelemente hier nicht verwenden k\u00f6nnen, wie :before oder :after, was praktisch sein kann, um eine Hover-Unterstreichung, ein ikonisches Schriftsymbol oder irgendetwas anderes f\u00fcr die Animation hinzuzuf\u00fcgen was Ihrem Formular einen sch\u00f6nen letzten Schliff verleihen w\u00fcrde.<\/p>\n

Nat\u00fcrlich ist es m\u00f6glich, hervorragende Animationen zu erzielen, indem man einfach eine Submit-Schaltfl\u00e4che mit einem div mit benutzerdefinierter Klasse umschlie\u00dft, aber wenn man die Eingabe in eine Schaltfl\u00e4che \u00e4ndert, hat man viel mehr Kontrolle.<\/p>\n

Sehen wir uns an, wie Sie ein HTML5-Schaltfl\u00e4chenelement als Sendeschaltfl\u00e4che f\u00fcr Ihr Kontaktformular verwenden k\u00f6nnen.<\/p>\n

Vor der \u00c4nderung sieht ein Submit-Button so aus.<\/p>\n

\"Verwenden<\/a><\/p>\n

Zuerst m\u00fcssen wir das Standard-Submit-Tag von Contact Form 7 entfernen. Sie k\u00f6nnen dies mit dieser einfachen Codezeile tun:<\/p>\n

\/ Standard-Submit-Tag entfernen \/<\/p>\n

remove_action(‚wpcf7_init‘, ‚wpcf7_add_form_tag_submit‘);<\/p>\n

\/ Standard-Submit- Tag entfernen \/ remove_action(‚wpcf7_init‘, ‚wpcf7_add_form_tag_submit‘);<\/p>\n

\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');<\/code><\/pre>\n
Zweitens m\u00fcssen wir eine Aktion mit unserer Funktion hinzuf\u00fcgen, die unser benutzerdefiniertes Markup f\u00fcr die Schaltfl\u00e4che enth\u00e4lt<\/strong>. Dies ist eine weitere einfache Zeile:<\/p>\n
\/ Aktion mit Funktion hinzuf\u00fcgen, die unser Button-Markup verarbeitet \/<\/p>\n
add_action(‚wpcf7_init‘, ‚twentysixteen_child_cf7_button‘);<\/p>\n
\/ Aktion mit Funktion hinzuf\u00fcgen, die unser Button-Markup verarbeitet \/ add_action(‚wpcf7_init‘, ‚twentysixteen_child_cf7_button‘);<\/p>\n
\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');<\/code><\/pre>\n
Als N\u00e4chstes f\u00fcgen wir ein Tag hinzu, das eine Schaltfl\u00e4chen-Handler-Funktion aufruft:<\/p>\n
\/ Submit-Button-Tag hinzuf\u00fcgen \/<\/p>\n
if (!function_exists(‚twentysixteen_child_cf7_button‘)) {<\/p>\n
Funktion Twentysixteen_child_cf7_button() {<\/p>\n
wpcf7_add_form_tag(’submit‘, ‚twentysixteen_child_cf7_button_handler‘);<\/p>\n
\/ Submit- Button-Tag hinzuf\u00fcgen \/ if (!function_exists(‚twentysixteen_child_cf7_button‘)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(’submit‘, ‚twentysixteen_child_cf7_button_handler‘); } }<\/p>\n
\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}<\/code><\/pre>\n
Schlie\u00dflich m\u00fcssen wir dem Handler ein Markup hinzuf\u00fcgen:<\/p>\n
\/ out button markup inside handler \/<\/p>\n
if (!function_exists(‚twentysixteen_child_cf7_button_handler‘)) {<\/p>\n
Funktion Twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = neuer WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‚class‘] = $tag->get_class_option($class);<\/p>\n
$atts[‚class‘] .= ’sechzehn-kind-benutzerdefinierte-btn‘;<\/p>\n
$atts[‚id‘] = $tag->get_id_option();<\/p>\n
$atts[‚tabindex‘] = $tag->get_option(‚tabindex‘, ‚int‘, true);<\/p>\n
$value = isset($tag->values[0])? $tag->values[0]: ";<\/p>\n
$value = esc html_ (‚Kontaktieren Sie uns‘, ‚twentysixteen‘);<\/p>\n
$atts[‚type‘] = ’submit‘;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(“, $atts, $value);<\/p>\n
\/ Schaltfl\u00e4chen-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\u00fcck; } }<\/p>\n
\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag->type);\n$atts = array();\n$atts['class'] = $tag->get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag->get_id_option();\n$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);\n$value = isset($tag->values[0])? $tag->values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Contact Us', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n
Die Handler-Funktion ist der wichtigste Teil. Neben dem Drucken einer Standardklasse und ID werden wir auch eine benutzerdefinierte CSS-Klasse darin hinzuf\u00fcgen<\/strong>. Im letzten Teil, in dem wir eine $html-Variable haben, platzieren wir ein Schaltfl\u00e4chen-Markup mit dem Chevron-Symbol von FontAwesome. Beachten Sie, dass Sie diese FontAwesome-Schriftart in Ihrem Design haben m\u00fcssen.<\/strong> Wenn Sie es nicht haben, stellen Sie sicher, dass Sie ein Plugin finden, das es enth\u00e4lt.<\/p>\n
Jetzt sieht unser ge\u00e4nderter Submit-Button so aus:<\/p>\n
\"Verwenden<\/a><\/p>\n
Wie Sie sehen k\u00f6nnen, enth\u00e4lt Ihre Seite, wenn Sie sie mit dem Chrome-Webinspektor untersuchen, genau das gleiche Markup, das wir im Handler festgelegt haben.<\/p>\n
\"Verwenden<\/a><\/p>\n
Und hier der komplette Code:<\/p>\n
\/ Standard-Submit-Tag entfernen \/<\/p>\n
remove_action(‚wpcf7_init‘, ‚wpcf7_add_form_tag_submit‘);<\/p>\n
\/ Aktion mit Funktion hinzuf\u00fcgen, die unser Button-Markup verarbeitet \/<\/p>\n
add_action(‚wpcf7_init‘, ‚twentysixteen_child_cf7_button‘);<\/p>\n
\/ Submit-Button-Tag hinzuf\u00fcgen \/<\/p>\n
if (!function_exists(‚twentysixteen_child_cf7_button‘)) {<\/p>\n
Funktion Twentysixteen_child_cf7_button () {<\/p>\n
wpcf7_add_form_tag(’submit‘, ‚twentysixteen_child_cf7_button_handler‘);<\/p>\n
\/ out button markup inside handler \/<\/p>\n
if (!function_exists(‚twentysixteen_child_cf7_button_handler‘)) {<\/p>\n
Funktion Twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = neuer WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‚class‘] = $tag->get_class_option($class);<\/p>\n
$atts[‚class‘] .= ’sechzehn-kind-benutzerdefinierte-btn‘;<\/p>\n
$atts[‚id‘] = $tag->get_id_option();<\/p>\n
$atts[‚tabindex‘] = $tag->get_option(‚tabindex‘, ‚int‘, true);<\/p>\n
$value = isset($tag->values[0])? $tag->values[0]: „;<\/p>\n
$value = esc html_ (‚Senden‘, ’sechzehnundzwanzig‘);<\/p>\n
$atts[‚type‘] = ’submit‘;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(“, $atts, $value);<\/p>\n
\/ Standard-Submit- Tag entfernen \/ remove_action(‚wpcf7_init‘, ‚wpcf7_add_form_tag_submit‘); \/ Aktion mit Funktion hinzuf\u00fcgen, die unser Button-Markup verarbeitet \/ add_action(‚wpcf7_init‘, ‚twentysixteen_child_cf7_button‘); \/ Submit- Button-Tag hinzuf\u00fcgen \/ 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\u00e4che 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\u00fcck; } }<\/p>\n
\/*removing default submit tag*\/\nremove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');\n\/*adding action with function which handles our button markup*\/\nadd_action('wpcf7_init', 'twentysixteen_child_cf7_button');\n\/*adding out submit button tag*\/\nif (!function_exists('twentysixteen_child_cf7_button')) {\nfunction twentysixteen_child_cf7_button() {\nwpcf7_add_form_tag('submit', 'twentysixteen_child_cf7_button_handler');\n}\n}\n\/*out button markup inside handler*\/\nif (!function_exists('twentysixteen_child_cf7_button_handler')) {\nfunction twentysixteen_child_cf7_button_handler($tag) {\n$tag = new WPCF7_FormTag($tag);\n$class = wpcf7_form_controls_class($tag->type);\n$atts = array();\n$atts['class'] = $tag->get_class_option($class);\n$atts['class'] .= ' twentysixteen-child-custom-btn';\n$atts['id'] = $tag->get_id_option();\n$atts['tabindex'] = $tag->get_option('tabindex', 'int', true);\n$value = isset($tag->values[0])? $tag->values[0]: '';\nif (empty($value)) {\n$value = esc_html__('Send', 'twentysixteen');\n}\n$atts['type'] = 'submit';\n$atts = wpcf7_format_atts($atts);\n$html = sprintf('', $atts, $value);\nreturn $html;\n}\n}<\/code><\/pre>\n
Wenn alles vorhanden ist, k\u00f6nnen Sie zus\u00e4tzliche Klassen und Markups verwenden, um die Schaltfl\u00e4che nach Ihren W\u00fcnschen zu gestalten<\/strong>. Als Extra f\u00fcgen wir unten eine einfache Hover-Animation mit einem CSS-Code hinzu.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition: -webkit-background .2s Ease-out;<\/p>\n
-moz-transition: -moz-background .2s Ease-out;<\/p>\n
\u00dcbergang: Hintergrund .2s Leichtigkeit;<\/p>\n
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {<\/p>\n
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transition: -webkit-transform .2s Ease-out;<\/p>\n
-moz-transition: -moz-transform .2s Ease-out;<\/p>\n
\u00dcbergang: transform .2s Ease-out;<\/p>\n
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transform: translate3d(3px,0,0);<\/p>\n
-moz-transform: translate3d(3px,0,0);<\/p>\n
transformieren: translate3d (3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transition: -webkit-background .2s Ease-out; -moz-transition: -moz-background .2s Ease-out; \u00dcbergang: Hintergrund .2s Leichtigkeit; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {Rand rechts: 7px; Schriftgr\u00f6\u00dfe: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { Schriftgr\u00f6\u00dfe: 12px; Position: relativ; Anzeige: Inline-Block; vertikale Ausrichtung: Mitte; Zeilenh\u00f6he: erben; -webkit-transition: -webkit-transform .2s Ease-out; -moz-transition: -moz-transform .2s Ease-out; \u00dcbergang: 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); }<\/p>\n
button.twentysixteen-child-custom-btn {\npadding: 15px 45px;\n-webkit-transition: -webkit-background .2s ease-out;\n-moz-transition: -moz-background .2s ease-out;\ntransition: background .2s ease;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {\nmargin-right: 7px;\nfont-size: 15px;\n}\nbutton.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {\nfont-size: 12px;\nposition: relative;\ndisplay: inline-block;\nvertical-align: middle;\nline-height: inherit;\n-webkit-transition: -webkit-transform .2s ease-out;\n-moz-transition: -moz-transform .2s ease-out;\ntransition: transform .2s ease-out;\n}\nbutton.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {\n-webkit-transform: translate3d(3px,0,0);\n-moz-transform: translate3d(3px,0,0);\ntransform: translate3d(3px,0,0);\n}<\/code><\/pre>\n
Das CSS kann innerhalb der CSS-Datei des untergeordneten Themas oder einfach \u00fcber das WordPress-Backend > Aussehen > Anpassen > Zus\u00e4tzliches CSS-Feld hinzugef\u00fcgt werden, und damit haben Sie eine gut aussehende Animation eines sich bewegenden Pfeils beim Schweben.<\/p>\n
\"Verwenden<\/a><\/p>\n
Und so ersetzen Sie eine Contact Form 7-Schaltfl\u00e4che zum Senden durch ein HTML5-Schaltfl\u00e4chenelement. Hoffentlich finden Sie unsere Anweisungen hilfreich. Wenn ja, teilen Sie es bitte mit anderen, die es ebenfalls verwenden k\u00f6nnen.<\/p>\n
Aufnahmequelle:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Wenn Sie Ihrem Kontaktformular ein zus\u00e4tzliches Design hinzuf\u00fcgen m\u00f6chten, k\u00f6nnen Sie ein HTML5-Schaltfl\u00e4chenelement als Sendeschaltfl\u00e4che verwenden. Hier erfahren Sie, wie Sie es verwenden.<\/p>\n","protected":false},"author":1,"featured_media":364438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-367990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=367990"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/367990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=367990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=367990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=367990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}