Formularios

Con los ajustes preestablecidos de formulario, puede agregar un formulario de contacto funcional en segundos. Los elementos adicionales le permiten ajustar los ajustes preestablecidos según las necesidades individuales de sus clientes. Los elementos “Captcha” también forman parte de cada ajuste preestablecido de formulario y garantizan que el formulario sea completado por una persona y no por un ordenador.

De forma predeterminada, las entradas del formulario se envían a la dirección de correo electrónico predeterminada del cliente, definida en los Datos de Contacto del sitio web. Puede especificar la dirección del destinatario en la configuración del formulario, en el campo “Destinatario”. También puede agregar varios destinatarios con este formato: email@abc.com; anothermailaddress@abc.com; thirdone@my-inbox.io;

Consejo: El Portal del Cliente es donde puede organizar toda la información de su cliente, como sus datos de contacto, dirección y correo electrónico de inicio de sesión. Si no ha introducido una dirección de correo electrónico en la configuración del formulario, Sitejet enviará automáticamente las entradas del formulario a la dirección de correo electrónico de inicio de sesión del cliente. Una vez enviado el formulario de contacto, toda la información introducida también se puede consultar como una entrada en el portal del cliente .

Agregar un formulario

Para añadir un formulario a tu sitio web, haz clic en la categoría “Formularios” en la barra lateral izquierda. Se abrirá el panel de contenido, donde se muestran todos los preajustes de formulario (marcados en naranja), que son formularios de contacto completamente funcionales y constan de diferentes elementos. Debajo de los preajustes, puedes ver todos los elementos individuales (en azul). Puedes añadir más elementos a los preajustes para personalizarlos según tus necesidades. 

Una vez que hayas arrastrado el ajuste preestablecido al sitio web, tendrás disponible un formulario de contacto completamente funcional. Como puedes ver en la ruta de navegación, un ajuste preestablecido de formulario consta de tres niveles diferentes:

• El ajuste preestablecido
• El contenedor de formularios
• Y los elementos de forma

Como siempre, puedes utilizar el panel de configuración del lado izquierdo para ajustar el formulario a tus necesidades.

Configuración del formulario

Con la configuración del formulario, define el comportamiento del formulario.

Utilice el campo “Título” para introducir un nombre representativo. La ventaja de esto es que las entradas del formulario en el portal del cliente se ordenan según el nombre del formulario de contacto. De esta forma, usted y su cliente siempre sabrán dónde han ingresado los visitantes del sitio web.

Los campos “Redireccionar” y “Webhook” desempeñan un papel tras enviar un formulario: en el campo “Redireccionar”, se introduce la URL o el slug de la subpágina a la que se redirige a los visitantes del sitio web tras enviar correctamente sus datos. Suelen ser páginas de agradecimiento o similares, que se utilizan mediante píxeles, por ejemplo, para rastrear el comportamiento de los visitantes del sitio web con mayor precisión. Puede obtener más información sobre los píxeles en el artículo sobre la inserción de código HTML, CSS y JavaScript personalizado . Además, la información se puede reenviar a herramientas externas, como sistemas CRM, a través de la URL de un webhook en cuanto un visitante del sitio web envía el formulario. Consulte la sección sobre webhooks para obtener más información. 

En la configuración del formulario, también se definen las direcciones de correo electrónico del destinatario, del remitente y el asunto. Esto puede ser útil, por ejemplo, para que los filtros automáticos de correo electrónico clasifiquen las entradas del formulario en carpetas específicas.

Elementos de formulario

Como se mencionó anteriormente, junto a los ajustes preestablecidos de formulario, también encontrará elementos de formulario en la categoría “Formularios” de la barra lateral izquierda. Analicemos los elementos de formulario y sus funciones con más detalle.

Todos los elementos del formulario se pueden marcar como “Obligatorios”. Si un elemento es “Obligatorio”, se informa al visitante del sitio web que debe completar este campo si sigue vacío al intentar enviar el formulario. Algunos elementos también ofrecen “marcadores de posición”. Estos rellenan el campo de texto con contenido de muestra hasta que se sobrescribe.

1. Campo de entrada de texto

Los elementos de texto son útiles cuando se requiere introducir texto sin formato. Pueden usarse para nombres, cargos, direcciones, etc. Se pueden asignar etiquetas que se muestran encima o junto al campo de entrada. También se pueden usar marcadores de posición.

2. Campo numérico

Un campo numérico es útil cuando se espera que la entrada contenga números, pero no texto. Se pueden especificar valores mínimos y máximos para este campo, lo cual resulta útil para pedidos, por ejemplo.

3. Campo de correo electrónico

Con un campo de correo electrónico, puede asegurarse de que el visitante del sitio web ingrese una dirección de correo electrónico con el formato correcto. El navegador detecta entradas incorrectas (por ejemplo, un formato de correo electrónico no común, falta el símbolo “@”, etc.) y avisa al visitante del sitio web al enviar el correo para que pueda corregir la dirección de correo electrónico.

4. Campo de número de teléfono

Funciona igual que los campos de entrada mencionados anteriormente. Úselo solo para números de teléfono.

5. Campo de entrada múltiple de área de texto

Las áreas de texto ofrecen más espacio para escribir párrafos completos. Esto es ideal para mensajes o descripciones detalladas. El número de líneas es útil para determinar la altura del campo de texto. El visitante del sitio web puede personalizar esta configuración con un navegador moderno.

6. Casillas de verificación

Las casillas de verificación son ideales si desea tener varias opciones dentro del formulario. Agregue más de una si lo desea. Los nombres de las opciones se pueden cambiar en cualquier momento. Para cada opción, se puede especificar que sea “Obligatorio”. Si este campo está habilitado, el sistema comprueba si el visitante del sitio web ha hecho clic en él al enviar el formulario. De no ser así, se le informará al respecto.

7. Botones de opción

Los botones de opción funcionan de forma similar a las casillas de verificación. Sin embargo, solo se puede seleccionar una opción a la vez. Tras seleccionar una opción, solo queda seleccionada una. Se pueden añadir más opciones pulsando la tecla [Intro] o haciendo clic en el icono de la marca de verificación a la derecha.

8. Listas desplegables

Las listas de selección o listas desplegables permiten seleccionar una opción específica de una lista. Si se hace clic en el campo “Múltiple”, se pueden seleccionar varias opciones a la vez, de forma similar a las casillas de verificación. Si no se hace clic en el campo, las listas de selección funcionan como botones de opción: solo se puede seleccionar una opción. También se puede especificar si se requiere una selección. El texto “Por favor, elija” también es personalizable.

Las listas desplegables pueden ayudar a mantener el formulario simple y ordenado si hay muchas opciones.

9. Campos de fecha y hora

Los campos de fecha y hora son útiles para establecer una posible fecha y suelen crearse con Javascript. En Sitejet, basta con añadir este elemento y personalizarlo a su gusto. Sitejet ofrece numerosas opciones de configuración.

En la sección “General”, puede asignar una etiqueta y un texto de marcador de posición como de costumbre y especificar si se requiere una selección de fecha.

En la sección “Fecha y hora” puede especificar si desea seleccionar la fecha, la hora o ambas. Seleccione el formato de fecha y hora deseado y limite la hora del día con los campos de tiempo mínimo y máximo si es necesario. Por ejemplo, puede hacer reservas durante el horario de apertura de un restaurante. También puede ajustar los intervalos de tiempo que el visitante del sitio web puede elegir. Por ejemplo, el valor predeterminado “60 minutos” solo permite seleccionar las 12:00, 13:00, 14:00, etc., mientras que “15 minutos” permite seleccionar las 12:00, 12:15, 12:30, etc. Los números de las semanas se pueden atenuar para mayor claridad. “Incrustar” muestra el calendario completo en lugar de un campo de entrada. Si la vista del calendario no está incrustada, se muestra como una ventana emergente al hacer clic.

Las imágenes muestran la diferencia entre un elemento “no incrustado” (primera imagen) y un elemento “incrustado” (segunda imagen).

En la sección “Días laborables” se especifican los días laborables que se pueden seleccionar.

Si desea especificar la fecha más temprana y más tardía posible, introdúzcala en las secciones “Fecha mínima” y “Fecha máxima”. “Sin” significa que no hay restricción. “Fijo” define un día específico. “Dinámico” le permite establecer una fecha futura basándose en el día actual. Por ejemplo, con la opción predeterminada “5 días a partir de hoy” como fecha mínima, los visitantes del sitio web solo pueden seleccionar fechas que se encuentren al menos 5 días en el futuro. Esto le da a usted o a su cliente tiempo suficiente para responder a una solicitud. Si solo desea planificar un máximo de 2 meses para el futuro, proceda de la siguiente manera:

1. Introduzca el número “2” al lado de “Fecha máxima”
2. Haz clic en “Días a partir de hoy”
3. Seleccione “Meses a partir de hoy”

10. Botón de formulario

Se requiere al menos un botón para que los visitantes del sitio web puedan enviar un formulario. El botón de formulario puede tener tres funciones:

1. Restablecer el formulario y eliminar todos los datos ingresados
2. Enviando el formulario
3. Ninguna acción (adecuado para ejecutar su propio javascript, por ejemplo)

Además, puedes especificar diseños específicos independientemente de otros botones.

11. Elemento de carga de archivos

Utilice este elemento si desea que los visitantes del sitio web puedan subir archivos ellos mismos. En el campo “Formatos de archivo”, introduzca todos los formatos o tipos de archivo que se pueden subir. Por ejemplo, puede introducir “.jpg, .png” para permitir archivos JPG y PNG. También puede especificar “images/*” como tipo de archivo para permitir todos los tipos de imágenes a la vez.

Este campo también se puede marcar como “Obligatorio”.

Al enviar el formulario, este archivo se adjuntará al correo electrónico enviado al destinatario. Sitejet no aloja estos archivos. Por lo tanto, el límite de tamaño de archivo se basa en el tamaño máximo permitido por el proveedor de servicios de correo electrónico.

12. Captcha

Un captcha garantiza que el formulario de contacto no se utilice indebidamente para correos spam. Si desactiva la opción “Enviar correo” en la configuración del formulario, también puede eliminar el campo captcha. En este caso, las entradas del formulario se mostrarán en el portal del cliente. Si mantiene activada la opción “Enviar correo”, el captcha será obligatorio a menos que utilice una de las dos opciones siguientes:

1. Utilice una dirección de correo electrónico administrada por Sitejet y creada con un dominio registrado a través de Sitejet como destinatario de las entradas del formulario
2. Utilice formularios de terceros insertando el código de incrustación de terceros en su proyecto de sitio web, por ejemplo, con un elemento HTML

Sin estas alternativas, no es posible guardar el proyecto sin un elemento captcha.
También se pueden asignar etiquetas o marcadores al captcha. Además, se pueden configurar los colores del texto y del fondo de la imagen del captcha. Un fondo transparente puede ser útil si se utiliza una imagen o una textura de fondo en el contenedor del formulario. Tenga en cuenta que se conserva la legibilidad del captcha.

13. Elementos normales

Dentro del contenedor se pueden usar no solo elementos de formulario, sino también elementos normales. Incluso es posible usar preajustes completos. Por ejemplo, combine columnas, acordeones u otros preajustes con el contenedor para crear cualquier diseño de formulario.

Formularios de prueba

Ya puede probar si el formulario funciona en la vista previa del sitio web. No es necesario publicar el sitio web todavía. Simplemente use el formulario como visitante del sitio web y compruebe si usted o su cliente han recibido la notificación por correo electrónico o si las entradas del formulario aparecen en el portal del cliente si no la ha activado. Normalmente, la notificación debería llegar en un plazo de 5 a 10 minutos.

Webhooks

Un webhook envía información de un sitio web a otro servidor. En Sitejet, se pueden usar webhooks para enviar entradas de formulario a otro servidor. Cada vez que un visitante del sitio web envía el formulario, los datos se envían a la URL que especifique.

¿Para qué se pueden utilizar los webhooks?

De forma predeterminada, cada entrada del formulario se envía a su cliente por correo electrónico y está disponible en el portal del cliente . También es habitual procesar los datos del formulario a través de otros servicios.

Los posibles casos de uso son:

• Crear un cliente potencial en un CRM (por ejemplo, Salesforce, Pipedrive)
• Reservar un espacio en un calendario (por ejemplo, Google Calendar)
• Transferir datos a una plataforma de mensajería instantánea (por ejemplo, Slack)
• Y mucho más

Configurar un webhook

Si aún no lo ha hecho, agregue un formulario al sitio web. Su funcionamiento ya se explicó en la sección “Agregar formulario” . A continuación, acceda a la configuración del formulario haciendo doble clic en “Formulario” en la ruta de navegación.

Alternativamente, puede hacer clic en “Mostrar configuración del formulario” en el elemento de formulario actualmente seleccionado (aquí utilizando el campo de entrada como ejemplo).

En la ventana de configuración, ahora verá el campo “Webhook” en la sección “Mensajes”.

Según el servicio que desee asociar con su formulario, la URL que debe introducirse aquí variará. Puede consultar la URL que debe introducir en la documentación del servicio seleccionado. Una vez introducida la URL, confírmela con la tecla [Intro] y guarde el proyecto.

Solicitud de carga útil

Cada vez que el formulario se rellene con información y se envíe, los siguientes datos se enviarán a la URL que haya introducido.

{
  "Nombre": "John Doe",
  "Teléfono": "+1 2345 67890",
  "Correo electrónico": "john@doe.com",
  "Mensaje": "Hola mundo"
}
		

Usar webhooks con Zapier

Zapier.com ofrece flujos de trabajo para automatizar el intercambio de información entre aplicaciones web. Por ejemplo, las entradas de formulario pueden enviarse a Zapier y procesarse en pasos posteriores. En Zapier.com, estos procesos de automatización se denominan “zaps”. Primero, cree un nuevo Zap y seleccione “Webhooks de Zapier” como activador.

Haga clic en “Ver webhook” para mostrar la URL de su webhook individual.

Copie esta URL en el campo “Webhook”:

Guarde los cambios y realice los siguientes pasos:

1. Mueva el mouse sobre el ícono de vista previa en el lado izquierdo de la navegación superior.
2. Haga clic en “Abrir sitio web de vista previa” en la lista desplegable que se abre.
3. Ahora ingrese algunos valores de prueba en el formulario del sitio web y envíe el formulario.
4. Luego regresa a Zapier.com y haz clic en “Probar este paso”.

Si todo ha sido correcto, los valores de prueba se muestran aquí. A continuación, puede configurar los pasos adicionales para procesar los datos. Dependiendo de la herramienta externa a la que se transmita la información, podrían ser necesarios pasos adicionales dentro de la herramienta y de Zapier.

Este artículo es una traducción del original en inglés titulado “Forms” publicado por Sitejet.