{"id":367992,"date":"2022-10-25T11:24:00","date_gmt":"2022-10-25T08:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367992"},"modified":"2023-05-09T17:44:31","modified_gmt":"2023-05-09T14:44:31","slug":"usando-um-elemento-de-botao-html5-como-formulario-de-contato-7-enviar","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/usando-um-elemento-de-botao-html5-como-formulario-de-contato-7-enviar\/","title":{"rendered":"Usando um elemento de bot\u00e3o HTML5 como formul\u00e1rio de contato 7 Enviar"},"content":{"rendered":"\n

Ter um site WordPress significa que voc\u00ea provavelmente precisar\u00e1 ter um formul\u00e1rio de contato em algum lugar, seja para um boletim informativo, uma p\u00e1gina de contato<\/a>, uma enquete ou qualquer outra coisa. Com CMS como o WordPress, configurar um formul\u00e1rio de contato \u00e9 uma tarefa bastante simples<\/strong>. Ou seja, existem muitos plugins de formul\u00e1rio de contato<\/a> que voc\u00ea pode usar, e o Contact Form 7<\/a> \u00e9 um dos mais populares.<\/p>\n

Para que voc\u00ea possa ter uma vis\u00e3o mais clara do que o plug-in Contact Form 7 pode fazer, aqui est\u00e3o alguns exemplos de formul\u00e1rios de contato feitos com este plug-in que v\u00eam com temas premium no ThemeForest:<\/p>\n

N\u00e3o s\u00f3 \u00e9 f\u00e1cil criar qualquer tipo de formul\u00e1rio de contato no WordPress, mas o processo em si tamb\u00e9m \u00e9 bem documentado. Por isso vamos direto ao ponto.<\/p>\n

Ao usar este plugin, voc\u00ea n\u00e3o ter\u00e1 que se preocupar em criar um formul\u00e1rio personalizado e uma funcionalidade de back-end, o que acelerar\u00e1 drasticamente o processo. No entanto, o que voc\u00ea pode achar problem\u00e1tico \u00e9 um bot\u00e3o de envio do Contact Form 7, que \u00e9 um elemento de entrada de type="submit".<\/p>\n

Mesmo com o bot\u00e3o de envio de entrada padr\u00e3o, voc\u00ea ter\u00e1 um bom formul\u00e1rio de trabalho. Ainda assim, \u00a0o problema surge se voc\u00ea quiser adicionar um estilo adicional para esse elemento<\/strong>. Como voc\u00ea j\u00e1 deve saber, existem certas limita\u00e7\u00f5es quando se trata de css, pois voc\u00ea n\u00e3o pode usar os pseudo elementos aqui, como :before ou :after, que podem ser \u00fateis para adicionar algum sublinhado, \u00edcone de fonte ic\u00f4nica ou qualquer outra coisa para anima\u00e7\u00e3o o que seria um belo toque final para o seu formul\u00e1rio.<\/p>\n

Claro, pode ser poss\u00edvel obter anima\u00e7\u00f5es excelentes apenas envolvendo um bot\u00e3o de envio com algum div com classe personalizada, mas alterando a entrada para o bot\u00e3o, voc\u00ea pode ter muito mais controle.<\/p>\n

Vamos ver como voc\u00ea pode usar um elemento de bot\u00e3o HTML5 como um bot\u00e3o de envio para seu formul\u00e1rio de contato.<\/p>\n

Antes da altera\u00e7\u00e3o, um bot\u00e3o de envio ficar\u00e1 assim.<\/p>\n

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

Primeiro, precisamos remover a tag de envio padr\u00e3o do Contact Form 7. Voc\u00ea pode fazer isso com esta simples linha de c\u00f3digo:<\/p>\n

\/ removendo a tag de envio padr\u00e3o \/<\/p>\n

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

\/ removendo a tag de envio padr\u00e3o \/ 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
Em segundo lugar, precisamos adicionar a\u00e7\u00e3o com nossa fun\u00e7\u00e3o que manter\u00e1 nossa marca\u00e7\u00e3o personalizada para o bot\u00e3o<\/strong>. Esta \u00e9 outra linha simples:<\/p>\n
\/ adicionando a\u00e7\u00e3o com fun\u00e7\u00e3o que lida com nossa marca\u00e7\u00e3o de bot\u00e3o \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ adicionando a\u00e7\u00e3o com fun\u00e7\u00e3o que lida com nossa marca\u00e7\u00e3o de bot\u00e3o \/ 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
Em seguida, estamos adicionando uma tag que chamar\u00e1 uma fun\u00e7\u00e3o de manipulador de bot\u00e3o:<\/p>\n
\/ adicionando a tag do bot\u00e3o de envio \/<\/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
\/ adicionando a tag do bot\u00e3o de envio \/ 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
Finalmente, temos que adicionar uma marca\u00e7\u00e3o ao manipulador:<\/p>\n
\/ marca\u00e7\u00e3o do bot\u00e3o de sa\u00edda dentro do manipulador \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function Twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = new WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘ twentysteen-child-custom-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valor = isset($tag->valores[0])? $tag->valores[0]: ";<\/p>\n
$valor = esc html_ (‘Fale Conosco’, ‘vinte e dezesseis’);<\/p>\n
$atts[‘tipo’] = ‘enviar’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $valor);<\/p>\n
\/ marca\u00e7\u00e3o de bot\u00e3o de sa\u00edda 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; } }<\/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
A fun\u00e7\u00e3o do manipulador \u00e9 a parte mais importante. Al\u00e9m de imprimir uma classe e um ID padr\u00e3o, tamb\u00e9m adicionaremos uma classe css personalizada dentro dela<\/strong>. Na \u00faltima parte onde temos uma vari\u00e1vel $html, estamos colocando uma marca\u00e7\u00e3o de bot\u00e3o com o \u00edcone de divisa FontAwesome. Observe que voc\u00ea precisa ter essa fonte FontAwesome em seu tema.<\/strong> Se voc\u00ea n\u00e3o o tiver, certifique-se de encontrar um plugin que o inclua.<\/p>\n
Agora, nosso bot\u00e3o de envio alterado ficar\u00e1 assim:<\/p>\n
\"Usando<\/a><\/p>\n
Como voc\u00ea pode ver, quando voc\u00ea inspeciona sua p\u00e1gina com o inspetor da Web do Chrome, ela cont\u00e9m exatamente a mesma marca\u00e7\u00e3o que definimos dentro do manipulador.<\/p>\n
\"Usando<\/a><\/p>\n
E aqui est\u00e1 o c\u00f3digo completo:<\/p>\n
\/ removendo a tag de envio padr\u00e3o \/<\/p>\n
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n
\/ adicionando a\u00e7\u00e3o com fun\u00e7\u00e3o que lida com nossa marca\u00e7\u00e3o de bot\u00e3o \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ adicionando a tag do bot\u00e3o de envio \/<\/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
\/ marca\u00e7\u00e3o do bot\u00e3o de sa\u00edda dentro do manipulador \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
function Twentysixteen_child_cf7_button_handler($tag) {<\/p>\n
$tag = new WPCF7_FormTag($tag);<\/p>\n
$class = wpcf7_form_controls_class($tag->type);<\/p>\n
$atts[‘class’] = $tag->get_class_option($class);<\/p>\n
$atts[‘class’] .= ‘ twentysteen-child-custom-btn’;<\/p>\n
$atts[‘id’] = $tag->get_id_option();<\/p>\n
$atts[‘tabindex’] = $tag->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valor = isset($tag->valores[0])? $tag->valores[0]: “;<\/p>\n
$valor = esc html_ (‘Enviar’, ‘vinte e dezesseis’);<\/p>\n
$atts[‘tipo’] = ‘enviar’;<\/p>\n
$atts = wpcf7_format_atts($atts);<\/p>\n
$html = sprintf(”, $atts, $valor);<\/p>\n
\/ removendo a tag de envio padr\u00e3o \/ remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); \/ adicionando a\u00e7\u00e3o com fun\u00e7\u00e3o que lida com nossa marca\u00e7\u00e3o de bot\u00e3o \/ add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); \/ adicionando a tag do bot\u00e3o 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\u00e7\u00e3o do bot\u00e3o de sa\u00edda 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; } }<\/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
Com tudo pronto, voc\u00ea pode usar classes extras e marca\u00e7\u00e3o para estilizar o bot\u00e3o ao seu gosto<\/strong>. Como extra, adicionaremos uma anima\u00e7\u00e3o simples com um c\u00f3digo css abaixo.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition: -webkit-background .2s facilita a sa\u00edda;<\/p>\n
-moz-transi\u00e7\u00e3o: -moz-background .2s facilita a sa\u00edda;<\/p>\n
transi\u00e7\u00e3o: facilidade de fundo .2s;<\/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 facilita a sa\u00edda;<\/p>\n
-moz-transi\u00e7\u00e3o: -moz-transform .2s facilita a sa\u00edda;<\/p>\n
transi\u00e7\u00e3o: transforme facilidade de sa\u00edda de .2s;<\/p>\n
button.twentysixteen-child-custom-btn:hover .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transform: translate3d(3px,0,0);<\/p>\n
-moz-transform: translate3d(3px,0,0);<\/p>\n
transform: translate3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { preenchimento: 15px 45px; -webkit-transition: -webkit-background .2s facilita a sa\u00edda; -moz-transi\u00e7\u00e3o: -moz-background .2s facilita a sa\u00edda; transi\u00e7\u00e3o: 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\u00e7\u00e3o: relativa; exibi\u00e7\u00e3o: bloco em linha; alinhamento vertical: meio; altura da linha: herdar; -webkit-transition: -webkit-transform .2s facilita a sa\u00edda; -moz-transi\u00e7\u00e3o: -moz-transform .2s facilita a sa\u00edda; transi\u00e7\u00e3o: transforme facilidade de sa\u00edda 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); }<\/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
O css pode ser adicionado dentro do arquivo css do tema filho ou simplesmente no back-end do WordPress > Apar\u00eancia > Personalizar > Campo CSS adicional e, com ele, voc\u00ea ter\u00e1 uma bela anima\u00e7\u00e3o de uma seta em movimento ao passar o mouse.<\/p>\n
\"Usando<\/a><\/p>\n
E \u00e9 assim que voc\u00ea substitui um bot\u00e3o de envio do Contact Form 7 por um elemento de bot\u00e3o HTML5. Esperamos que voc\u00ea ache nossas instru\u00e7\u00f5es \u00fateis. Se sim, por favor, compartilhe com outras pessoas que tamb\u00e9m podem fazer uso dele.<\/p>\n
Fonte de grava\u00e7\u00e3o:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Se voc\u00ea deseja adicionar um estilo adicional ao seu formul\u00e1rio de contato, voc\u00ea pode usar um elemento de bot\u00e3o HTML5 como um bot\u00e3o de envio. Aqui est\u00e1 como us\u00e1-lo.<\/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":[573],"tags":[848],"class_list":["post-367992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=367992"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367992\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=367992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=367992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=367992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}