{"id":367977,"date":"2022-10-25T11:21:00","date_gmt":"2022-10-25T08:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367977"},"modified":"2023-05-09T17:03:30","modified_gmt":"2023-05-09T14:03:30","slug":"anvanda-ett-html5-knappelement-som-kontaktformular-7-skicka","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/anvanda-ett-html5-knappelement-som-kontaktformular-7-skicka\/","title":{"rendered":"Anv\u00e4nda ett HTML5-knappelement som kontaktformul\u00e4r 7 Skicka"},"content":{"rendered":"\n

Att ha en WordPress-webbplats inneb\u00e4r att du med st\u00f6rsta sannolikhet kommer beh\u00f6va ha ett kontaktformul\u00e4r n\u00e5gonstans, oavsett om det \u00e4r f\u00f6r ett nyhetsbrev, en kontaktsida<\/a>, en omr\u00f6stning eller f\u00f6r n\u00e5got annat. Med CMS som WordPress \u00e4r det en ganska enkel uppgift att skapa ett kontaktformul\u00e4r<\/strong>. Det finns n\u00e4mligen m\u00e5nga plugins f\u00f6r kontaktformul\u00e4r<\/a> som du kan anv\u00e4nda, och Contact Form 7<\/a> \u00e4r en av de mest popul\u00e4ra.<\/p>\n

S\u00e5 att du kan f\u00e5 en tydligare bild av vad Contact Form 7-plugin kan g\u00f6ra, h\u00e4r \u00e4r n\u00e5gra exempel p\u00e5 kontaktformul\u00e4r gjorda med detta plugin som kommer med premiumteman p\u00e5 ThemeForest:<\/p>\n

Det \u00e4r inte bara enkelt att skapa n\u00e5gon form av kontaktformul\u00e4r i WordPress, utan sj\u00e4lva processen \u00e4r ocks\u00e5 v\u00e4l dokumenterad. Det \u00e4r d\u00e4rf\u00f6r vi g\u00e5r rakt p\u00e5 sak.<\/p>\n

Genom att anv\u00e4nda detta plugin beh\u00f6ver du inte g\u00e5 igenom besv\u00e4ret med att skapa ett anpassat formul\u00e4r och backend-funktionalitet, vilket kommer att p\u00e5skynda processen drastiskt. Det du dock kan tycka \u00e4r problematiskt \u00e4r en Skicka-knapp f\u00f6r kontaktformul\u00e4r 7 som \u00e4r ett inmatningselement av type="submit".<\/p>\n

\u00c4ven med den vanliga inmatningsknappen kommer du att ha en trevlig arbetsform. \u00c4nd\u00e5 \u00a0uppst\u00e5r problemet om du vill l\u00e4gga till en ytterligare styling f\u00f6r detta element<\/strong>. Som du kanske redan vet finns det vissa begr\u00e4nsningar n\u00e4r det kommer till css eftersom du inte kan anv\u00e4nda pseudoelementen h\u00e4r, som :before eller :after, vilket kan vara praktiskt f\u00f6r att l\u00e4gga till n\u00e5gon sv\u00e4vande understrykning, ikonisk teckensnittsikon eller n\u00e5got annat f\u00f6r animering som skulle komma som en fin finish p\u00e5 din form.<\/p>\n

Naturligtvis kan det vara m\u00f6jligt att uppn\u00e5 enast\u00e5ende animationer genom att bara sl\u00e5 in en skicka-knapp med n\u00e5gon div med anpassad klass, men genom att \u00e4ndra ing\u00e5ng till knapp kan du f\u00e5 mycket mer kontroll.<\/p>\n

L\u00e5t oss se hur du kan anv\u00e4nda ett HTML5-knappelement som en skickaknapp f\u00f6r ditt kontaktformul\u00e4r.<\/p>\n

Innan \u00e4ndringen kommer en skicka-knapp att se ut s\u00e5 h\u00e4r.<\/p>\n

\"Anv\u00e4nda<\/a><\/p>\n

F\u00f6rst m\u00e5ste vi ta bort standardinl\u00e4mningstaggen f\u00f6r kontaktformul\u00e4r 7. Du kan g\u00f6ra det med denna enkla kodrad:<\/p>\n

\/ tar bort standard inl\u00e4mningstagg \/<\/p>\n

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

\/ tar bort standard submit-tagg \/ 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
F\u00f6r det andra m\u00e5ste vi l\u00e4gga till \u00e5tg\u00e4rder med v\u00e5r funktion som kommer att h\u00e5lla v\u00e5r anpassade markering f\u00f6r knappen<\/strong>. Detta \u00e4r en annan enkel rad:<\/p>\n
\/ l\u00e4gga till \u00e5tg\u00e4rd med funktion som hanterar v\u00e5r knappmarkering \/<\/p>\n
add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’);<\/p>\n
\/ l\u00e4gga till \u00e5tg\u00e4rd med funktion som hanterar v\u00e5r knappmarkering \/ 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
D\u00e4refter l\u00e4gger vi till en tagg som anropar en knapphanterarfunktion:<\/p>\n
\/ l\u00e4gga till tagg f\u00f6r Skicka-knapp \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button’)) {<\/p>\n
function twentysixteen_child_cf7_button() {<\/p>\n
wpcf7_add_form_tag(’submit’, ’twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ l\u00e4gga till tagg f\u00f6r skicka-knapp \/ 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
Slutligen m\u00e5ste vi l\u00e4gga till en markering till hanteraren:<\/p>\n
\/ ut-knapp markering inuti hanteraren \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = new WPCF7_FormTag($tag);<\/p>\n
$klass = wpcf7_form_controls_class($tag->typ);<\/p>\n
$atts[’class’] = $tag->get_class_option($class);<\/p>\n
$atts[’class’] .= ’ tjugosexton-barn-anpassad-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true);<\/p>\n
$value = isset($tag->v\u00e4rden[0])? $tag->v\u00e4rden[0]: ";<\/p>\n
$value = esc html_ (’Kontakta oss’, ’twentysixteen’);<\/p>\n
$atts[’type’] = ’skicka’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $v\u00e4rde);<\/p>\n
\/ 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\u00e4rden[0])? $tag->v\u00e4rden[0]: ”; if (empty($value)) { $value = esc_html (’Kontakta oss’, ’twentysixteen’); } $atts[’type’] = ’skicka’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $v\u00e4rde); returnera $html; } }<\/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
Hanterarfunktionen \u00e4r den viktigaste delen. F\u00f6rutom att skriva ut en standardklass och ett ID kommer vi ocks\u00e5 att l\u00e4gga till en anpassad css-klass i den<\/strong>. I den sista delen d\u00e4r vi har en $html-variabel, l\u00e4gger vi en knappmarkering med FontAwesome chevron-ikon. Observera att du m\u00e5ste ha detta FontAwesome-teckensnitt i ditt tema.<\/strong> Om du inte har det, se till att hitta ett plugin som inneh\u00e5ller det.<\/p>\n
Nu kommer v\u00e5r \u00e4ndrade skicka-knapp att se ut s\u00e5 h\u00e4r:<\/p>\n
\"Anv\u00e4nda<\/a><\/p>\n
Som du kan se, n\u00e4r du inspekterar din sida med Chrome-webbinspekt\u00f6ren, inneh\u00e5ller den exakt samma uppm\u00e4rkning som vi har st\u00e4llt in i hanteraren.<\/p>\n
\"Anv\u00e4nda<\/a><\/p>\n
Och h\u00e4r \u00e4r hela koden:<\/p>\n
\/ tar bort standard inl\u00e4mningstagg \/<\/p>\n
remove_action(’wpcf7_init’, ’wpcf7_add_form_tag_submit’);<\/p>\n
\/ l\u00e4gga till \u00e5tg\u00e4rd med funktion som hanterar v\u00e5r knappmarkering \/<\/p>\n
add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’);<\/p>\n
\/ l\u00e4gga till tagg f\u00f6r Skicka-knapp \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button’)) {<\/p>\n
function twentysixteen_child_cf7_button() {<\/p>\n
wpcf7_add_form_tag(’submit’, ’twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ ut-knapp markering inuti hanteraren \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = new WPCF7_FormTag($tag);<\/p>\n
$klass = wpcf7_form_controls_class($tag->typ);<\/p>\n
$atts[’class’] = $tag->get_class_option($class);<\/p>\n
$atts[’class’] .= ’ tjugosexton-barn-anpassad-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true);<\/p>\n
$value = isset($tag->v\u00e4rden[0])? $tag->v\u00e4rden[0]: ”;<\/p>\n
$value = esc html_ (’Skicka’, ’tjugosexton’);<\/p>\n
$atts[’type’] = ’skicka’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $v\u00e4rde);<\/p>\n
\/ tar bort standard submit-tagg \/ remove_action(’wpcf7_init’, ’wpcf7_add_form_tag_submit’); \/ l\u00e4gga till \u00e5tg\u00e4rd med funktion som hanterar v\u00e5r knappmarkering \/ add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’); \/ l\u00e4gga till tagg f\u00f6r 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\u00e4rden[0])? $tag->v\u00e4rden[0]: ”; if (empty($value)) { $value = esc_html (’Skicka’, ’tjugosexton’); } $atts[’type’] = ’skicka’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $v\u00e4rde); returnera $html; } }<\/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
Med allt p\u00e5 plats kan du anv\u00e4nda extra klasser och markeringar f\u00f6r att styla knappen efter eget tycke<\/strong>. Som extra kommer vi att l\u00e4gga till en enkel sv\u00e4vningsanimation till den med en css-kod nedan.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition: -webkit-bakgrund .2s ease-out;<\/p>\n
-moz-transition: -moz-bakgrund .2s ease-out;<\/p>\n
\u00f6verg\u00e5ng: bakgrund .2s l\u00e4tthet;<\/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
\u00f6verg\u00e5ng: omvandla .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
transform: translate3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { utfyllnad: 15px 45px; -webkit-transition: -webkit-bakgrund .2s ease-out; -moz-transition: -moz-bakgrund .2s ease-out; \u00f6verg\u00e5ng: bakgrund .2s l\u00e4tthet; } 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: \u00e4rva; -webkit-transition: -webkit-transform .2s ease-out; -moz-transition: -moz-transform .2s ease-out; \u00f6verg\u00e5ng: 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); }<\/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
CSS kan l\u00e4ggas till i css-filen f\u00f6r barntema eller helt enkelt fr\u00e5n WordPress-baksidan > Utseende > Anpassa > Ytterligare CSS-f\u00e4lt, och med den f\u00e5r du en snygg animation av en r\u00f6rlig pil n\u00e4r du sv\u00e4var.<\/p>\n
\"Anv\u00e4nda<\/a><\/p>\n
Och det \u00e4r s\u00e5 du ers\u00e4tter en kontaktformul\u00e4r 7 skicka-knapp med HTML5-knappelement. F\u00f6rhoppningsvis kommer du att ha hj\u00e4lp med v\u00e5ra instruktioner. Om s\u00e5 \u00e4r fallet, v\u00e4nligen dela det med andra som ocks\u00e5 kan anv\u00e4nda det.<\/p>\n
Inspelningsk\u00e4lla:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Om du vill l\u00e4gga till en ytterligare stil till ditt kontaktformul\u00e4r kan du anv\u00e4nda ett HTML5-knappelement som en skicka-knapp. S\u00e5 h\u00e4r anv\u00e4nder du den.<\/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":[574],"tags":[850],"class_list":["post-367977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grunderna-i-wordpress","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=367977"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/367977\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=367977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=367977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=367977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}