{"id":368093,"date":"2022-10-25T11:35:00","date_gmt":"2022-10-25T08:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368093"},"modified":"2023-05-09T17:14:21","modified_gmt":"2023-05-09T14:14:21","slug":"html5-nupu-elemendi-kasutamine-kontaktivormina-7-esitage","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/html5-nupu-elemendi-kasutamine-kontaktivormina-7-esitage\/","title":{"rendered":"HTML5 nupu elemendi kasutamine kontaktivormina 7 Esitage"},"content":{"rendered":"\n

WordPressi veebisaidi olemasolu t\u00e4hendab, et t\u00f5en\u00e4oliselt peab teil olema kuskil kontaktivorm, olgu see siis uudiskirja, meiega \u00fchenduse v\u00f5tmise lehe<\/a>, k\u00fcsitluse v\u00f5i millegi muu jaoks. CMS-i (nt WordPress) puhul on kontaktivormi seadistamine \u00fcsna lihtne \u00fclesanne<\/strong>. Nimelt on palju kontaktivormide pluginaid<\/a>, mida saate kasutada ja kontaktvorm 7<\/a> on \u00fcks populaarsemaid.<\/p>\n

Selleks, et saaksite kontaktivormi 7 pistikprogrammist selgema pildi, on siin m\u00f5ned n\u00e4ited selle pistikprogrammiga tehtud kontaktvormidest, mis on ThemeForesti esmaklassiliste teemadega.<\/p>\n

Mis tahes kontaktvormi loomine WordPressis pole mitte ainult lihtne, vaid ka protsess ise on h\u00e4sti dokumenteeritud. Sellep\u00e4rast l\u00e4heme otse asja juurde.<\/p>\n

Seda pistikprogrammi kasutades ei pea te vaeva n\u00e4gema kohandatud vormi ja taustafunktsioonide loomisega, mis kiirendab protsessi drastiliselt. Probleemiks v\u00f5ib aga osutuda kontaktivormi 7 esitamise nupp, mis on type="submit" sisendelement.<\/p>\n

Isegi standardse sisendi esitamise nupuga on teil kena t\u00f6\u00f6vorm. Siiski \u00a0tekib probleem, kui soovite sellele elemendile lisada t\u00e4iendava stiili<\/strong>. Nagu v\u00f5ib-olla juba teate, on css-i puhul teatud piirangud, kuna siin ei saa kasutada pseudoelemente, nagu :enne v\u00f5i :after, mis v\u00f5ivad olla kasulikud h\u00f5ljuva allajoone, ikoonilise fondi ikooni v\u00f5i muu animatsiooni lisamiseks. mis oleks teie vormile kena viimistlus.<\/p>\n

Muidugi v\u00f5ib olla v\u00f5imalik saavutada silmapaistvaid animatsioone, m\u00e4hkides esitamisnupu m\u00f5ne kohandatud klassiga div-ga, kuid kui muudate sisendi nupuks, saate palju rohkem juhtida.<\/p>\n

Vaatame, kuidas saate HTML5 nupu elementi kasutada kontaktivormi saatmisnupuna.<\/p>\n

Enne muudatust n\u00e4eb saatmisnupp v\u00e4lja selline.<\/p>\n

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

Esiteks peame eemaldama kontaktivormi 7 vaikem\u00e4rgendi. Saate seda teha selle lihtsa koodireaga:<\/p>\n

\/ vaikeedastusm\u00e4rgendi eemaldamine \/<\/p>\n

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

\/ vaikeesitamise sildi eemaldamine \/ 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
Teiseks peame lisama toimingu meie funktsiooniga, mis hoiab nupu jaoks kohandatud m\u00e4rgistust<\/strong>. See on veel \u00fcks lihtne rida:<\/p>\n
\/ toimingu lisamine funktsiooniga, mis haldab meie nuppude m\u00e4rgistust \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ toimingu lisamine funktsiooniga, mis k\u00e4sitleb meie nuppude m\u00e4rgistust \/ 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
J\u00e4rgmisena lisame m\u00e4rgendi, mis kutsub esile nupu t\u00f6\u00f6tleja funktsiooni:<\/p>\n
\/ esitamisnupu sildi lisamine \/<\/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
\/ esitamisnupu m\u00e4rgendi lisamine \/ 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
L\u00f5puks peame t\u00f6\u00f6tlejale lisama m\u00e4rgistuse:<\/p>\n
\/ v\u00e4lja nupu m\u00e4rgistus k\u00e4itleja sees \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$silt = new WPCF7_FormTag($tag);<\/p>\n
$klass = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘kaksk\u00fcmmend kuusteist-lapse-kohandatud-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ’int’, true);<\/p>\n
$v\u00e4\u00e4rtus = isset($tag->v\u00e4\u00e4rtused[0])? $tag->v\u00e4\u00e4rtused[0]: ";<\/p>\n
$value = esc html_ (‘V\u00f5tke meiega \u00fchendust’, "twentysixteen");<\/p>\n
$atts[‘type’] = ‘esita’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $value);<\/p>\n
\/ v\u00e4lja nupu m\u00e4rgistus k\u00e4itleja sees \/ if (!function olemas(‘twentysixteen child_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $silt = new WPCF7_FormTag($tag); $klass = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘kaksk\u00fcmmend kuusteist-lapse-kohandatud-btn’; $atts[’id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ’int’, true); $v\u00e4\u00e4rtus = isset($tag->v\u00e4\u00e4rtused[0])? $tag->v\u00e4\u00e4rtused[0]: “; if (empty($value)) { $value = esc_html (‘V\u00f5tke meiega \u00fchendust’, ‘twentysixteen’); } $atts[‘type’] = ‘esita’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); tagasta $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\u00e4itleja funktsioon on k\u00f5ige olulisem osa. Lisaks vaikeklassi ja ID printimisele lisame selle sisse ka kohandatud css-klassi<\/strong>. Viimases osas, kus meil on muutuja $html, paneme nupu m\u00e4rgistuse FontAwesome’i t\u00e4hise ikooniga. Pange t\u00e4hele, et teie teemas peab see FontAwesome’i font olema.<\/strong> Kui teil seda pole, leidke kindlasti pistikprogramm, mis seda sisaldab.<\/p>\n
N\u00fc\u00fcd n\u00e4eb meie muudetud saatmisnupp v\u00e4lja selline:<\/p>\n
\"HTML5<\/a><\/p>\n
Nagu n\u00e4ete, sisaldab Chrome’i veebiinspektoriga oma lehte kontrollides t\u00e4pselt sama m\u00e4rgistust, mille oleme t\u00f6\u00f6tlejasse m\u00e4\u00e4ranud.<\/p>\n
\"HTML5<\/a><\/p>\n
Ja siin on t\u00e4ielik kood:<\/p>\n
\/ vaikeedastusm\u00e4rgendi eemaldamine \/<\/p>\n
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n
\/ toimingu lisamine funktsiooniga, mis haldab meie nuppude m\u00e4rgistust \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ esitamisnupu sildi lisamine \/<\/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
\/ v\u00e4lja nupu m\u00e4rgistus k\u00e4itleja sees \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$silt = new WPCF7_FormTag($tag);<\/p>\n
$klass = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘kaksk\u00fcmmend kuusteist-lapse-kohandatud-btn’;<\/p>\n
$atts[’id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ’int’, true);<\/p>\n
$v\u00e4\u00e4rtus = isset($tag->v\u00e4\u00e4rtused[0])? $tag->v\u00e4\u00e4rtused[0]: “;<\/p>\n
$value = esc html_ (‘Saada’, ‘twentysixteen’);<\/p>\n
$atts[‘type’] = ‘esita’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $value);<\/p>\n
\/ vaikeesitamise sildi eemaldamine \/ remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); \/ toimingu lisamine funktsiooniga, mis k\u00e4sitleb meie nuppude m\u00e4rgistust \/ add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); \/ esitamisnupu m\u00e4rgendi lisamine \/ if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } \/ v\u00e4lja nupu m\u00e4rgistus k\u00e4itleja sees \/ if (!funktsioon on olemas(‘twentysixteenchild_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($tag) { $silt = new WPCF7_FormTag($tag); $klass = wpcf7_form_controls_class($tag->type); $atts = array(); $atts[‘class’] = $tag->get_class_option($class); $atts[‘class’] .= ‘kaksk\u00fcmmend kuusteist-lapse-kohandatud-btn’; $atts[’id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ’int’, true); $v\u00e4\u00e4rtus = isset($tag->v\u00e4\u00e4rtused[0])? $tag->v\u00e4\u00e4rtused[0]: “; if (empty($value)) { $value = esc_html (‘Saada’, ‘kaksteistkuusteist’); } $atts[‘type’] = ‘esita’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); tagasta $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
Kui k\u00f5ik on paigas, saate nupu oma maitse j\u00e4rgi kujundamiseks kasutada lisaklasse ja m\u00e4rgistusi<\/strong>. Lisana lisame sellele lihtsa h\u00f5ljutusanimatsiooni koos allpool oleva css-koodiga.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition: -webkit-background .2s lihtne-out;<\/p>\n
-moz-\u00fcleminek: -moz-taust .2s kergendus;<\/p>\n
\u00fcleminek: taust .2s lihtsus;<\/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 easy-out;<\/p>\n
-moz-transition: -moz-transform .2s easy-out;<\/p>\n
\u00fcleminek: 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-teisendus: translate3d(3px,0,0);<\/p>\n
teisendus: translate3d(3px,0,0);<\/p>\n
nupp.twentysixteen-child-custom-btn { polster: 15px 45px; -webkit-transition: -webkit-background .2s lihtne-out; -moz-\u00fcleminek: -moz-taust .2s kergendus; \u00fcleminek: taust .2s lihtsus; } nupp.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; fondi suurus: 15 pikslit; } nupp.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; asend: suhteline; ekraan: inline-block; vertikaalne joondus: keskmine; line-height: p\u00e4rida; -webkit-transition: -webkit-transform .2s easy-out; -moz-transition: -moz-transform .2s easy-out; \u00fcleminek: transform .2s ease-out; } nupp.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-teisendus: translate3d(3px,0,0); teisendus: 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-i saab lisada alamteema css-faili v\u00f5i lihtsalt WordPressi tagaosast > V\u00e4limus > Kohanda > T\u00e4iendav CSS-v\u00e4li ja koos sellega n\u00e4ete kursoril liikuvast noolest kena v\u00e4limusega animatsiooni.<\/p>\n
\"HTML5<\/a><\/p>\n
Ja nii asendate kontaktivormi 7 saatmisnupu HTML5 nupu elemendiga. Loodetavasti on meie juhised teile kasulikud. Kui jah, siis jagage seda teistega, kes saavad seda samuti kasutada.<\/p>\n
:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Kui soovite oma kontaktivormile lisada t\u00e4iendava stiili, saate HTML5 nupu elementi kasutada saatmisnupuna. Siin on, kuidas seda kasutada.<\/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":[569],"tags":[842],"class_list":["post-368093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressi-pohitoed","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/368093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=368093"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/368093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=368093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=368093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=368093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}