Cómo agregar formularios de contacto usando el complemento - P1: Use el formulario de contacto 7

El formulario de contacto es uno de los elementos más importantes si quieres tener un sitio web profesional. Incluso no es difícil crear y configurar un formulario de contacto si usa complementos dedicados. Para ayudarlo a crear formularios de contacto con complementos de manera fácil y rápida, hemos compilado y escrito instrucciones sobre cómo utilizar los complementos de formularios de contacto más populares.

En la primera parte de la serie "Formulario de contacto", averigüemos:

• ¿Qué es el formulario de contacto?
• Beneficios del formulario de contacto
• ¿Cómo utilizar el complemento Contact Form 7 para crear un formulario?

¿Qué es el formulario de contacto y sus beneficios?

¿Qué es el formulario de contacto?

El formulario de contacto es un término familiar para los especialistas en marketing. Mediante el formulario de contacto, los usuarios pueden enviar correos electrónicos y comunicarse con usted directamente en el sitio web sin conocer su dirección de correo electrónico.

Un formulario de contacto generalmente tiene muchos campos para que los usuarios completen la información requerida, como correo electrónico, número de teléfono, nombre, contenido del correo electrónico, ... Además, generalmente se coloca en una página de contacto o en el área donde necesita obtener la información de contacto de los clientes. . Aquí hay un ejemplo:

Beneficios del formulario de contacto

Debido a que los usuarios pueden usar el formulario de contacto para enviar información al propietario del sitio (para dejar su información de contacto, enviar solicitudes de soporte u otras solicitudes,…) directamente en ese sitio web, hace que el contacto sea mucho más conveniente y rápido.

Además, el uso de un formulario de contacto puede mantener la privacidad de su correo electrónico, así como reducir el spam y las amenazas a la seguridad. Por lo tanto, no tendrá que lidiar con el buzón de correo lleno de spam y basura todos los días.

Además, los formularios de contacto te ayudan a recopilar la información de los usuarios más fácilmente porque tienen que completar la información que solicitas en el formulario. Esta es una de las estrategias para conseguir más leads.

En general, para crear un sitio web profesional y obtener más beneficios para su negocio, debe utilizar formularios de contacto.

Cómo crear un formulario de contacto

Puede codificar para crear campos y formularios como desee. Sin embargo, si no eres un codificador, esto no es posible. O tienes que pagar una suma de dinero contratando a un codificador para hacer esto.

Por lo tanto, la solución más útil para crear formularios de contacto para usuarios no tecnológicos, o incluso desarrolladores (para ahorrar tiempo y esfuerzo) es usar un complemento. Ahora, hay muchos complementos de formularios de contacto que son simples, fáciles, rápidos y gratuitos. Entonces, no hay razón para no usarlos para crear un formulario de contacto, ¿verdad?

En todos los artículos de esta serie, te mostraré cómo crear un formulario de registro universitario de la siguiente manera:

Crear un formulario usando el formulario de contacto 7

En este primer artículo de la serie "Crear formulario de contacto utilizando complementos", utilizo el Formulario de contacto 7, uno de los complementos de formulario de contacto gratuitos más populares disponibles en la actualidad.

En primer lugar, descargue e instale este complemento desde el repositorio de complementos en wordpress.org, o vaya a Panel de control > Complemento > Agregar nuevo para instalarlo y activarlo.

Formulario de contacto 7

Autor (es): Takayuki Miyoshi

Versión actual: 5.5.3

Última actualización: 28 de noviembre de 2021

contact-form-7.5.5.3.zip

82% Calificaciones 5,000,000+ Instalaciones WP 5.7+ Requiere

Aquí hay instrucciones específicas para crear el formulario de registro universitario anterior con este complemento.

Interfaz

Vaya a Panel de control > Contacto > Agregar nuevo para crear un nuevo formulario de contacto. Aquí está la interfaz con la que trabajará:

(1): Ingrese el nombre del formulario de contacto
(2): pestañas para crear y configurar un formulario de contacto, que incluyen:

• Pestaña formulario : cree campos para el formulario de contacto
• Pestaña de correo : configure los correos electrónicos que recibe desde el formulario de contacto
• Pestaña de mensaje : incluye notificaciones que reciben los usuarios cuando hay un error al imputar datos, no se puede enviar el formulario, enviar el formulario correctamente,…
• Pestaña Configuración adicional : agregue otros elementos al formulario de contacto.

Crear campos para formulario de contacto

Como mencioné, un formulario de contacto contiene campos que permiten a los usuarios ingresar información o interactuar con ella. Aquí está la pestaña Formulario que se usa para crear estos campos:

(1) consta de campos para agregar al formulario, como nombre, correo electrónico, número, botón enviar,… Para agregar cualquier campo, simplemente haga clic en el nombre del campo correspondiente.

(2) es el área para mostrar la estructura del formulario en formato HTML. Al crear un nuevo formulario de contacto, tendrá la estructura predeterminada para un formulario básico con campos simples como correo electrónico, nombre, asunto y botón de envío. Puede utilizar este formulario inmediatamente o crear uno nuevo basado en él.

Instrucción general para campos

Después de elegir el campo deseado, aparecerá una ventana emergente donde ingrese la información necesaria en el campo. Cada campo requiere información diferente, pero en general, todos tienen las siguientes secciones:

Nombre : atributo de nombre
Valor predeterminado : el valor predeterminado del campo.
Atributo Id : ID del campo
Atributo de clase : la clase del campo.

Nota : el atributo ID y el atributo Clase son opcionales y puede ingresar su información personalizada allí. Si desea que los siguientes pasos para diseñar el formulario de contacto sean más fáciles, debe completar estas 2 secciones.

Después de completar esta información, verá la etiqueta del campo que ha creado en la parte inferior de este cuadro. Haga clic en Insertar etiqueta para insertar este campo en el HTML del formulario.

Normalmente, la etiqueta de cada campo en un formulario de contacto creado con Contact Form 7 tendrá la siguiente estructura:

 [field * name_attribute id: field_id class: field_class "el valor predeterminado del campo"]

Explicaciones:

• field * es el tipo de campo que elige. Esta es la parte más importante e imprescindible de un campo.
• * significa que este campo es obligatorio. Si no desea obligar a los usuarios a ingresarlo, elimine el * .

Para comprender más sobre la estructura de una etiqueta de campo en el Formulario de contacto 7, consulte esta documentación. Comprender el significado y la estructura HTML de un formulario de contacto le facilitará la edición, creación y adición de nuevos campos mediante código. Especialmente con los codificadores, pueden escribir código HTML para crear el formulario de acuerdo con la sintaxis anterior. Sin embargo, sin codificador, puede ser difícil, por lo que recomiendo seguir estos pasos a continuación.

Con los formularios de contacto de esta serie, debo elegir los siguientes campos:

Todos los campos tienen la información común que dije anteriormente. Por lo tanto, ahora solo guío las partes específicas de cada campo.

A continuación se muestran instrucciones detalladas para cada campo.

Cree un campo para ingresar el nombre

Seleccione el campo de texto e ingrese la información básica del campo en el cuadro:

En la sección Tipo de campo , puede elegir Requerir para que este campo sea obligatorio para ser llenado (esto es opcional).

Nota : En la sección Valor predeterminado , elija Usar este texto como marcador de posición del campo para mostrar este contenido en el campo antes de que los usuarios ingresen datos. Debe utilizar este modo para explicar a los usuarios lo que deben completar en el campo.

La sección Akismet está relacionada con el complemento Akismet, un complemento anti-spam. Si no tiene este complemento, no se preocupe por esta sección.

Cree un campo para ingresar el número de teléfono

Seleccione el campo numérico y complete la información básica del campo.

En la sección Tipo de campo , elija un tipo para este campo. Hay dos tipos de campos: Spinbox y Slider .

El control deslizante mostrará una escala para elegir el número de la siguiente manera:

Este estilo es adecuado para puntuar o elegir números en función de una escala específica.

Mientras tanto, Spinbox te permite ingresar cualquier número, la secuencia de números en el campo como número de teléfono, número de tarjeta, número de tarjeta de identificación,… Entonces, en este ejemplo, elijo Spinbox.

La sección Rango le permite elegir un límite para el número. En este ejemplo, no necesito esta sección, así que no completé nada.

Cree un campo para seleccionar especializaciones y ubicaciones de estudio

Con este campo, seleccione el menú desplegable .

Ahora, complete las opciones para especializaciones y ubicaciones en la sección Opciones , tenga en cuenta que cada opción es una línea.

Si desea permitir que los usuarios seleccionen varias opciones a la vez, haga clic en Permitir varias selecciones .

Cree un campo para elegir el propósito del registro

Seleccione el campo de la casilla de verificación .

La sección de Opciones es similar a la que en el campo de menú desplegable de arriba. Además, hay más opciones para las casillas de verificación de la siguiente manera

• Ponga una etiqueta primero, una casilla de verificación al final
• Envuelva cada artículo con un elemento de etiqueta
• Haga que las casillas de verificación sean exclusivas (solo puede elegir 1 opción).

Crear el botón de envío

Finalmente, seleccione el campo de envío y simplemente complete la información como el siguiente requisito (tenga en cuenta que Etiqueta es la palabra que aparecerá en este botón, por ejemplo, "Enviar", "Registrarse", "Confirmar").

En particular, al crear un nuevo formulario, este complemento ya ha creado automáticamente un campo enviado. Por lo tanto, puede utilizar este campo sin crear uno nuevo.

Agregar etiquetas para campos

Ahora ha terminado de crear campos para el formulario de contacto. Sin embargo, sus campos no han tenido un nombre para mostrar en el formulario de contacto de la siguiente manera:

Por lo tanto, debe agregar etiquetas a los campos insertando la siguiente estructura de código en la parte HTML del formulario:

 <etiqueta> Etiqueta de campo
[Etiqueta del campo] </label>

A continuación, escriba la etiqueta del campo en la sección Etiqueta de campo . Luego complete toda la información anterior, haga clic en Guardar .

Después de crear los campos, mi formulario de contacto tiene la siguiente estructura de código, tenga en cuenta que he organizado los campos para mostrarlos en la posición deseada en la parte frontal:

 <etiqueta> Su nombre (obligatorio)
[texto * su-nombre "ingrese su nombre"] </label> 

<label> Tu número de teléfono
[number phone placeholder "ingrese su número de teléfono"] </label> <label> Su correo electrónico (obligatorio)
[email * your-email "ingrese su correo electrónico"] </label>

<etiqueta> Mayor
[seleccione * especialización en "Ciencias de la computación" "Lingüística" "Agricultura" "Ingeniería" "Comercio electrónico"] </label>
<label> Ubicación para estudiar 
[seleccione * Ubicación para estudiar "Nueva York" "Chicago" "Los Ángeles" "Washington DC" "Houston" "Filadelfia"] </label>

</label> Registrarse en
[casilla de verificación * registrarse label_first "Estudiar" "Hacer un recorrido" "Consultar"] </label>

[enviar enviar"]

Esta vez, su formulario de contacto aún no aparece en el sitio web. Debe realizar algunos pasos más para mostrarlo en la interfaz.

Configuración del formulario de contacto

Configurar correo electrónico

La pestaña Correo le permite personalizar el contenido del correo electrónico que recibirá cuando los usuarios envíen formularios de contacto. Para configurar esta sección, debe insertar etiquetas de correo de los campos en el formulario de contacto que acaba de crear. Aquí hay un ejemplo:

Explicaciones:

• Para : Ingrese el correo electrónico de la persona que se encarga de revisar el formulario de contacto.
• De y Asunto : debe establecer un nombre aquí para determinar quién envía este formulario de contacto.
• Cuerpo del mensaje : agregue etiquetas de correo aquí para asegurarse de que cuando reciba correos electrónicos del formulario de contacto, se muestre toda la información que solicita a los usuarios.

Otros ajustes

Pestaña de mensaje

Ingrese los mensajes que se utilizan en las situaciones como puede ver en la descripción de la pestaña. Por ejemplo, después de que los usuarios envíen el formulario correctamente o no lo envíen, debe agregar un mensaje para informarles sobre esto. O cuando los usuarios olvidan un campo obligatorio, también debe agregar un mensaje para que los usuarios puedan volver a completar ese campo. Aunque estos son pequeños detalles, debes prestar atención para mejorar la experiencia del usuario.

Ficha Configuración adicional

Esta pestaña le ayuda a agregar fragmentos de código para instalar lo siguiente:

• Modo solo para suscriptores
• Modo de demostración
• Omitir correo
• Aceptación como validación
• Configuración de Flamingo
• Suprimir el almacenamiento de mensajes
• Código JavaScript

Hay algunas partes bastante útiles que debería utilizar, como:

• Modo solo para suscriptores : este modo permite que solo los usuarios que hayan iniciado sesión en su sitio web envíen el formulario de contacto. Esto elimina los mensajes de spam y es solo para aquellos que realmente quieren contactarte.
• Aceptación como validación : agregue una función para mostrar notificaciones para la casilla de verificación Aceptación cuando los usuarios no marquen esta casilla, sino que pasen a otro campo. Porque, de forma predeterminada, si los usuarios no marcan la casilla de aceptación, el mensaje de error solo se mostrará después de que envíen el formulario. Esta casilla de verificación de Aceptación se usa a menudo para crear campos como "Estoy de acuerdo con los términos del sitio web", pero en caso de que cree otros tipos de contenido, es posible que deba agregar Aceptación como validación .

Para obtener más información sobre las otras funciones en la pestaña Configuración adicional , puede leer más aquí.

Mostrar el formulario de contacto en el sitio web

El último paso es mostrar el formulario de contacto que acaba de crear en el sitio web.

Aún en la interfaz para crear un nuevo formulario, copie el código corto y péguelo en la página o publicación deseada.

Aquí están mis resultados finales:

Sin embargo, mi formulario de contacto no se ve muy bien, así que necesito darle un poco de estilo.

Si desea cambiar el estilo del formulario de contacto como la plantilla que proporcioné al principio de este artículo, deberá editar el HTML del formulario de la siguiente manera para facilitar el estilo:

 <div class = "form__field form__full-width">
<etiqueta> Su nombre (obligatorio)
[texto * marcador de posición de su nombre "ingrese su nombre"]
</etiqueta>
</div>
<div class = "form__field">
<label> Tu número de teléfono
[marcador de posición de número de teléfono "ingrese su número de teléfono"]
</etiqueta>
</div>
<div class = "form__field">
<label> Su correo electrónico (obligatorio)
[email * your-email placeholder "ingrese su correo electrónico"]
</etiqueta>
</div>
<div class = "form__field">
<etiqueta> Mayor
[seleccione * especialización "Ciencias de la computación" "Lingüística" "Agricultura" "Ingeniería" "Comercio electrónico"]
</etiqueta>
</div>
<div class = "form__field">
<label> Ubicación para estudiar
[seleccione * Ubicación para estudiar "Nueva York" "Chicago" "Los Ángeles" "Washington DC" "Houston" "Filadelfia"]
</etiqueta>
</div>
<div class = "form__field form__full-width">
<etiqueta> Registrarse en
[casilla de verificación * registrarse use_label_element "Estudiar" "Hacer un recorrido" "Consultar"]
</etiqueta>
</div>
<div class = "form__field form__full-width">
[enviar "Enviar"] </div>

Luego vaya al Personalizador de su tema> CSS adicional y pegue el siguiente código:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Finalmente, haga clic en Publicar para guardar.

Ultimas palabras

Cuando utilice el Formulario de contacto 7 por primera vez, es posible que no esté familiarizado con HTML si no es un programador. Sin embargo, después de leer este tutorial, creo que todo se ha vuelto más fácil, ¿verdad?

Si desea intentar crear un formulario de contacto con otras herramientas, espere mi próximo artículo de esta serie. ¿Qué complemento quieres sugerir? ¡Deja un comentario debajo de este artículo!