Використання елемента кнопки HTML5 як контактної форми 7 Надіслати
Наявність веб-сайту WordPress означає, що вам, швидше за все, знадобиться десь мати контактну форму, чи то для інформаційного бюлетеня, сторінки зв’язку з нами, опитування чи чогось іншого. За допомогою CMS, такої як WordPress, налаштування контактної форми є досить простим завданням. Зокрема, існує багато плагінів контактної форми, які ви можете використовувати, і Contact Form 7 є одним із найпопулярніших.
Щоб ви могли мати більш чітке уявлення про можливості плагіна Contact Form 7, ось кілька прикладів контактних форм, створених за допомогою цього плагіна, які постачаються з преміум-темами на ThemeForest:
Не тільки легко створити будь-яку контактну форму в WordPress, але й сам процес також добре задокументований. Тому перейдемо відразу до справи.
Використовуючи цей плагін, вам не доведеться мучитися зі створенням спеціальної форми та функціоналу серверної частини, що значно пришвидшить процес. Однак те, що може здатися вам проблематичним, — це кнопка надсилання контактної форми 7, яка є елементом введення type="submit".
Навіть зі стандартною кнопкою надсилання введення у вас буде гарна робоча форма. Однак проблема виникає, якщо ви хочете додати додатковий стиль для цього елемента. Як ви, можливо, вже знаєте, у CSS є певні обмеження, оскільки тут не можна використовувати псевдоелементи, як-от :before або :after, які можуть бути зручними для додавання деякого підкреслення, значка шрифту або будь-чого іншого для анімації. який стане гарним завершальним штрихом для вашої форми.
Звичайно, можна досягти видатної анімації, просто обернувши кнопку надсилання деяким div із користувальницьким класом, але змінивши вхідні дані на кнопку, ви отримаєте значно більше контролю.
Давайте подивимося, як ви можете використовувати елемент кнопки HTML5 як кнопку надсилання для вашої контактної форми.
До зміни кнопка надсилання виглядатиме так.
По-перше, нам потрібно видалити стандартний тег надсилання контактної форми 7. Ви можете зробити це за допомогою цього простого рядка коду:
/ видалення тегу надсилання за замовчуванням /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ видалення тегу надсилання за замовчуванням / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');По- друге, нам потрібно додати дію з нашою функцією, яка буде зберігати нашу спеціальну розмітку для кнопки. Це ще один простий рядок:
/ додавання дії з функцією, яка обробляє розмітку кнопок /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ додавання дії за допомогою функції, яка обробляє розмітку кнопок / 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');Далі ми додаємо тег, який буде викликати функцію обробки кнопки:
/ додавання тегу кнопки надсилання /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
функція twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ додавання тегу кнопки надсилання / 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');
}
}Нарешті, ми повинні додати розмітку до обробника:
/ вихідна розмітка кнопки всередині обробника /
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
функція twentysixteen_child_cf7_button_handler($tag) {
$tag = новий WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$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]: ";
$value = esc html_ (‘Зв’яжіться з нами’, ‘twentysixteen’);
$atts[‘type’] = ‘подати’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $value);
/ вихідна розмітка кнопки всередині обробника / 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 = масив(); $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 (‘Зв’язатися з нами’, ‘twentysixteen’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); повернути $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;
}
}Функція обробки є найважливішою частиною. Окрім друку класу та ідентифікатора за замовчуванням, ми також додамо в нього спеціальний клас css. В останній частині, де ми маємо змінну $html, ми розміщуємо розмітку кнопки зі значком шеврона FontAwesome. Зауважте, що вам потрібно мати цей шрифт FontAwesome у своїй темі. Якщо у вас його немає, обов’язково знайдіть плагін, який його включатиме.
Тепер наша змінена кнопка надсилання виглядатиме так:
Як бачите, коли ви перевіряєте свою сторінку за допомогою веб-інспектора Chrome, вона містить точно таку саму розмітку, яку ми встановили в обробнику.
А ось повний код:
/ видалення тегу надсилання за замовчуванням /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ додавання дії з функцією, яка обробляє розмітку кнопок /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ додавання тегу кнопки надсилання /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
функція twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ вихідна розмітка кнопки всередині обробника /
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {
функція twentysixteen_child_cf7_button_handler($tag) {
$tag = новий WPCF7_FormTag($tag);
$class = wpcf7_form_controls_class($tag->type);
$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]: “;
$value = esc html_ (‘Надіслати’, ‘wentysixteen’);
$atts[‘type’] = ‘подати’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $value);
/ видалення тегу надсилання за замовчуванням / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / додавання дії за допомогою функції, яка обробляє розмітку кнопок / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / додавання тегу кнопки надсилання / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / вихідна розмітка кнопки всередині обробника / if (!функція існує(‘twentysixteenchild_cf7_button_handler’)) { функція twentysixteen_child_cf7_button_handler($tag) { $tag = новий WPCF7_FormTag($tag); $class = wpcf7_form_controls_class($tag->type); $atts = масив(); $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 (‘Надіслати’, ‘wentysixteen’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $value); повернути $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;
}
}Коли все на місці, ви можете використовувати додаткові класи та розмітку, щоб стилізувати кнопку на свій смак. Як додатковий елемент ми додамо до нього просту анімацію наведення курсора з кодом CSS нижче.
button.twentysixteen-child-custom-btn {
-webkit-transition: -webkit-background .2s полегшення;
-moz-transition: -moz-background .2s ease-out;
перехід: тло .2s легкість;
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text {
button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon {
-webkit-transition: -webkit-transform .2s полегшення;
-moz-transition: -moz-transform .2s ease-out;
перехід: перетворення .2s полегшення;
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {
-webkit-transform: translate3d(3px,0,0);
-moz-transform: translate3d(3px,0,0);
перетворення: translate3d(3px,0,0);
button.twentysixteen-child-custom-btn { padding: 15px 45px; -webkit-transition: -webkit-background .2s полегшення; -moz-transition: -moz-background .2s ease-out; перехід: тло .2s легкість; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; розмір шрифту: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; положення: відносне; дисплей: inline-block; вертикальне вирівнювання: посередині; line-height: успадкувати; -webkit-transition: -webkit-transform .2s полегшення; -moz-transition: -moz-transform .2s ease-out; перехід: перетворення .2s полегшення; } button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transform: translate3d(3px,0,0); перетворення: 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 можна додати в CSS-файл дочірньої теми або просто з серверної частини WordPress > Вигляд > Налаштувати > Додаткове поле CSS, і з ним ви отримаєте гарну анімацію рухомої стрілки під час наведення.
Ось як ви замінюєте кнопку надсилання Contact Form 7 елементом кнопки HTML5. Сподіваємось, наші інструкції стануть вам у нагоді. Якщо так, поділіться ним з іншими, хто також може ним скористатися.