Usando um elemento de botão HTML5 como formulário de contato 7 Enviar
Ter um site WordPress significa que você provavelmente precisará ter um formulário de contato em algum lugar, seja para um boletim informativo, uma página de contato, uma enquete ou qualquer outra coisa. Com CMS como o WordPress, configurar um formulário de contato é uma tarefa bastante simples. Ou seja, existem muitos plugins de formulário de contato que você pode usar, e o Contact Form 7 é um dos mais populares.
Para que você possa ter uma visão mais clara do que o plug-in Contact Form 7 pode fazer, aqui estão alguns exemplos de formulários de contato feitos com este plug-in que vêm com temas premium no ThemeForest:
Não só é fácil criar qualquer tipo de formulário de contato no WordPress, mas o processo em si também é bem documentado. Por isso vamos direto ao ponto.
Ao usar este plugin, você não terá que se preocupar em criar um formulário personalizado e uma funcionalidade de back-end, o que acelerará drasticamente o processo. No entanto, o que você pode achar problemático é um botão de envio do Contact Form 7, que é um elemento de entrada de type="submit".
Mesmo com o botão de envio de entrada padrão, você terá um bom formulário de trabalho. Ainda assim, o problema surge se você quiser adicionar um estilo adicional para esse elemento. Como você já deve saber, existem certas limitações quando se trata de css, pois você não pode usar os pseudo elementos aqui, como :before ou :after, que podem ser úteis para adicionar algum sublinhado, ícone de fonte icônica ou qualquer outra coisa para animação o que seria um belo toque final para o seu formulário.
Claro, pode ser possível obter animações excelentes apenas envolvendo um botão de envio com algum div com classe personalizada, mas alterando a entrada para o botão, você pode ter muito mais controle.
Vamos ver como você pode usar um elemento de botão HTML5 como um botão de envio para seu formulário de contato.
Antes da alteração, um botão de envio ficará assim.
Primeiro, precisamos remover a tag de envio padrão do Contact Form 7. Você pode fazer isso com esta simples linha de código:
/ removendo a tag de envio padrão /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ removendo a tag de envio padrão / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*removing default submit tag*/
remove_action('wpcf7_init', 'wpcf7_add_form_tag_submit');Em segundo lugar, precisamos adicionar ação com nossa função que manterá nossa marcação personalizada para o botão. Esta é outra linha simples:
/ adicionando ação com função que lida com nossa marcação de botão /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ adicionando ação com função que lida com nossa marcação de botão / 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');Em seguida, estamos adicionando uma tag que chamará uma função de manipulador de botão:
/ adicionando a tag do botão de envio /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function Twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ adicionando a tag do botão de envio / 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');
}
}Finalmente, temos que adicionar uma marcação ao manipulador:
/ marcação do botão de saída dentro do manipulador /
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[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ twentysteen-child-custom-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$valor = isset($tag->valores[0])? $tag->valores[0]: ";
$valor = esc html_ (‘Fale Conosco’, ‘vinte e dezesseis’);
$atts[‘tipo’] = ‘enviar’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $valor);
/ marcação de botão de saída dentro do manipulador / if (!function existe(‘ 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’] .= ‘ twentysteen-child-custom-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $valor = isset($tag->valores[0])? $tag->valores[0]: “; if (vazio($valor)) { $valor = esc_html (‘Fale Conosco’, ‘vinte e dezesseis’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $valor); retorna $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;
}
}A função do manipulador é a parte mais importante. Além de imprimir uma classe e um ID padrão, também adicionaremos uma classe css personalizada dentro dela. Na última parte onde temos uma variável $html, estamos colocando uma marcação de botão com o ícone de divisa FontAwesome. Observe que você precisa ter essa fonte FontAwesome em seu tema. Se você não o tiver, certifique-se de encontrar um plugin que o inclua.
Agora, nosso botão de envio alterado ficará assim:
Como você pode ver, quando você inspeciona sua página com o inspetor da Web do Chrome, ela contém exatamente a mesma marcação que definimos dentro do manipulador.
E aqui está o código completo:
/ removendo a tag de envio padrão /
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/ adicionando ação com função que lida com nossa marcação de botão /
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/ adicionando a tag do botão de envio /
if (!function_exists(‘twentysixteen_child_cf7_button’)) {
function Twentysixteen_child_cf7_button() {
wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’);
/ marcação do botão de saída dentro do manipulador /
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[‘class’] = $tag->get_class_option($class);
$atts[‘class’] .= ‘ twentysteen-child-custom-btn’;
$atts[‘id’] = $tag->get_id_option();
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);
$valor = isset($tag->valores[0])? $tag->valores[0]: “;
$valor = esc html_ (‘Enviar’, ‘vinte e dezesseis’);
$atts[‘tipo’] = ‘enviar’;
$atts = wpcf7_format_atts($atts);
$html = sprintf(”, $atts, $valor);
/ removendo a tag de envio padrão / remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); / adicionando ação com função que lida com nossa marcação de botão / add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); / adicionando a tag do botão de envio / if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } / marcação do botão de saída dentro do manipulador / if (!function existe(‘twentysixteenchild_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’] .= ‘ twentysteen-child-custom-btn’; $atts[‘id’] = $tag->get_id_option(); $atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true); $valor = isset($tag->valores[0])? $tag->valores[0]: “; if (vazio($valor)) { $valor = esc_html (‘Enviar’, ‘vinte e dezesseis’); } $atts[‘type’] = ‘submit’; $atts = wpcf7_format_atts($atts); $html = sprintf(”, $atts, $valor); retorna $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;
}
}Com tudo pronto, você pode usar classes extras e marcação para estilizar o botão ao seu gosto. Como extra, adicionaremos uma animação simples com um código css abaixo.
button.twentysixteen-child-custom-btn {
-webkit-transition: -webkit-background .2s facilita a saída;
-moz-transição: -moz-background .2s facilita a saída;
transição: facilidade de fundo .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 facilita a saída;
-moz-transição: -moz-transform .2s facilita a saída;
transição: transforme facilidade de saída de .2s;
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);
button.twentysixteen-child-custom-btn { preenchimento: 15px 45px; -webkit-transition: -webkit-background .2s facilita a saída; -moz-transição: -moz-background .2s facilita a saída; transição: facilidade de fundo .2s; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; tamanho da fonte: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; posição: relativa; exibição: bloco em linha; alinhamento vertical: meio; altura da linha: herdar; -webkit-transition: -webkit-transform .2s facilita a saída; -moz-transição: -moz-transform .2s facilita a saída; transição: transforme facilidade de saída de .2s; } 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); }
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);
}O css pode ser adicionado dentro do arquivo css do tema filho ou simplesmente no back-end do WordPress > Aparência > Personalizar > Campo CSS adicional e, com ele, você terá uma bela animação de uma seta em movimento ao passar o mouse.
E é assim que você substitui um botão de envio do Contact Form 7 por um elemento de botão HTML5. Esperamos que você ache nossas instruções úteis. Se sim, por favor, compartilhe com outras pessoas que também podem fazer uso dele.