Formulario de contacto 7 Guía fácil para principiantes
La mayoría necesita una forma de llegar a los clientes, prospectos o lectores habituales. Puede comprar un tema que tenga una página de contacto personalizada incorporada, o puede intentar codificar una página de contacto usted mismo, pero estas opciones suelen ser costosas o complicadas. No tiene tiempo para eso, lo que nos lleva al formulario de contacto 7.
¿Qué es el formulario de contacto 7?
Contact Form 7 es un complemento gratuito de WordPress que puede usar para crear una variedad de formularios de contacto para su sitio web. Este complemento no solo es gratuito, sino que el código abreviado personalizado para cada formulario de contacto que crea facilita agregar sus formularios de contacto a cualquier área de publicación, página o widget.
Nos encanta tanto este complemento que prácticamente todos los temas de WPExplorer lo admiten, incluso nuestro tema premium de WordPress más vendido TotalY otros desarrolladores están de acuerdo, ya que sería difícil encontrar un tema con el que no sea compatible.
¿Por qué elegir el Formulario de contacto 7?
Entonces, ahora que sabe qué es el Formulario de contacto 7, su próxima pregunta podría ser ¿por qué este complemento? Hay toneladas de excelentes complementos de formularios de contacto para elegir, entonces, ¿qué hace que Contact Form 7 sea la elección correcta?
Bueno, en primer lugar, es Gratis – ya que no hay una versión premium. Entonces, en comparación con otros complementos de formulario "gratuitos", no verá toneladas de ventas adicionales integradas en el tablero principal, lo cual es realmente bueno. Además, es personalizadoTambién hay formas fáciles de personalizar sus formularios con los parámetros disponibles o con un poco de CSS. Y como se mencionó, es compatible con una amplia gama de temas gratuitos y premium, por lo que si decide cambiar su tema más tarde, sus formularios de contacto deberían seguir funcionando.
Ahora que lo aclaramos, echemos un vistazo a cómo puede usar el Formulario de contacto 7 en su sitio de WordPress.
Cómo empezar con un formulario de contacto 7
La instalación es fácil. solo ve a Complementos > Agregar nuevo y use la opción Buscar para encontrar el complemento Formulario de contacto 7. Instale y active el complemento.
Una vez activo, debería ver un elemento de menú "Contacto" útil en su tablero de WordPress Haga clic en él para ir a la página principal de administración del formulario de contacto.
Los autores del complemento tuvieron la amabilidad de incluir información útil en el tablero; siéntase libre de descartar esta notificación en cualquier momento. De manera predeterminada, ya tendrá un "Formulario de contacto 1" de muestra esperándolo. Recomendamos eliminar este formulario para que pueda comenzar desde cero.
Agregar Nuevo para crear su primer formulario de contacto. Verá muchas opciones cuando se abra su formulario de contacto. No tengas miedo, te prometo que es fácil.
Primero, notará un cuadro en la parte superior de la página. Aquí es donde puede cambiar el nombre de su formulario. Recomendamos que asigne un nombre al formulario que tenga sentido para su propósito, como dónde o cómo lo usará.
Ahora pasamos a los ajustes disponibles. Lo revisaremos sección por sección.
Configuración de formulario
La sección Formulario es donde realmente creará su formulario de contacto. Contact Form 7 usa diferentes etiquetas para agregar diferentes secciones del formulario. El formulario de contacto predeterminado incluye campos para nombre, correo electrónico, asunto, mensaje y un botón de envío.
A Borrar campo simplemente elimina su código del formulario.
A agregar campo, simplemente haga clic en cualquiera de las etiquetas disponibles para insertar el código en la sección de su formulario. Se abrirá una ventana emergente para que pueda confirmar la información relevante antes de insertar.
Puede generar etiquetas para texto, correo electrónico, URL, teléfono, número, fecha, área de texto, menú desplegable, casillas de verificación, botones de opción, aceptar (por ejemplo, condiciones), probar, cargar archivos y enviar.
Configuración de correo
Aquí es donde puede realizar cambios en el correo electrónico que recibe cuando los usuarios envían formularios de contacto. De forma predeterminada, el complemento utilizará la dirección de correo electrónico del administrador de su sitio, pero puede cambiarla fácilmente a un correo electrónico de soporte o a varias direcciones de correo electrónico.
Además, si elige agregar etiquetas personalizadas a su formulario, asegúrese de agregar la parte del shortcode generado al cuerpo del mensaje. Si no ingresa este código, no obtendrá las respuestas que los usuarios envían para este campo.
La opción Correo 2 le permite crear una respuesta automática que notifica al usuario que su mensaje ha sido recibido. O se puede usar si desea enviar un correo electrónico diferente a diferentes destinatarios Tal vez desee recibir correos electrónicos con la información completa del formulario de contacto incluida, pero solo desea que su personal de servicio reciba correos electrónicos con uno o dos campos. Hay muchas formas de utilizar esta función.
Configuración de mensajes
Edite los mensajes que se muestran a los usuarios para varias tareas completadas (o incompletas). Puede crear mensajes personalizados para eventos como el envío exitoso de contactos, errores de validación, formato incorrecto y más.
Ajustes adicionales
La pestaña Configuración avanzada final le permite habilitar varias opciones integradas solo para suscriptores, modo de demostración (para que no se envíen correos electrónicos), validación de recibos, opciones de almacenamiento de mensajes y más. Puedes ver más Formulario de contacto 7 configuraciones adicionales en su documentación.
Una vez que haya terminado de editar, no olvide guardar los cambios.
Usando tu formulario
Una vez que su formulario de contacto esté activo y listo para usar, puede copiar el código abreviado del formulario para insertarlo en una página, publicación, área de widgets, etc. El código abreviado se puede encontrar en la parte superior de la página de creación del formulario de contacto, justo debajo del título del formulario después de guardarlo (debería verse así:
[contact-form-7 id="330" title="Contact Page"]
O si usa un generador de páginas como WPBakery o Elementor, simplemente puede usar el generador de Formulario de contacto 7 asociado para seleccionar e insertar su formulario en una página.
Formulario de contacto 7 consejos avanzados
Ahora, si lo desea, puede volverse realmente elegante con el Formulario de contacto 7 con solo un pequeño código personalizado. Estos son algunos de mis trucos favoritos que puede usar para crear un formulario de contacto impresionante para su sitio web.
Texto multimedia en su lugar
Tal vez no quiera encabezados en los campos de su formulario, o tal vez desee agregar texto para mostrar a los usuarios qué ingresar en un campo determinado. Agregar un contenedor es fácil, solo elimine las etiquetas de sus campos, luego agregue su texto citado preferido al final de su código entre corchetes como este:
[text* your-name "Your Name"]
Campos de entrada de ancho completo
Personalmente, no me gusta que los campos de texto predeterminados sean tan cortos. Hay dos formas de cambiar el ancho de un cuadro de texto. La forma de hacer trampa es simplemente agregar el ancho de carácter deseado al código para ese campo en el formulario. Entonces, si desea un campo de ancho completo con espacio para 300 caracteres, agregue 300 seguido de una barra invertida como esta:
[text* your-name 300/ "Your Name"]
Si desea hacerlo de la manera correcta, deberá agregar el siguiente código a su hoja de estilo CSS:
input.wpcf7-text { width: 100%; }
Pero esto afectará TODOS los campos de texto del formulario de contacto 7 en toda su instalación de WordPress.
Si usa el generador de páginas de WPBakery, tiene la opción de omitir esto y apuntar a una fila específica en una publicación o página específica para que solo se diseñe un formulario de contacto aislado. Primero, haga clic en la fila y agregue una ID de fila personalizada. Luego guarda.
A continuación, haga clic en el ícono de ajustes justo encima del área de contenido principal de su publicación o página e ingrese #YOUR-ROW-ID seguido del código CSS mencionado anteriormente.
Campos de entrada uno al lado del otro
Otro buen truco es agregar sus campos uno al lado del otro. Creo que esto mantiene el formulario de contacto súper limpio y profesional. Para hacer esto con el tema genérico de WordPress, te lo ponemos fácil y agregamos una clase personalizada. Simplemente agregue en clase = "una mitad" a sus etiquetas p como esta:
<p class="one-half first">[text* your-name "Your Name"]</p>
<p class="one-half">[email* your-email "Your Email"]</p>
<p>[textarea your-message]</p>
<p>[submit "Submit Form"]</p>
Nota: Este consejo es específicamente para usuarios de Total Theme, pero otros temas pueden tener un estilo de formulario similar incorporado.
Etiquetas de correo electrónico elegantes
A veces se necesita más información de la que envía el usuario. Aquí es donde se encuentra el formulario de contacto 7 etiquetas especiales de correo electrónico Son útiles. Con ellos, puede agregar marcas de tiempo de correo electrónico, dirección IP de envío, ID o título de la publicación que contiene el formulario de contacto, y más. Todas estas herramientas pueden ayudarlo a mantener organizados los envíos de formularios.
Obtenga más información sobre el formulario de contacto 7
Para obtener más consejos sobre el uso del Formulario de contacto 7, consulte su documentaciónAquí encontrará explicaciones detalladas de las diferentes etiquetas y de lo que son capaces, consejos útiles de los autores del complemento y artículos útiles para la resolución de problemas si, por alguna razón, el complemento no funciona para usted.
Contact Form 7 es uno de los mejores complementos gratuitos disponibles y es uno de los mejores opciones para crear formularios de contacto en cualquier sitio web de WordPress. Esperamos que esta guía haya sido útil, pero si tiene alguna pregunta o desea compartir sus opiniones sobre el Formulario de contacto 7, ¡déjenos un comentario a continuación!
Deja una respuesta