TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Agregar y personalizar el formulario de contacto en el sitio de Weebly

2

Hay muchas formas sencillas de agregar formularios a su sitio Weebly. Puede utilizar el elemento "Formulario de contacto" predeterminado de Weebly, conectar formularios desde el App Center e insertar códigos de formulario de terceros. Al ser un elemento nativo, el elemento "Formulario de contacto" predeterminado de Weebly es fácil de integrar y administrar los envíos de formularios recibidos fácilmente a través del panel o aplicaciones de iPhone / Android. En este artículo discutiremos las características del elemento predeterminado "Formulario de contacto" y las formas de personalizarlo. Aparte del formulario de contacto, Weebly también ofrece otros dos elementos de formulario: formulario RSVP y elemento de encuesta.

Relacionado: ¿Cómo agregar un formulario de contacto en sitios de WordPress?

"Formulario de contacto" es uno de los elementos de arrastrar y soltar agrupados en el grupo "Básico" en el editor del sitio Weebly. Una vez que agregue el formulario de contacto en el área de contenido y haga clic en él, podrá ver que la columna de elementos en el editor de Weebly cambia automáticamente a campos de formulario. Todos los campos del formulario se clasifican en las siguientes tres categorías:

Campos de formulario:

  • Cuadro de texto corto
  • Cuadro de texto grande
  • Botones de opciones
  • Caja desplegable
  • Casillas de verificación
  • Carga de archivos para usuarios Pro
  • Nombre, correo electrónico, dirección y número de teléfono

Estructura:

  • Divisor y espaciador

Básico:

  • Título, texto, imagen y código para insertar

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Campos de arrastrar y soltar en formato Weebly

Como los elementos normales, puede arrastrar cada campo y agregarlo a su formulario. Al hacer clic en el elemento del formulario, se mostrarán tres opciones: Ver entradas, opciones de formulario y guardar.

Opciones de formulario

Haga clic en el botón de opciones de formulario para ver la ventana emergente de opciones de formulario avanzadas como se muestra en la imagen a continuación.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Opciones de formulario de contacto de Weebly

Las opciones de personalización disponibles son:

  • Nombre del formulario: ingrese el nombre de su formulario. Cuando tiene varios formularios en su sitio, puede usar los nombres de los formularios para ver los envíos basados ​​en el nombre del formulario fácilmente.
  • Envío de correo electrónico a: esta es una identificación de correo electrónico en la que recibirá una alerta instantánea cada vez que se envíe un formulario.
  • Mensaje de confirmación después del envío: la opción de confirmación le permite mostrar una respuesta automática al usuario después de enviar el formulario. Puede configurar un mensaje de texto de confirmación o vincular cualquier página web. El mensaje de texto se mostrará dentro del área del formulario después del envío. Puede conectar cualquier página web externa o su propio sitio o página de tienda en la opción de enlace que se mostrará después del envío.
  • Espaciado: se utiliza para ajustar el espaciado de los márgenes superior e inferior del elemento de formulario.
  • Botón de envío: se utiliza para alinear el botón de envío hacia la izquierda, el centro o la derecha con respecto al ancho del formulario. También puede ingresar cualquier texto libre como "Contacto" en lugar de enviar en el elemento del botón.

Nota: La práctica general es crear una página de agradecimiento en su sitio con la información personalizada que desea mostrar a los usuarios y vincularla al formulario. La página de agradecimiento se mostrará una vez que el usuario envíe el formulario y brindará más oportunidades para que el usuario explore los enlaces en la página de agradecimiento.

Personalización a nivel de campo

Al hacer clic dentro de cualquiera de los campos del formulario, se mostrará un cuadro emergente aplicable para ese campo. Puede cambiar el nombre del campo, hacerlo opcional o obligatorio, agregar instrucciones para completar y ajustar el espaciado del campo dentro del formulario. Hacer un campo obligatorio mostrará una marca de estrella en la parte superior del nombre del campo que indica al usuario que es un campo obligatorio. No completar los campos obligatorios no permitirá que el formulario se envíe y muestre un mensaje “Corrija los campos resaltados" y el campo se resaltará en color rojo.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Instrucción y campo obligatorio

Las instrucciones ayudarán a los usuarios sobre cómo llenar ese campo en particular y el mensaje de ayuda se mostrará cada vez que el archivo esté enfocado.

Algunos de los campos como “Botones de opciones”, “Casillas de verificación” y “Cuadro desplegable” tendrán opciones adicionales como se muestra en la siguiente imagen. Puede ingresar tantas como opciones personalizadas para la selección del usuario o elegirlas de la lista de opciones predefinidas. Las opciones predefinidas tienen una larga lista de opciones como Comparación, Género, Estados de EE. UU., Cuánto tiempo, Con qué frecuencia, Meses del año, Días de la semana, etc.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Uso de botones de opción en el formulario de contacto de Weebly

Opciones de formulario para usuarios profesionales

Los usuarios profesionales tendrán las siguientes funciones de formulario adicionales:

  • Carga de archivos: este es un campo profesional que ayuda al usuario a enviar un formulario con un archivo cargado. Esta será una característica muy útil para que el usuario pueda cargar un documento adicional o una captura de pantalla que a su vez lo ayudará a brindar un mejor soporte. 20 MB es el tamaño máximo de archivo que se puede cargar en un formulario.
  • Agregar formulario en el pie de página: además de agregar un formulario en el área de contenido del sitio, los usuarios Pro también pueden agregar un formulario en el área del pie de página. El formulario de contacto se puede agregar en el pie de página que se mostrará en todas las páginas de un sitio.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Carga de archivos en formato Weebly

Visualización de entradas de formulario

Las entradas del formulario se pueden ver de varias maneras y la respuesta requerida se puede enviar al remitente en consecuencia.

  • Haga clic en el formulario para ver el botón "Ver entradas", al hacer clic en él se abrirá una nueva ventana con todos los envíos de formularios.
  • También recibirá una alerta por correo electrónico cada vez que se envíe un formulario.
  • Vea los envíos de formularios directamente desde el panel de control.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Ver entradas de formulario de contacto en el panel de Weebly

Trucos de personalización para el formulario de contacto de Weebly

Ajustar el tamaño del formulario de contacto

El tamaño del formulario Weebly no se puede ajustar de forma predeterminada. Para cambiar el tamaño, coloque los elementos "Espaciador" al lado del elemento del formulario y ajuste el ancho del formulario.

Reducción de envíos de formularios de spam

Uno de los mayores problemas con el formulario de contacto de Weebly son los envíos de spam: los spammers y los bots enviarán entradas de spam e inundarán su casilla de correo. Dado que Weebly no ofrece CAPTCHA para el formulario de contacto, el manejo de envíos de spam será una tarea molesta para los propietarios del sitio. Hay dos formas de reducir los spam sin modificar el código:

  1. Agregue "Casillas de verificación" en el formulario de contacto y conviértalo en un campo obligatorio. Puede hacer que el "Título del campo" sea "No soy un robot" y agregar un "Elementos de opciones" como "Soy un humano". Esto obligará a los usuarios a marcar la casilla y el formulario no se puede enviar sin marcarlo.
  2. De manera similar, use “Botones de opción” y cambie el “Título del campo” a algo como “Verificación CAPTCHA” o “Verificación humana” y conviértalo en un campo obligatorio. Agregue un elemento de opción única como "Soy un humano, no un robot" o cualquier texto que desee. Ahora el usuario debe usar elegir la opción para enviar el formulario de contacto.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Agregar Captcha manual en el formulario de contacto de Weebly

En ambas opciones anteriores, los bots automáticos no podrán elegir la casilla de verificación o el botón de opción, deteniendo así las entradas de spam.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Evitar envíos de spam en el formulario de contacto de Weebly

Cambio del color de fondo del formulario de contacto de Weebly

Muchos usuarios nos enviaron un correo electrónico pidiendo la forma de cambiar el color de fondo del formulario de contacto de Weebly y aquí se explica cómo hacerlo. Cada formulario de contacto tendrá un #id de formulario después de publicar el sitio. Haga clic derecho en el formulario de contacto en un sitio publicado y haga clic en la opción "Inspeccionar" o "Inspeccionar elemento" y averiguar el número de formulario #id para su formulario de contacto como se muestra en la imagen de abajo. El formulario #id será algo así como “formulario-1234567890123” y será único para cada formulario.

Agregar y personalizar el formulario de contacto en el sitio de Weebly

Encontrar el número de identificación del formulario de contacto en Weebly

Ahora vaya al editor de Weebly y agregue el siguiente código CSS en la sección "Código de encabezado" de la página en la que tiene un formulario de contacto. No olvide reemplazar el formulario #id con su propio #id.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Si tiene más de un formulario, puede personalizarlos con diferentes colores de fondo o agregar todos los #ID de formulario como # ID1, ID2 y tener los mismos estilos para todos los formularios. Si tiene más formularios, agregue el CSS en la sección "Configuración> SEO> Código de encabezado " o en el archivo "main.less".

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More