Använda ett HTML5-knappelement som kontaktformulär 7 Skicka
Att ha en WordPress-webbplats innebär att du med största sannolikhet kommer behöva ha ett kontaktformulär någonstans, oavsett om det är för ett nyhetsbrev, en kontaktsida, en omröstning eller för något annat. Med CMS som WordPress är det en ganska enkel uppgift att skapa ett kontaktformulär. Det finns nämligen många plugins för kontaktformulär som du kan använda, och Contact Form 7 är en av de mest populära.
Så att du kan få en tydligare bild av vad Contact Form 7-plugin kan göra, här är några exempel på kontaktformulär gjorda med detta plugin som kommer med premiumteman på ThemeForest:
Det är inte bara enkelt att skapa någon form av kontaktformulär i WordPress, utan själva processen är också väl dokumenterad. Det är därför vi går rakt på sak.
Genom att använda detta plugin behöver du inte gå igenom besväret med att skapa ett anpassat formulär och backend-funktionalitet, vilket kommer att påskynda processen drastiskt. Det du dock kan tycka är problematiskt är en Skicka-knapp för kontaktformulär 7 som är ett inmatningselement av type="submit".
Även med den vanliga inmatningsknappen kommer du att ha en trevlig arbetsform. Ändå uppstår problemet om du vill lägga till en ytterligare styling för detta element. Som du kanske redan vet finns det vissa begränsningar när det kommer till css eftersom du inte kan använda pseudoelementen här, som :before eller :after, vilket kan vara praktiskt för att lägga till någon svävande understrykning, ikonisk teckensnittsikon eller något annat för animering som skulle komma som en fin finish på din form.
Naturligtvis kan det vara möjligt att uppnå enastående animationer genom att bara slå in en skicka-knapp med någon div med anpassad klass, men genom att ändra ingång till knapp kan du få mycket mer kontroll.
Låt oss se hur du kan använda ett HTML5-knappelement som en skickaknapp för ditt kontaktformulär.
Innan ändringen kommer en skicka-knapp att se ut så här.
Först måste vi ta bort standardinlämningstaggen för kontaktformulär 7. Du kan göra det med denna enkla kodrad:
/ tar bort standard inlämningstagg /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ tar bort standard submit-tagg / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');För det andra måste vi lägga till åtgärder med vår funktion som kommer att hålla vår anpassade markering för knappen. Detta är en annan enkel rad:
/ lägga till åtgärd med funktion som hanterar vår knappmarkering /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ lägga till åtgärd med funktion som hanterar vår knappmarkering / 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');Därefter lägger vi till en tagg som anropar en knapphanterarfunktion:
/ lägga till tagg för Skicka-knapp /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ lägga till tagg för skicka-knapp / 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');
}
}Slutligen måste vi lägga till en markering till hanteraren:
/ ut-knapp markering inuti hanteraren /
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$klass = wpcf7_form_controls_class($tag->typ);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ tjugosexton-barn-anpassad-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$value = isset($tag->värden[0])? $tag->värden[0]: ";
$value = esc html_ (‘Kontakta oss’, ‘twentysixteen’);
$atts[‘type’] = ‘skicka’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $värde);
/ ut knappmarkering inuti hanteraren / if (!function exists(‘twentysixteen child_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $klass = wpcf7_form_controls_class($tag->typ); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ tjugosexton-barn-anpassad-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->värden[0])? $tag->värden[0]: “; if (empty($value)) { $value = esc_html (‘Kontakta oss’, ‘twentysixteen’); } $atts[‘type’] = ‘skicka’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $värde); returnera $html; } }
/*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;
}
}Hanterarfunktionen är den viktigaste delen. Förutom att skriva ut en standardklass och ett ID kommer vi också att lägga till en anpassad css-klass i den. I den sista delen där vi har en $html-variabel, lägger vi en knappmarkering med FontAwesome chevron-ikon. Observera att du måste ha detta FontAwesome-teckensnitt i ditt tema. Om du inte har det, se till att hitta ett plugin som innehåller det.
Nu kommer vår ändrade skicka-knapp att se ut så här:
Som du kan se, när du inspekterar din sida med Chrome-webbinspektören, innehåller den exakt samma uppmärkning som vi har ställt in i hanteraren.
Och här är hela koden:
/ tar bort standard inlämningstagg /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ lägga till åtgärd med funktion som hanterar vår knappmarkering /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ lägga till tagg för Skicka-knapp /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ ut-knapp markering inuti hanteraren /
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
function twentysixteen_child_cf7_button_handler($tag) {
$tag = new WPCF7_FormTag($tag);
$klass = wpcf7_form_controls_class($tag->typ);
$atts[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ tjugosexton-barn-anpassad-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$value = isset($tag->värden[0])? $tag->värden[0]: “;
$value = esc html_ (‘Skicka’, ‘tjugosexton’);
$atts[‘type’] = ‘skicka’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $värde);
/ tar bort standard submit-tagg / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / lägga till åtgärd med funktion som hanterar vår knappmarkering / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / lägga till tagg för skicka-knapp / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / ut-knappmarkering inuti hanteraren / if (!funktion existerar(‘twentysixteenchild_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $klass = wpcf7_form_controls_class($tag->typ); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘ tjugosexton-barn-anpassad-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $value = isset($tag->värden[0])? $tag->värden[0]: “; if (empty($value)) { $value = esc_html (‘Skicka’, ‘tjugosexton’); } $atts[‘type’] = ‘skicka’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $värde); returnera $html; } }
/*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;
}
}Med allt på plats kan du använda extra klasser och markeringar för att styla knappen efter eget tycke. Som extra kommer vi att lägga till en enkel svävningsanimation till den med en css-kod nedan.
button.twentysixteen-child-custom-btn {
-webkit-transition: -webkit-bakgrund .2s ease-out;
-moz-transition: -moz-bakgrund .2s ease-out;
övergång: bakgrund .2s lätthet;
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;
övergång: omvandla .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);
button.twentysixteen-child-custom-btn { utfyllnad: 15px 45px; -webkit-transition: -webkit-bakgrund .2s ease-out; -moz-transition: -moz-bakgrund .2s ease-out; övergång: bakgrund .2s lätthet; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; teckenstorlek: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; position: relativ; display: inline-block; vertikal-align: mitten; line-height: ärva; -webkit-transition: -webkit-transform .2s ease-out; -moz-transition: -moz-transform .2s ease-out; övergång: omvandla .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); }
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);
}CSS kan läggas till i css-filen för barntema eller helt enkelt från WordPress-baksidan > Utseende > Anpassa > Ytterligare CSS-fält, och med den får du en snygg animation av en rörlig pil när du svävar.
Och det är så du ersätter en kontaktformulär 7 skicka-knapp med HTML5-knappelement. Förhoppningsvis kommer du att ha hjälp med våra instruktioner. Om så är fallet, vänligen dela det med andra som också kan använda det.