Introducción
Uso de Sitely
Elementos
Cómo
Los formularios son uno de los métodos principales mediante los cuales los visitantes del sitio web pueden ponerse en contacto contigo. Simplifican la vida de tus visitantes y, al mismo tiempo, mantienen tus direcciones de correo alejadas de esos molestos bots recolectores. Crear formularios en Sitely solo implica añadir elementos de formulario a tu página. A continuación, los elementos estándar de formulario disponibles en Sitely.
Entrada de texto
Control deslizante
Archivo adjunto
Botón
Casilla de verificación
Botón de opción (radio)
Selección de opciones
El elemento de formulario más utilizado es la entrada de texto, o campo. Es un cuadro simple que permite a los usuarios introducir información, como nombre, dirección, correo electrónico o número de teléfono, etc. El cuadro puede estilizarse como cualquier otro elemento en Sitely mediante el panel de estilos.
Entrada de texto es donde configuras el contenido inicial que quieres que se muestre en el campo. Normalmente sería un texto predeterminado que se enviará como parte del formulario si los usuarios no lo reemplazan.
Marcador de posición es el contenido que puedes querer mostrar en el campo para indicar qué información se espera. Aunque esta información se muestra, no puede actuar como valor predeterminado y debe ser reemplazada por la entrada del usuario.
Variable del formulario es simplemente un nombre que identifica este campo en particular. Se utiliza cuando se te envían los resultados del formulario. El correo que recibas contendrá todos los nombres de variables del formulario junto con el contenido que el usuario introdujo en esos campos. Por ejemplo, una variable de formulario first_name se usaría normalmente para el campo donde se espera que el usuario introduzca su nombre. Cuando los resultados del formulario lleguen a tu buzón, contendrán una línea como: first_name: Fred. Si no añades una variable del formulario, Sitely asignará una variable genérica por ti.
Una sola línea: Esta casilla obliga a que el texto introducido sea solo de una línea, como una dirección de correo o un número de teléfono. Si desmarcas esta opción, la entrada de texto podrá ser de varias líneas, como en un cuadro de mensaje.
Campo de contraseña: Al activar esta opción, la entrada se ocultará y se reemplazará por una serie de puntos. Aunque el usuario verá puntos en el campo, el contenido real se enviará como parte de los resultados del formulario. Esta opción se usaría normalmente para formularios de inicio de sesión, más que para formularios diseñados para enviar información por correo electrónico.
La accesibilidad del formulario gira en torno a la selección de la etiqueta: ya sea que elijas una caja de texto (por ejemplo, algo que diga “Mensaje:”) o la etiqueta flotante, es lo que utilizan los dispositivos de asistencia para describir el campo de entrada.
Las siguientes opciones del panel de estilos son las habituales de tipografía, tamaño, alineación, etc.
Aspecto te ofrece algunas opciones de estilo adicionales específicas para los campos del formulario. Cuando un usuario selecciona un elemento de formulario, este se convierte en un punto de foco, comúnmente llamado anillo de enfoque o indicador de foco. Esto le indica al usuario que está a punto de introducir información en un campo. Con esta opción, puedes establecer un color de fondo y un color para el marcador de posición del campo para hacerlo más visible. Además, la mayoría de los navegadores resaltarán un campo activo con un borde.
Validación: Aquí puedes forzar que solo se introduzcan determinados tipos de información en el campo. También puedes hacer que el campo sea obligatorio antes de poder enviar el formulario.
Por último, tenemos la sección de formato. Aquí puedes forzar las mayúsculas del contenido del campo, activar la corrección ortográfica o permitir que los navegadores autocompleten contenido desde el equipo del usuario.
Se usa cuando quieres dar a los usuarios un conjunto de opciones que pueden seleccionarse, como ‘Marcar para recibir nuestro boletín’, o ‘Envíame ofertas especiales de vez en cuando’. Puedes añadir tantas casillas como necesites y los usuarios podrán seleccionar todas o algunas de las opciones. Si deseas restringir las elecciones del usuario a una sola opción, utiliza en su lugar el campo Botón de opción.
El campo de casilla de verificación presenta algunas opciones adicionales en el panel de estilos. Puedes elegir un estado predeterminado activado o desactivado, si está habilitado o no, y si es un campo obligatorio, como un acuerdo con los términos y condiciones. El aspecto de la casilla puede personalizarse seleccionando la opción Personalizado, o puede estilizarse automáticamente por el navegador del usuario. Por último, puedes seleccionar el tamaño de la casilla.
Usarías esta opción cuando quieras restringir la elección del usuario a una sola de varias opciones presentadas. Por ejemplo, puedes usar un botón de opción para permitir a los usuarios seleccionar un color o una talla de un producto que se va a pedir. Para ello, añadirías varios botones de opción a tu formulario, uno por cada elección. Luego darías a cada botón un nombre de variable idéntico, como ‘color’. Esto agrupará los botones de opción para que solo se pueda seleccionar una de las opciones. El panel de estilos también te dará la opción de establecer un valor predeterminado que se seleccionará automáticamente si los usuarios no eligen ninguna opción. Aquí tienes un ejemplo de selector de color con verde establecido como predeterminado.
Es otra forma de selector de opción múltiple para los usuarios. En este caso, las opciones se presentan como una lista desplegable de la que los usuarios pueden elegir. Cuando se añade el elemento de selección de opciones a la página, verás opciones adicionales en el panel de estilos. La primera sección te permite crear tu lista de opciones: solo haz clic en el botón Añadir para agregar más opciones. Editas cada etiqueta de opción haciendo clic en su nombre en la lista. Opcionalmente, puedes añadir un valor para cada opción. Este es un valor que se enviará como parte del envío del formulario y es el valor que usa realmente el campo inteligente de calculadora. Si no añades un valor, solo se enviará la etiqueta de la opción como parte del resultado del formulario.
También hay un botón que te permite importar una lista de opciones. Esto se usa normalmente cuando quieres algo como un selector de País como parte del envío de una dirección en un formulario. Evidentemente, con más de 180 países en el mundo, crear la lista desde cero llevaría tiempo. Sin embargo, puedes descargar una lista de países en formato de texto plano desde muchos sitios web. Esas listas pueden importarse directamente en Sitely usando la función Importar, Aquí tienes un ejemplo de un desplegable de países.
Si te gustaría probarlo por ti mismo, aquí tienes un enlace de descarga para un archivo de texto de países.
La opción Al seleccionar es similar a la opción Al hacer clic de los botones y otros enlaces: puedes elegir una acción para ejecutar cuando se seleccione la opción específica, haciendo que el elemento de selección de opciones se comporte como un menú, o mostrando un bloque de maquetación o ventana emergente con campos de formulario adicionales.
Los valores se configuran en el panel de estilos estableciendo el valor mínimo, el valor máximo, el paso y el valor inicial del control deslizante. También damos al deslizador un nombre de variable del formulario; en este ejemplo usamos la variable quantity. Cuando se envíe el formulario, el correo mostrará el nombre de la variable seguido del valor seleccionado por el usuario. Se verá algo como: quantity: 2.
Para mostrar a los usuarios qué cantidad se ha seleccionado, también añadiríamos un cuadro de texto a la derecha del deslizador para mostrar la cantidad elegida. Esto se logra usando un Campo inteligente en el cuadro de texto; verás la opción en el panel de estilos cuando tu cuadro de texto esté seleccionado en el lienzo; se ve así.
Es un deslizador sencillo que permite a los usuarios seleccionar un valor arrastrando un control. Tiene muchos usos, pero, a modo de ejemplo, podemos querer usar el deslizador como forma de pedir una cantidad específica de un producto. En el ejemplo siguiente, el deslizador puede usarse para seleccionar una cantidad entre 1 y 10 con una cantidad predeterminada de 2.
Cuando insertas un campo inteligente, se te mostrará un panel de opciones. En este caso, la opción que queremos es Calculadora. Esto insertará un campo inteligente de calculadora en el cuadro de texto; se ve así.
Haz clic en el campo inteligente de calculadora para establecer su valor. Para ayudarte, Sitely analiza tu página y encuentra todas las variables disponibles que puedes usar en tu campo calculado. En este caso, Sitely encontró nuestra variable quantity vinculada al control deslizante. Este es el valor que necesitamos mostrar junto al deslizador, así que esa es la opción elegida. Ahora, a medida que se mueve el deslizador, el valor correspondiente se muestra al usuario.
Nota: Tenemos toda una sección en la documentación de usuario sobre los campos inteligentes y su uso. Solo hemos desviado el tema aquí para mostrar la relevancia de los elementos inteligentes en el contexto de este elemento de formulario en particular.
El propio elemento es un grupo de dos elementos: el campo de archivo y el botón. Pueden seleccionarse y estilizarse por separado. Cuando el grupo está seleccionado, tienes control total sobre qué pueden subir los usuarios junto con los resultados del formulario. Puedes especificar el tipo de archivos permitidos, así como el límite de tamaño.
Es un elemento sencillo de carga de archivos en el que los usuarios pueden buscar un archivo en su equipo y adjuntarlo al formulario.
Este es el elemento que controla el envío de tu formulario. Aunque tenemos toda una sección en la documentación sobre enlaces y acciones al hacer clic, trataremos rápidamente las opciones disponibles específicamente para enviar los detalles de un formulario.
El método más común para enviar un formulario es la opción Enviar formulario de contacto por correo electrónico. Esta opción recopila todos los datos del formulario de tu página y los envía a tu servidor para su entrega al correo electrónico designado. Toda la acción se controla desde el panel de estilos cuando seleccionas este método de envío.
Lo primero es darle una etiqueta a tu botón. Normalmente será la palabra Enviar, pero puede ser cualquier texto apropiado para tu formulario.
La acción al hacer clic será Enviar formulario de contacto por correo electrónico. El encabezado del correo puede ser cualquier cosa que te ayude a identificar el correo cuando llegue a tu buzón. La dirección de correo del remitente (From) debe ser una dirección de tu servidor. En nuestro ejemplo, es una dirección noreply, pero puede ser una dirección real que uses a diario si lo prefieres. Es bastante importante añadir una dirección de correo específica de tu dominio porque algunos alojamientos web pueden no procesar correo que parezca originarse en otro servidor, como Gmail.
La dirección de correo del destinatario (To) es la dirección en la que quieres recibir tus respuestas. De nuevo, idealmente debería ser una dirección asociada a tu dominio para evitar problemas de entrega causados por filtros de spam o políticas del alojamiento web. El asunto será la información que desees que aparezca en la línea de asunto de las respuestas que recibas.
A continuación, tienes dos opciones. La primera, Correo a través del servidor web; la otra, Usar servidor SMTP personalizado. En la mayoría de los casos, la primera opción funcionará bien. Esto deja que la función sendmail de tu alojamiento procese el correo y te lo reenvíe. Sin embargo, cada vez hay más alojamientos que prefieren que tus formularios se procesen a través de una cuenta de correo correctamente configurada que tú posees y controlas. Esencialmente, es como enviar un correo desde tu cuenta normal. Si tu empresa de alojamiento insiste en que uses esta opción, puedes añadir los datos de acceso de la cuenta de correo en el panel de estilos después de seleccionar la opción SMTP.
Esta sección del panel de estilos enumerará todos los elementos de formulario que Sitely encuentre en tu página y te dará la opción de enviarlos como parte de este botón de envío o, quizá, dejar algunos para que los envíe otro botón. Sea cual sea tu elección, simplemente marca las casillas junto a todos los elementos de formulario que quieras enviar. Esta es una característica muy útil de Sitely, ya que permite gran flexibilidad en cómo construyes páginas para la recopilación de información.
En la mayoría de aplicaciones de desarrollo web, los formularios se construyen como elementos separados que deben contener todos los campos del formulario. Esto da lugar al estilo habitual de la mayoría de formularios web como una caja que contiene campos y un botón de envío. Aunque así es como la mayoría diseña formularios, hay casos de uso en los que puede no ser la solución ideal. Por ejemplo, un docente puede estar configurando exámenes o tareas en línea para estudiantes. En esta situación, el docente puede querer presentar el material del curso de un modo similar al de un cuadernillo impreso. Puede comenzar con una visión general del tema, algunos ejemplos resueltos y, después, unos ejercicios para que el estudiante complete. En este escenario, el estudiante iría recorriendo la página en línea, respondiendo preguntas y completando los ejercicios a medida que avanza. Cuando llegue al final de la página, podrá añadir su nombre y otros datos y enviar su trabajo con un simple botón.
Como Sitely recorre toda la página buscando todos los elementos de formulario que los estudiantes puedan completar en su recorrido, todos pueden reunirse y enviarse como un correo de resultados al docente. Este enfoque familiar del material formativo suele ser difícil de lograr en otros creadores web sin páginas con código específico, pero en Sitely es pan comido.
Cuando el formulario se envía correctamente, normalmente mostrarás un mensaje de agradecimiento. Una opción es dirigir a tus visitantes a una página de agradecimiento independiente; otra es mostrar un mensaje de agradecimiento en una ventana emergente. No solo tranquiliza a los usuarios de que su información se ha enviado, también te brinda la oportunidad de ofrecer información adicional o enlaces relevantes en tu sitio después del envío.
Hay situaciones en las que quizá quieras usar un procesador de formularios de terceros, o un script de formulario personalizado en tu propio servidor. Para estos casos, puedes usar la opción Envío avanzado de formularios. Te permite introducir la URL del servicio o script que procesa el formulario y establecer un método de envío (GET o POST). Estas opciones te las proporcionará el proveedor del servicio o el desarrollador del script. Simplemente introduce la información en esta sección y elige los elementos del formulario que quieres enviar.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
