{"id":368024,"date":"2022-10-25T11:50:00","date_gmt":"2022-10-25T08:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=368024"},"modified":"2023-05-09T17:17:49","modified_gmt":"2023-05-09T14:17:49","slug":"uso-de-un-elemento-de-boton-html5-como-formulario-de-contacto-7","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/uso-de-un-elemento-de-boton-html5-como-formulario-de-contacto-7\/","title":{"rendered":"Uso de un elemento de bot\u00f3n HTML5 como formulario de contacto 7"},"content":{"rendered":"\n

Tener un sitio web de WordPress significa que lo m\u00e1s probable es que necesite tener un formulario de contacto en alg\u00fan lugar, ya sea para un bolet\u00edn informativo, una p\u00e1gina de contacto<\/a>, una encuesta o para cualquier otra cosa. Con CMS como WordPress, configurar un formulario de contacto es una tarea bastante sencilla<\/strong>. Es decir, hay muchos complementos de formularios de contacto<\/a> que puede usar, y el Formulario de contacto 7<\/a> es uno de los m\u00e1s populares.<\/p>\n

Para que pueda tener una idea m\u00e1s clara de lo que puede hacer el complemento Contact Form 7, aqu\u00ed hay algunos ejemplos de formularios de contacto creados con este complemento que vienen con temas premium en ThemeForest:<\/p>\n

No solo es f\u00e1cil crear cualquier tipo de formulario de contacto en WordPress, sino que el proceso en s\u00ed tambi\u00e9n est\u00e1 bien documentado. Por eso vamos directo al grano.<\/p>\n

Al usar este complemento, no tendr\u00e1 que pasar por la molestia de crear un formulario personalizado y una funcionalidad de back-end, lo que acelerar\u00e1 el proceso dr\u00e1sticamente. Sin embargo, lo que puede encontrar problem\u00e1tico es un bot\u00f3n de env\u00edo del Formulario de contacto 7 que es un elemento de entrada de tipo = "enviar".<\/p>\n

Incluso con el bot\u00f3n de env\u00edo de entrada est\u00e1ndar, tendr\u00e1 un buen formulario de trabajo. A\u00fan as\u00ed, \u00a0el problema surge si desea agregar un estilo adicional para este elemento<\/strong>. Como ya sabr\u00e1, existen ciertas limitaciones cuando se trata de css, ya que no puede usar los pseudo elementos aqu\u00ed, como: antes o: despu\u00e9s de lo cual puede ser \u00fatil para agregar un subrayado flotante, un \u00edcono de fuente ic\u00f3nico o cualquier otra cosa para la animaci\u00f3n. lo que vendr\u00eda como un buen toque final para su formulario.<\/p>\n

Por supuesto, podr\u00eda ser posible lograr animaciones sobresalientes simplemente envolviendo un bot\u00f3n de env\u00edo con alg\u00fan div con una clase personalizada, pero al cambiar la entrada al bot\u00f3n, puede tener mucho m\u00e1s control.<\/p>\n

Veamos c\u00f3mo puede usar un elemento de bot\u00f3n HTML5 como bot\u00f3n de env\u00edo para su formulario de contacto.<\/p>\n

Antes del cambio, un bot\u00f3n de enviar se ver\u00e1 as\u00ed.<\/p>\n

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

Primero, debemos eliminar la etiqueta de env\u00edo predeterminada del Formulario de contacto 7. Puedes hacerlo con esta simple l\u00ednea de c\u00f3digo:<\/p>\n

\/ eliminando la etiqueta de env\u00edo predeterminada \/<\/p>\n

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

\/ eliminando la etiqueta de env\u00edo predeterminada \/ 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
En segundo lugar, debemos agregar una acci\u00f3n con nuestra funci\u00f3n que mantendr\u00e1 nuestro marcado personalizado para el bot\u00f3n<\/strong>. Esta es otra l\u00ednea simple:<\/p>\n
\/ agregar acci\u00f3n con funci\u00f3n que maneja nuestro marcado de bot\u00f3n \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ agregar acci\u00f3n con funci\u00f3n que maneja nuestro marcado de bot\u00f3n \/ 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
A continuaci\u00f3n, estamos agregando una etiqueta que llamar\u00e1 a una funci\u00f3n de controlador de bot\u00f3n:<\/p>\n
\/ agregando la etiqueta del bot\u00f3n enviar \/<\/p>\n
if (!function_exists(‘veintis\u00e9is_ni\u00f1o_cf7_boton’)) {<\/p>\n
funci\u00f3n veintis\u00e9is_ni\u00f1o_cf7_button() {<\/p>\n
wpcf7_add_form_tag(‘enviar’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ agregando la etiqueta del bot\u00f3n de env\u00edo \/ 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, tenemos que agregar un marcado al controlador:<\/p>\n
\/ Marcado del bot\u00f3n de salida dentro del controlador \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
funci\u00f3n veintis\u00e9is_hijo_cf7_button_handler($etiqueta) {<\/p>\n
$etiqueta = new WPCF7_FormTag($etiqueta);<\/p>\n
$clase = wpcf7_form_controls_class($etiqueta->tipo);<\/p>\n
$atts[‘clase’] = $etiqueta->get_class_option($clase);<\/p>\n
$atts[‘clase’] .= ‘ veintis\u00e9is-hijos-personalizados-btn’;<\/p>\n
$atributos[‘id’] = $etiqueta->get_id_option();<\/p>\n
$atts[‘tabindex’] = $etiqueta->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valor = isset($etiqueta->valores[0])? $etiqueta->valores[0]: ";<\/p>\n
$valor = esc html_ (‘Cont\u00e1ctenos’, ‘veinticinco y seis’);<\/p>\n
$atts[‘tipo’] = ‘enviar’;<\/p>\n
$aportes = wpcf7_format_atts($aportes);<\/p>\n
$html = sprintf(\u00bb, $atributos, $valor);<\/p>\n
\/ Marcado del bot\u00f3n fuera del controlador \/ si (! La funci\u00f3n existe (‘veintis\u00e9is diecis\u00e9is child_cf7_button_handler’)) { funci\u00f3n veintis\u00e9is diecis\u00e9is_child_cf7_button_handler ($ etiqueta) { $ etiqueta = new WPCF7_FormTag ($ etiqueta); $clase = wpcf7_form_controls_class($etiqueta->tipo); $atributos = matriz(); $atts[‘clase’] = $etiqueta->get_class_option($clase); $atts[‘clase’] .= ‘ veintis\u00e9is-hijos-personalizados-btn’; $atributos[‘id’] = $etiqueta->get_id_option(); $atts[‘tabindex’] = $etiqueta->get_option(‘tabindex’, ‘int’, true); $valor = isset($etiqueta->valores[0])? $etiqueta->valores[0]: \u00ab; if (vac\u00edo($valor)) { $valor = esc_html (‘Cont\u00e1ctenos’, ‘veintis\u00e9is’); } $atts[‘tipo’] = ‘enviar’; $aportes = wpcf7_format_atts($aportes); $html = sprintf(\u00bb, $atributos, $valor); devolver $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
La funci\u00f3n de controlador es la parte m\u00e1s importante. Adem\u00e1s de imprimir una clase y una identificaci\u00f3n predeterminadas, tambi\u00e9n agregaremos una clase css personalizada dentro de ella<\/strong>. En la \u00faltima parte donde tenemos una variable $html, estamos colocando un marcado de bot\u00f3n con el icono de chevron FontAwesome. Tenga en cuenta que necesita tener esta fuente FontAwesome en su tema.<\/strong> Si no lo tiene, aseg\u00farese de encontrar un complemento que lo incluya.<\/p>\n
Ahora, nuestro bot\u00f3n de env\u00edo modificado se ver\u00e1 as\u00ed:<\/p>\n
\"Uso<\/a><\/p>\n
Como puede ver, cuando inspecciona su p\u00e1gina con el inspector web de Chrome, contiene exactamente el mismo marcado que hemos establecido dentro del controlador.<\/p>\n
\"Uso<\/a><\/p>\n
Y aqu\u00ed est\u00e1 el c\u00f3digo completo:<\/p>\n
\/ eliminando la etiqueta de env\u00edo predeterminada \/<\/p>\n
remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);<\/p>\n
\/ agregar acci\u00f3n con funci\u00f3n que maneja nuestro marcado de bot\u00f3n \/<\/p>\n
add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);<\/p>\n
\/ agregando la etiqueta del bot\u00f3n enviar \/<\/p>\n
if (!function_exists(‘veintis\u00e9is_ni\u00f1o_cf7_boton’)) {<\/p>\n
funci\u00f3n veintis\u00e9is_ni\u00f1o_cf7_button() {<\/p>\n
wpcf7_add_form_tag(‘enviar’, ‘twentysixteen_child_cf7_button_handler’);<\/p>\n
\/ Marcado del bot\u00f3n de salida dentro del controlador \/<\/p>\n
if (!function_exists(‘twentysixteen_child_cf7_button_handler’)) {<\/p>\n
funci\u00f3n veintis\u00e9is_hijo_cf7_button_handler($etiqueta) {<\/p>\n
$etiqueta = new WPCF7_FormTag($etiqueta);<\/p>\n
$clase = wpcf7_form_controls_class($etiqueta->tipo);<\/p>\n
$atts[‘clase’] = $etiqueta->get_class_option($clase);<\/p>\n
$atts[‘clase’] .= ‘ veintis\u00e9is-hijos-personalizados-btn’;<\/p>\n
$atributos[‘id’] = $etiqueta->get_id_option();<\/p>\n
$atts[‘tabindex’] = $etiqueta->get_option(‘tabindex’, ‘int’, true);<\/p>\n
$valor = isset($etiqueta->valores[0])? $etiqueta->valores[0]: \u00ab;<\/p>\n
$valor = esc html_ (‘Enviar’, ‘veintis\u00e9is’);<\/p>\n
$atts[‘tipo’] = ‘enviar’;<\/p>\n
$aportes = wpcf7_format_atts($aportes);<\/p>\n
$html = sprintf(\u00bb, $atributos, $valor);<\/p>\n
\/ eliminando la etiqueta de env\u00edo predeterminada \/ remove_action(‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’); \/ agregar acci\u00f3n con funci\u00f3n que maneja nuestro marcado de bot\u00f3n \/ add_action(‘wpcf7_init’, ‘twentysixteen_child_cf7_button’); \/ agregando la etiqueta del bot\u00f3n de env\u00edo \/ if (!function_exists(‘twentysixteen_child_cf7_button’)) { function twentysixteen_child_cf7_button() { wpcf7_add_form_tag(‘submit’, ‘twentysixteen_child_cf7_button_handler’); } } \/ marcado del bot\u00f3n de salida dentro del controlador \/ si (! existe la funci\u00f3n (‘twentysixteenchild_cf7_button_handler’)) { function twentysixteen_child_cf7_button_handler($etiqueta) { $etiqueta = new WPCF7_FormTag($etiqueta); $clase = wpcf7_form_controls_class($etiqueta->tipo); $atributos = matriz(); $atts[‘clase’] = $etiqueta->get_class_option($clase); $atts[‘clase’] .= ‘ veintis\u00e9is-hijos-personalizados-btn’; $atributos[‘id’] = $etiqueta->get_id_option(); $atts[‘tabindex’] = $etiqueta->get_option(‘tabindex’, ‘int’, true); $valor = isset($etiqueta->valores[0])? $etiqueta->valores[0]: \u00ab; if (vac\u00edo($valor)) { $valor = esc_html (‘Enviar’, ‘veintis\u00e9is’); } $atts[‘tipo’] = ‘enviar’; $aportes = wpcf7_format_atts($aportes); $html = sprintf(\u00bb, $atributos, $valor); devolver $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
Con todo en su lugar, puede usar clases adicionales y marcado para dise\u00f1ar el bot\u00f3n a su gusto<\/strong>. Como extra, le agregaremos una animaci\u00f3n de desplazamiento simple con un c\u00f3digo css a continuaci\u00f3n.<\/p>\n
button.twentysixteen-child-custom-btn {<\/p>\n
-webkit-transition: -webkit-background .2s relajaci\u00f3n;<\/p>\n
-moz-transition: -moz-background .2s relajaci\u00f3n;<\/p>\n
transici\u00f3n: fondo .2s facilidad;<\/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 suavizado;<\/p>\n
-moz-transici\u00f3n: -moz-transformar .2s facilidad de salida;<\/p>\n
transici\u00f3n: transformaci\u00f3n .2s relajaci\u00f3n;<\/p>\n
button.twentysixteen-child-custom-btn: hover .twentysixteen-child-custom-icon {<\/p>\n
-webkit-transformar: traducir3d(3px,0,0);<\/p>\n
-moz-transformar: traducir3d(3px,0,0);<\/p>\n
transformar: traducir3d(3px,0,0);<\/p>\n
button.twentysixteen-child-custom-btn { relleno: 15px 45px; -webkit-transition: -webkit-background .2s relajaci\u00f3n; -moz-transition: -moz-background .2s relajaci\u00f3n; transici\u00f3n: fondo .2s facilidad; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-btn-text { margin-right: 7px; tama\u00f1o de fuente: 15px; } button.twentysixteen-child-custom-btn .twentysixteen-child-custom-icon { font-size: 12px; posici\u00f3n: relativa; pantalla: bloque en l\u00ednea; alineaci\u00f3n vertical: medio; altura de l\u00ednea: heredar; -webkit-transition: -webkit-transform .2s suavizado; -moz-transici\u00f3n: -moz-transformar .2s facilidad de salida; transici\u00f3n: transformaci\u00f3n .2s relajaci\u00f3n; } button.twentysixteen-child-custom-btn: hover .twentysixteen-child-custom-icon { -webkit-transform: translate3d(3px,0,0); -moz-transformar: traducir3d(3px,0,0); transformar: traducir3d(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
El css se puede agregar dentro del archivo css del tema secundario o simplemente desde el back-end de WordPress> Apariencia> Personalizar> Campo CSS adicional, y con \u00e9l, tendr\u00e1 una animaci\u00f3n agradable de una flecha en movimiento al pasar el mouse.<\/p>\n
\"Uso<\/a><\/p>\n
Y as\u00ed es como reemplaza un bot\u00f3n de env\u00edo de Contact Form 7 con un elemento de bot\u00f3n HTML5. Esperamos que nuestras instrucciones le resulten \u00fatiles. Si es as\u00ed, comp\u00e1rtalo con otras personas que tambi\u00e9n puedan usarlo.<\/p>\n
Fuente de grabaci\u00f3n:  wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Si desea agregar un estilo adicional a su formulario de contacto, puede usar un elemento de bot\u00f3n HTML5 como bot\u00f3n de env\u00edo. Aqu\u00ed se explica c\u00f3mo usarlo.<\/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":[566],"tags":[849],"class_list":["post-368024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=368024"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/368024\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/364438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=368024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=368024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=368024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}