HTML5 nupu elemendi kasutamine kontaktivormina 7 Esitage
WordPressi veebisaidi olemasolu tähendab, et tõenäoliselt peab teil olema kuskil kontaktivorm, olgu see siis uudiskirja, meiega ühenduse võtmise lehe, küsitluse või millegi muu jaoks. CMS-i (nt WordPress) puhul on kontaktivormi seadistamine üsna lihtne ülesanne. Nimelt on palju kontaktivormide pluginaid, mida saate kasutada ja kontaktvorm 7 on üks populaarsemaid.
Selleks, et saaksite kontaktivormi 7 pistikprogrammist selgema pildi, on siin mõned näited selle pistikprogrammiga tehtud kontaktvormidest, mis on ThemeForesti esmaklassiliste teemadega.
Mis tahes kontaktvormi loomine WordPressis pole mitte ainult lihtne, vaid ka protsess ise on hästi dokumenteeritud. Sellepärast läheme otse asja juurde.
Seda pistikprogrammi kasutades ei pea te vaeva nägema kohandatud vormi ja taustafunktsioonide loomisega, mis kiirendab protsessi drastiliselt. Probleemiks võib aga osutuda kontaktivormi 7 esitamise nupp, mis on type="submit" sisendelement.
Isegi standardse sisendi esitamise nupuga on teil kena töövorm. Siiski tekib probleem, kui soovite sellele elemendile lisada täiendava stiili. Nagu võib-olla juba teate, on css-i puhul teatud piirangud, kuna siin ei saa kasutada pseudoelemente, nagu :enne või :after, mis võivad olla kasulikud hõljuva allajoone, ikoonilise fondi ikooni või muu animatsiooni lisamiseks. mis oleks teie vormile kena viimistlus.
Muidugi võib olla võimalik saavutada silmapaistvaid animatsioone, mähkides esitamisnupu mõne kohandatud klassiga div-ga, kuid kui muudate sisendi nupuks, saate palju rohkem juhtida.
Vaatame, kuidas saate HTML5 nupu elementi kasutada kontaktivormi saatmisnupuna.
Enne muudatust näeb saatmisnupp välja selline.
Esiteks peame eemaldama kontaktivormi 7 vaikemärgendi. Saate seda teha selle lihtsa koodireaga:
/ vaikeedastusmärgendi eemaldamine /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ vaikeesitamise sildi eemaldamine / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');Teiseks peame lisama toimingu meie funktsiooniga, mis hoiab nupu jaoks kohandatud märgistust. See on veel üks lihtne rida:
/ toimingu lisamine funktsiooniga, mis haldab meie nuppude märgistust /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ toimingu lisamine funktsiooniga, mis käsitleb meie nuppude märgistust / 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');Järgmisena lisame märgendi, mis kutsub esile nupu töötleja funktsiooni:
/ esitamisnupu sildi lisamine /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ esitamisnupu märgendi lisamine / 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');
}
}Lõpuks peame töötlejale lisama märgistuse:
/ välja nupu märgistus käitleja sees /
if (!function_exists(‘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[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘kakskümmend kuusteist-lapse-kohandatud-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$väärtus = isset($tag->väärtused[0])? $tag->väärtused[0]: ";
$value = esc html_ (‘Võtke meiega ühendust’, "twentysixteen");
$atts[‘type’] = ‘esita’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $value);
/ välja nupu märgistus käitleja 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ümmend kuusteist-lapse-kohandatud-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $väärtus = isset($tag->väärtused[0])? $tag->väärtused[0]: “; if (empty($value)) { $value = esc_html (‘Võtke meiega ühendust’, ‘twentysixteen’); } $atts[‘type’] = ‘esita’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); tagasta $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;
}
}Käitleja funktsioon on kõige olulisem osa. Lisaks vaikeklassi ja ID printimisele lisame selle sisse ka kohandatud css-klassi. Viimases osas, kus meil on muutuja $html, paneme nupu märgistuse FontAwesome’i tähise ikooniga. Pange tähele, et teie teemas peab see FontAwesome’i font olema. Kui teil seda pole, leidke kindlasti pistikprogramm, mis seda sisaldab.
Nüüd näeb meie muudetud saatmisnupp välja selline:
Nagu näete, sisaldab Chrome’i veebiinspektoriga oma lehte kontrollides täpselt sama märgistust, mille oleme töötlejasse määranud.
Ja siin on täielik kood:
/ vaikeedastusmärgendi eemaldamine /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ toimingu lisamine funktsiooniga, mis haldab meie nuppude märgistust /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ esitamisnupu sildi lisamine /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ välja nupu märgistus käitleja sees /
if (!function_exists(‘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[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘kakskümmend kuusteist-lapse-kohandatud-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$väärtus = isset($tag->väärtused[0])? $tag->väärtused[0]: “;
$value = esc html_ (‘Saada’, ‘twentysixteen’);
$atts[‘type’] = ‘esita’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $value);
/ vaikeesitamise sildi eemaldamine / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / toimingu lisamine funktsiooniga, mis käsitleb meie nuppude märgistust / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / esitamisnupu märgendi lisamine / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / välja nupu märgistus käitleja 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ümmend kuusteist-lapse-kohandatud-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $väärtus = isset($tag->väärtused[0])? $tag->väärtused[0]: “; if (empty($value)) { $value = esc_html (‘Saada’, ‘kaksteistkuusteist’); } $atts[‘type’] = ‘esita’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); tagasta $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;
}
}Kui kõik on paigas, saate nupu oma maitse järgi kujundamiseks kasutada lisaklasse ja märgistusi. Lisana lisame sellele lihtsa hõljutusanimatsiooni koos allpool oleva css-koodiga.
button.twentysixteen-child-custom-btn {
-webkit-transition: -webkit-background .2s lihtne-out;
-moz-üleminek: -moz-taust .2s kergendus;
üleminek: taust .2s lihtsus;
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
-webkit-transition: -webkit-transform .2s easy-out;
-moz-transition: -moz-transform .2s easy-out;
üleminek: transform .2s ease-out;
button.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);
nupp.twentysixteen-child-custom-btn { polster: 15px 45px; -webkit-transition: -webkit-background .2s lihtne-out; -moz-üleminek: -moz-taust .2s kergendus; üleminek: 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ärida; -webkit-transition: -webkit-transform .2s easy-out; -moz-transition: -moz-transform .2s easy-out; üleminek: 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); }
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-i saab lisada alamteema css-faili või lihtsalt WordPressi tagaosast > Välimus > Kohanda > Täiendav CSS-väli ja koos sellega näete kursoril liikuvast noolest kena välimusega animatsiooni.
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.