{"id":368030,"date":"2022-10-25T11:06:00","date_gmt":"2022-10-25T08:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368030"},"modified":"2023-05-09T17:13:40","modified_gmt":"2023-05-09T14:13:40","slug":"html5-painikeelementin-kayttaminen-yhteydenottolomakkeena-7-laheta","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/html5-painikeelementin-kayttaminen-yhteydenottolomakkeena-7-laheta\/","title":{"rendered":"HTML5-painikeelementin k\u00e4ytt\u00e4minen yhteydenottolomakkeena 7 L\u00e4het\u00e4"},"content":{"rendered":"\n

WordPress-verkkosivusto tarkoittaa, ett\u00e4 tarvitset todenn\u00e4k\u00f6isesti jossain yhteydenottolomakkeen, olipa se sitten uutiskirjett\u00e4, yhteydenottosivua<\/a>, kysely\u00e4 tai jotain muuta varten. CMS:ll\u00e4, kuten WordPressill\u00e4, yhteydenottolomakkeen luominen on melko yksinkertainen teht\u00e4v\u00e4<\/strong>. Nimitt\u00e4in on olemassa paljon yhteydenottolomakelaajennuksia,<\/a> joita voit k\u00e4ytt\u00e4\u00e4, ja yhteydenottolomake 7<\/a> on yksi suosituimmista.<\/p>\n

Jotta saisit selke\u00e4mm\u00e4n kuvan siit\u00e4, mit\u00e4 Contact Form 7 -laajennus voi tehd\u00e4, t\u00e4ss\u00e4 on muutamia esimerkkej\u00e4 t\u00e4ll\u00e4 laajennuksella tehdyist\u00e4 yhteydenottolomakkeista, jotka tulevat ThemeForestin premium-teemalla:<\/p>\n

Kaikenlaisen yhteydenottolomakkeen luominen WordPressiss\u00e4 ei ole vain helppoa, vaan itse prosessi on my\u00f6s hyvin dokumentoitu. Siksi menn\u00e4\u00e4n suoraan asiaan.<\/p>\n

K\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 laajennusta sinun ei tarvitse k\u00e4yd\u00e4 l\u00e4pi vaivaa luoda mukautettuja lomakkeita ja taustatoimintoja, mik\u00e4 nopeuttaa prosessia huomattavasti. Saatat kuitenkin l\u00f6yt\u00e4\u00e4 ongelmallisen yhteydenottolomakkeen 7 l\u00e4hetyspainikkeen, joka on type="submit"-tyypin sy\u00f6tt\u00f6elementti.<\/p>\n

Jopa tavallisella sy\u00f6tteen l\u00e4hetyspainikkeella saat mukavan ty\u00f6muodon. Silti \u00a0ongelma syntyy, jos haluat lis\u00e4t\u00e4 t\u00e4h\u00e4n elementtiin ylim\u00e4\u00e4r\u00e4isen tyylin<\/strong>. Kuten ehk\u00e4 jo tied\u00e4tkin, css:ss\u00e4 on tiettyj\u00e4 rajoituksia, koska et voi k\u00e4ytt\u00e4\u00e4 t\u00e4ss\u00e4 pseudoelementtej\u00e4, kuten :before tai :after, jotka voivat olla k\u00e4tevi\u00e4 lis\u00e4t\u00e4ksesi alleviivauksen, ikonisen kirjasinkuvakkeen tai mit\u00e4 tahansa muuta animaatiota varten. joka olisi mukava viimeistely muodollesi.<\/p>\n

Tietysti voi olla mahdollista saavuttaa erinomaisia \u200b\u200banimaatioita vain k\u00e4\u00e4rim\u00e4ll\u00e4 l\u00e4hetyspainike johonkin diviin mukautetulla luokalla, mutta muuttamalla sy\u00f6tteen painikkeeksi voit hallita paljon enemm\u00e4n.<\/p>\n

Katsotaanpa, kuinka voit k\u00e4ytt\u00e4\u00e4 HTML5-painikeelementti\u00e4 yhteydenottolomakkeen l\u00e4hetyspainikkeena.<\/p>\n

Ennen muutosta l\u00e4hetyspainike n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4.<\/p>\n

\"HTML5-painikeelementin<\/a><\/p>\n

Ensin meid\u00e4n on poistettava oletusarvoinen yhteydenottolomakkeen 7 l\u00e4hetystunniste. Voit tehd\u00e4 sen t\u00e4ll\u00e4 yksinkertaisella koodirivill\u00e4:<\/p>\n

\/ oletusl\u00e4hetystunnisteen poistaminen \/<\/p>\n

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

\/ oletusl\u00e4hetystunnisteen poistaminen \/ 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
Toiseksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 toimintoja toiminnollamme, joka pit\u00e4\u00e4 mukautetun merkinn\u00e4mme painikkeelle<\/strong>. T\u00e4m\u00e4 on toinen yksinkertainen rivi:<\/p>\n
\/ toiminnon lis\u00e4\u00e4minen toiminnolla, joka k\u00e4sittelee painikemerkint\u00f6j\u00e4mme \/<\/p>\n
add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’);<\/p>\n
\/ toiminnon lis\u00e4\u00e4minen funktiolla, joka k\u00e4sittelee painikemerkint\u00f6j\u00e4mme \/ 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
Seuraavaksi lis\u00e4\u00e4mme tunnisteen, joka kutsuu painikkeenk\u00e4sittelytoimintoa:<\/p>\n
\/ lis\u00e4\u00e4m\u00e4ll\u00e4 l\u00e4hetyspainiketunnisteen \/<\/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\u00e4hetyspainiketunnisteen lis\u00e4\u00e4minen \/ 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
Lopuksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 k\u00e4sittelij\u00e4\u00e4n merkint\u00e4:<\/p>\n
\/ ulos -painikkeen merkint\u00e4 k\u00e4sittelij\u00e4n sis\u00e4ll\u00e4 \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tunniste = uusi WPCF7_FormTag($tag);<\/p>\n
$luokka = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[’luokka’] = $tag->get_class_option($class);<\/p>\n
$atts[’luokka’] .= ’kaksikymment\u00e4kuusitoista-lapsi-mukautettu-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true);<\/p>\n
$arvo = isset($tag->arvot[0])? $tag->arvot[0]: ";<\/p>\n
$value = esc html_ (’Ota yhteytt\u00e4’, ’twentysixteen’);<\/p>\n
$atts[’type’] = ’l\u00e4het\u00e4’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $arvo);<\/p>\n
\/ ulos -painikkeen merkint\u00e4 k\u00e4sittelij\u00e4n sis\u00e4ll\u00e4 \/ if (!funktio olemassa(’twentysixteen child_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $luokka = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[’luokka’] = $tag->get_class_option($class); $atts[’luokka’] .= ’kaksikymment\u00e4kuusitoista-lapsi-mukautettu-btn’; $atts[’id’] = $tag->get_id_option(); $atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true); $arvo = isset($tag->arvot[0])? $tag->arvot[0]: ”; if (empty($value)) { $value = esc_html (’Ota yhteytt\u00e4’, ’twentysixteen’); } $atts[’type’] = ’l\u00e4het\u00e4’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $arvo); palauttaa $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
K\u00e4sittelij\u00e4toiminto on t\u00e4rkein osa. Oletusluokan ja -tunnuksen tulostamisen lis\u00e4ksi lis\u00e4\u00e4mme siihen my\u00f6s mukautetun css-luokan<\/strong>. Viimeisess\u00e4 osassa, jossa meill\u00e4 on $html-muuttuja, laitamme painikkeen merkinn\u00e4n FontAwesome-chevron-kuvakkeella. Huomaa, ett\u00e4 teemassasi on oltava t\u00e4m\u00e4 FontAwesome-fontti.<\/strong> Jos sinulla ei ole sit\u00e4, muista l\u00f6yt\u00e4\u00e4 laajennus, joka sis\u00e4lt\u00e4\u00e4 sen.<\/p>\n
Nyt muuttunut l\u00e4hetyspainike n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
\"HTML5-painikeelementin<\/a><\/p>\n
Kuten n\u00e4et, kun tarkastat sivusi Chrome Web Inspectorilla, se sis\u00e4lt\u00e4\u00e4 t\u00e4sm\u00e4lleen saman merkinn\u00e4n, jonka olemme asettanut k\u00e4sittelij\u00e4n sis\u00e4\u00e4n.<\/p>\n
\"HTML5-painikeelementin<\/a><\/p>\n
Ja t\u00e4ss\u00e4 on t\u00e4ydellinen koodi:<\/p>\n
\/ oletusl\u00e4hetystunnisteen poistaminen \/<\/p>\n
remove_action(’wpcf7_init’, ’wpcf7_add_form_tag_submit’);<\/p>\n
\/ toiminnon lis\u00e4\u00e4minen toiminnolla, joka k\u00e4sittelee painikemerkint\u00f6j\u00e4mme \/<\/p>\n
add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’);<\/p>\n
\/ lis\u00e4\u00e4m\u00e4ll\u00e4 l\u00e4hetyspainiketunnisteen \/<\/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
\/ ulos -painikkeen merkint\u00e4 k\u00e4sittelij\u00e4n sis\u00e4ll\u00e4 \/<\/p>\n
if (!function_exists(’twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tunniste = uusi WPCF7_FormTag($tag);<\/p>\n
$luokka = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[’luokka’] = $tag->get_class_option($class);<\/p>\n
$atts[’luokka’] .= ’kaksikymment\u00e4kuusitoista-lapsi-mukautettu-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true);<\/p>\n
$arvo = isset($tag->arvot[0])? $tag->arvot[0]: ”;<\/p>\n
$arvo = esc html_ (’L\u00e4het\u00e4’, ’twentysixteen’);<\/p>\n
$atts[’type’] = ’l\u00e4het\u00e4’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $arvo);<\/p>\n
\/ oletusl\u00e4hetystunnisteen poistaminen \/ remove_action(’wpcf7_init’, ’wpcf7_add_form_tag_submit’); \/ toiminnon lis\u00e4\u00e4minen funktiolla, joka k\u00e4sittelee painikemerkint\u00f6j\u00e4mme \/ add_action(’wpcf7_init’, ’twentysixteen_child_cf7_button’); \/ l\u00e4hetyspainiketunnisteen lis\u00e4\u00e4minen \/ if (!function_exists(’twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(’submit’, ’twentysixteen_child_cf7_button_handler’); } } \/ ulos-painikkeen merkint\u00e4 k\u00e4sittelij\u00e4n sis\u00e4ll\u00e4 \/ if (!funktio on olemassa(’twentysixteenchild_cf7_button_handler’)) { function kaksikymment\u00e4kuusitoista_lapsi_cf7_button_handler($tag) { $tag = new WPCF7_FormTag($tag); $luokka = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[’luokka’] = $tag->get_class_option($class); $atts[’luokka’] .= ’kaksikymment\u00e4kuusitoista-lapsi-mukautettu-btn’; $atts[’id’] = $tag->get_id_option(); $atts[’tabindex’] = $tag->get_option(’tabindex’, ’int’, true); $arvo = isset($tag->arvot[0])? $tag->arvot[0]: ”; if (tyhj\u00e4($arvo)) { $arvo = esc_html (’L\u00e4het\u00e4’, ’twentysixteen’); } $atts[’type’] = ’l\u00e4het\u00e4’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $arvo); palauttaa $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
Kun kaikki on paikallaan, voit k\u00e4ytt\u00e4\u00e4 ylim\u00e4\u00e4r\u00e4isi\u00e4 luokkia ja merkint\u00f6j\u00e4 muokataksesi painiketta haluamallasi tavalla<\/strong>. Lis\u00e4t\u00e4mme siihen yksinkertaisen hover-animaation, jossa on alla oleva css-koodi.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-Webkit-siirtym\u00e4: -Webkit-tausta .2s helpotus;<\/p>\n
-moz-siirtym\u00e4: -moz-tausta .2s helpotus;<\/p>\n
siirtyminen: tausta .2s helppous;<\/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-siirtym\u00e4: -webkit-muunnos .2s helpotus;<\/p>\n
-moz-transition: -moz-transform .2s help-out;<\/p>\n
siirtyminen: muunnos .2s ease-out;<\/p>\n
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {<\/p>\n
-webkit-muunnos: translate3d(3px,0,0);<\/p>\n
-moz-muunnos: translate3d(3px,0,0);<\/p>\n
muunnos: translate3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { t\u00e4yte: 15px 45px; -Webkit-siirtym\u00e4: -Webkit-tausta .2s helpotus; -moz-siirtym\u00e4: -moz-tausta .2s helpotus; siirtyminen: tausta .2s helppous; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; fontin koko: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; asema: suhteellinen; n\u00e4ytt\u00f6: inline-block; pystysuuntaus: keskell\u00e4; rivin korkeus: perii; -webkit-siirtym\u00e4: -webkit-muunnos .2s helpotus; -moz-transition: -moz-transform .2s help-out; siirtyminen: muunnos .2s ease-out; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-muunnos: translate3d(3px,0,0); muunnos: 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 voidaan lis\u00e4t\u00e4 lapsiteeman css-tiedostoon tai yksinkertaisesti WordPress-taustasta> Ulkoasu> Mukauta> Lis\u00e4-CSS-kentt\u00e4, ja sen avulla saat mukavan n\u00e4k\u00f6isen animaation liikkuvasta nuolesta.<\/p>\n
\"HTML5-painikeelementin<\/a><\/p>\n
Ja n\u00e4in korvaat yhteydenottolomakkeen 7 l\u00e4hetyspainikkeen HTML5-painikeelementill\u00e4. Toivottavasti ohjeistamme on apua. Jos on, jaa se muille, jotka voivat my\u00f6s k\u00e4ytt\u00e4\u00e4 sit\u00e4.<\/p>\n
:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Jos haluat lis\u00e4t\u00e4 yhteydenottolomakkeeseen uuden tyylin, voit k\u00e4ytt\u00e4\u00e4 HTML5-painikeelementti\u00e4 l\u00e4hetyspainikkeena. K\u00e4yt\u00e4 sit\u00e4 seuraavasti.<\/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":[570],"tags":[843],"class_list":["post-368030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/368030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=368030"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/368030\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=368030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=368030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=368030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}