Uso de un elemento del botón HTML5 como Formulario de contacto 7 Enviar

Tener un sitio web de WordPress significa que lo más probable es que tenga que tener un formulario de contacto en algún lugar, ya sea un boletín, una página de contacto, una encuesta o algo más. Con CMS, como WordPress, la configuración de un formulario de contacto es una tarea bastante simple. A saber, hay muchos formularios de contacto que puede usar, y el Formulario de contacto 7 es uno de los más populares. Para tener una imagen más clara de lo que puede hacer el Formulario 7 de contacto del complemento, aquí hay algunos ejemplos de formularios de contacto hechos con este complemento que vienen con temas premium en Themeforest:
Formulario de contacto de Noizzy
Formulario de contacto de sekko
Formulario de contacto de Gluck
No solo es fácil crear cualquier tipo de formulario de contacto en WordPress, sino que el proceso en sí está bien documentado. Por eso iremos directamente al sujeto. Usando este complemento, no tendrá que pasar por un dolor de cabeza para crear una forma personalizada y una función de fondo, que acelerará drásticamente el proceso. Sin embargo, lo que puede encontrar problemático es un botón para enviar el Formulario 7 de contacto, que es un tipo de tipo = “enviar”. Incluso con el botón de entrada estándar, tendrá un buen formulario de trabajo. Sin embargo, surge el problema si desea agregar un estilo adicional para este elemento. Como probablemente ya sepa, hay ciertas limitaciones cuando se trata de CSS, porque no puede usar los pseudoelementos aquí, como: antes o: después de eso puede ser útil para agregar, icono icónico de fuentes o cualquier otra cosa para la animación que vendrá como una nota final para su formulario.
Por supuesto, podría ser posible obtener animaciones notables solo empacando un botón de referencia con un poco de DIT con una clase personalizada, pero al cambiar la entrada al botón, puede tener mucho más control. Veamos cómo puede usar un elemento del botón HTML5 como un botón de referencia para el formulario de contacto. Antes de cambiar, un botón de referencia se verá así. Todos los cambios deben realizarse dentro de un archivo Functions.php, preferiblemente dentro de las funciones infantiles.php. En aras de este tutorial, colocaremos todo nuestro código en un niño veinte y dieciséis.

Paso 1
En primer lugar, debemos eliminar la etiqueta de envío predeterminada del Formulario de contacto 7. Puede hacerlo con esta línea de código simple:
/*Eliminar la etiqueta de envío predeterminada*/
Remove_action (‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
Paso 2
En segundo lugar, debemos agregar una acción con nuestra función que mantendrá la marca personalizada para el botón. Esta es otra línea simple:
/*Agregar una acción con la función que se ocupa de la marca de nuestros botones*/
add_action (‘wpcf7_init’, ‘twentysexteen_child_cf7_button’);
Paso 3
A continuación, agregamos una etiqueta que llamará a una función de gestión de botones:
/*agregando la etiqueta del botón de envío*/
If (! Function_exist (‘twentysexteen_child_cf7_button’)) {
Twentysexteen_child_cf7_button () {
wpcf7_add_form_tag (‘enviar’, ‘twentysexteen_child_cf7_button_handler’);
}
}
Paso 4
Finalmente necesitamos agregar un marcador al controlador:
/*Marque el botón de salida dentro del controlador*/
If (! Function_exist (‘twentysexteen_child_cf7_button_handler’)) {function twentysexteen_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’]. = ‘Veinte y dieciséis hijos-personalizado-BTN’;
$ atts [‘id’] = $ tag-> get_id_option ();
$ atts [‘tabindex’] = $ tag-> get_option (‘tabindex’, ‘int’, true);
$ valor = isset ($ tag-> valores [0])? $ tag-> valores [0]: ”;
If (vacía (vacía ($ valor))) {
$ Value = esc_html __ (‘Contáctenos’, ‘veinteseen’);
}
$ atts [‘type’] = ‘send’;
$ Atts = wpcf7_format_atts ($ atts);
$ html = sprintf (‘ %2 $ s’, $ atts, $ valor);
devuelve $ html;
}
}
La función de gestión es la parte más importante. Además de imprimir una clase e ID predeterminada, también agregaremos una clase CSS personalizada dentro de ella. En la última parte donde tenemos una variable $ HTML, ponemos una marca de botón con el icono de Chevron Fontawesome. Tenga en cuenta que debe tener esta fuente FontAwesome en su tema si no la tiene, asegúrese de encontrar un complemento que lo incluya.
Ahora nuestro botón de envío modificado se verá así:
Como puede ver, cuando inspecciona su página con el Inspector Web Chrome, contiene exactamente la misma marca que he establecido en Handler.

Y aquí está el código completo:

/*Eliminar la etiqueta de envío predeterminada*/

Remove_action (‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
/*Agregar una acción con la función que se ocupa de la marca de nuestros botones*/
add_action (‘wpcf7_init’, ‘twentysexteen_child_cf7_button’);/*Agregar la etiqueta del envío*/
If (! Function_exist (‘twentysexteen_child_cf7_button’)) {
Twentysexteen_child_cf7_button () {
wpcf7_add_form_tag (‘enviar’, ‘twentysexteen_child_cf7_button_handler’);
}
}
/*Marque el botón de salida dentro del controlador*/
If (! Function_exist (‘twentysexteen_child_cf7_button_handler’)) {
La función twentysexteen_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’]. = ‘Veinte y dieciséis hijos-personalizado-BTN’;
$ atts [‘id’] = $ tag-> get_id_option ();
$ atts [‘tabindex’] = $ tag-> get_option (‘tabindex’, ‘int’, true);
$ valor = isset ($ tag-> valores [0])? $ tag-> valores [0]: ”;
If (vacía (vacía ($ valor))) {
$ value = esc_html __ (‘enviar’, ‘veinte -sesiseen’);
}
$ atts [‘type’] = ‘send’;
$ Atts = wpcf7_format_atts ($ atts);
$ html = sprintf (‘ %2 $ s’, $ atts, $ valor);
devuelve $ html;
}
}
Paso 5
Completamente en su lugar, puede usar clases adicionales y marcas para atacar el botón como lo desee. Además, agregaremos una animación simple con un código CSS a continuación.
Botón
Llenado: 15px 45px;
-WebKit-Transition: -webkit-background .2s facilitados;
-Moz-Transition: -Moz-Backgrony .2S Fase-Out;
Transición: antecedentes .2 Facilidad;
}
Button.TwentysiSteen-child-ccus-btn .twentysexteen-child-ccustom-btn- {
Margine-Right: 7px;
Tamaño de fuente: 15px;}
botón
Tamaño de fuente: 12px;
Posición: relativo;
Pantalla: bloque en línea;
Align vertical: medio;
Línea de altura: herencia;
-WebKit-Transition: -webkit-transform .2s Facil-Out;
-Moz-Transition: -Moz-Transform .2S Facilifique;
Transición: transformación .2 Facilidad de salida;
}
Button.TwentysiSteen-Child-Custom-Btn: Hover .TwentysiSteen-Child-Custom-Icon {
-Webkit-transform: traduce3D (3px, 0.0);
-Moz-Transform: traduce3D (3px, 0.0);
Transformar: traducir3D (3px, 0.0);
}
El CSS se puede agregar al archivo CSS del tema infantil o simplemente desde el campo de Back-End WordPress> Personalización> CSS CSS y, con él, tendrá una animación agradable de una flecha que se mueve.
Conclusión
Y, por lo tanto, reemplace un botón de envío del formulario de contacto 7 con un elemento del botón HTML5. Esperamos que encuentre nuestras instrucciones útiles. Si es así, compártelo con otros que puedan usarlo.
Esperamos que este artículo haya sido útil. Si le gustó, ¡no dude en consultar algunos de estos artículos!
Cómo mostrar los datos de la publicación como “tiempo atrás”

El tema del niño – una explicación simple
Personalizar la opción en WordPress