Uso de widgets de formulario en Adobe Muse

Abra Adobe Muse. Haga doble clic y abra la página en la vista Diseño, donde desee añadir el formulario de contacto. 

Abra el panel Biblioteca de widgets (Ventana > Biblioteca de widgets). Haga clic en Formularios y, a continuación, seleccione uno de los dos tipos de formularios:

• Contacto (detallado)
• Contacto simple

Arrastre el widget de contacto a la página.

Después de arrastrar un formulario a una página, utilice la herramienta Selección para hacer clic una vez para seleccionar el formulario y, a continuación, colóquelo en la posición deseada.

Puesto que el widget de formularios es adaptable, puede previsualizar y comprobar el comportamiento de dicho widget en diversos tamaños de pantalla. Si desea cambiar la posición del widget o modificar las opciones de fijación y de cambio de tamaño de los campos del formulario de contacto, primero tiene que añadir un punto de rotura en la ubicación deseada. A continuación, haga doble clic y seleccione el campo que desea fijar o cambiar de tamaño. Puede elegir Ninguno o Anchura adaptable como la opción de cambio de tamaño.

Si desea fijar el widget de formularios en una posición determinada en la página, seleccione la opción Fijar de la barra de herramientas en la parte superior.

A la hora de diseñar sitios web adaptables, puede elegir fijar un campo de formulario de contacto específico a una ubicación fija. Para ello, añada un punto de rotura. Cuando se visualice el sitio web en el tamaño de pantalla correspondiente a este punto de rotura, aparecerá el campo del formulario de contacto fijado a la ubicación que especificará en el siguiente paso.

Haga doble clic y seleccione el campo que desee fijar y, a continuación, seleccione la opción de fijación necesaria.

También puede seleccionar la opción de cambio de tamaño necesaria para el widget de formularios y para los campos de formulario individuales. Seleccione el elemento para el que desee establecer las propiedades de cambio de tamaño y, a continuación, seleccione la opción de cambio de tamaño del menú contextual de la parte superior de la página.

Puede seleccionar Ninguno o Anchura adaptable como la opción de cambio de tamaño para los formularios de contacto.

Utilice la herramienta Selección para seleccionar todo el widget de formulario de contacto. Mientras todo el formulario está seleccionado, el indicador de selección en la esquina superior izquierda del panel de control muestra: Formulario: Normal

El vínculo Normal es un menú con cuatro estados posibles, al igual que los botones o elementos de menú:

• Normal
• Envío en curso
• Enviado correctamente
• Error de envío

Si desea ajustar el formulario tal como aparece en diversos estados, puede seleccionar el nombre de estado correspondiente en este menú.

Mientras este estado está seleccionado, puede ajustar el aspecto del mensaje de error. Por ejemplo, podría cambiar el contenido de texto o cambiar el color del texto de error de rojo a azul.

Seleccione el estado Normal nuevamente desde el menú del indicador de selección.

Mientras todo el formulario continúa seleccionado en el estado Normal, haga clic en la flecha azul para acceder al menú Opciones. El conjunto de opciones en el menú Opciones afecta a todo el widget:

De forma predeterminada, el campo Nombre del formulario se rellena con el nombre de la página actual. Puede cambiar el nombre si lo desea.

Si desea que los envíos de formulario se reenvíen a varias direcciones de correo electrónico, puede introducir las direcciones (separadas por punto y coma) en el campo Enviar por correo electrónico a.

El comportamiento de envío del formulario se define mediante la opción seleccionada en el menú Después de enviar. Elija entre las siguientes opciones del menú Opciones:

• Permanecer en página actual (predeterminada)
• Vincular a archivo (cargue un archivo que se vincula después del envío del formulario)

Hay dos tipos de elementos de formulario nuevos que puede añadir:

Campos estándar

La lista de campos estándar incluye:

• Correo electrónico
• Empresa
• Nombre
• Número de teléfono del trabajo
• Número de teléfono móvil
• Dirección del trabajo
• Número de teléfono del domicilio
• Sitio web
• Dirección de domicilio
• Captcha

Para añadir cualquiera de estos campos, seleccione la casilla de verificación de los campos requeridos.

Para añadir campos personalizados a los formularios de contacto, haga clic en el botón + junto al campo personalizado que desee añadir y, a continuación, introduzca la etiqueta en la vista Diseño para describir el nuevo elemento de campo de formulario que va a añadir al formulario.

A continuación se muestran los tipos de campos personalizados que puede añadir a un formulario de contacto:

• Texto en una sola línea: los campos de una sola línea son para texto más corto, como la edad o el código postal del visitante.
• Texto en varias líneas: añada los campos de texto en varias líneas si desea permitir que el visitante escriba más información, por ejemplo, para enviar un comentario o formular una pregunta.
• Casilla de verificación
• Grupo de casillas
• Grupo de botones de opción

Haga clic en el formulario completo una vez para seleccionar el widget de formularios completo. Para seleccionar elementos individuales dentro del widget de formularios, haga doble clic y seleccione el elemento.

Para saber si el widget completo o un elemento individual están seleccionados, vea el indicador de selección. El indicador de selección muestra Formulario si selecciona el widget completo e Introducción de texto si selecciona un campo concreto.

Cuando se selecciona un elemento de formulario Introducción de texto y se hace clic en el botón de flecha azul para acceder al menú Opciones, las opciones que se proporcionan ofrecen valores de configuración relacionados específicamente con ese elemento.

Cuando un elemento Introducción de texto está seleccionado, el menú Opciones permite elegir si el campo es obligatorio. También puede elegir si el campo muestra texto descriptivo para ayudar al visitante a entender qué debe introducir al rellenar un campo.

En la sección Partes, active o desactive las casillas de verificación para mostrar u ocultar la etiqueta y el texto del mensaje del campo.

Mientras un elemento de formulario está seleccionado, el indicador de selección muestra el nombre del elemento además del menú Estados, accesible en el panel de control (si procede). El menú del indicador de selección facilita la selección del estado deseado durante la edición de los elementos de formulario.

Mientras un estado está seleccionado, puede utilizar el panel Relleno o el panel de control para ajustar su aspecto.

Los posibles estados que puede configurar para los campos de formulario son:

• Vacío
• No vacío
• Rollover
• Resaltado
• Error

Los estados de un botón Enviar se muestran cuando el botón Enviar está seleccionado.

Puede configurar los siguientes estados para el botón Enviar:

• Normal
• Rollover
• Ratón pulsado
• Envío en curso

Observe que los estados de todo el formulario se muestran cuando está seleccionado el formulario completo:

• Normal
• Envío en curso
• Enviado correctamente
• Error de envío

Utilice la herramienta Selección para seleccionar todo el formulario o el elemento de formulario que desea actualizar.

Por ejemplo, si desea cambiar el texto que aparece en el botón Enviar, puede hacer doble clic directamente en el botón Enviar del formulario. Puede cambiar el texto del botón Enviar por Texto seleccionando el texto Enviar con la herramienta Texto. Elimine el texto y escriba una palabra nueva. También puede seleccionar diferentes estados del botón Enviar mediante el menú del indicador de selección y cambiar el texto para los distintos estados.

Después de seleccionar el elemento de formulario, puede ajustar la apariencia del elemento.

Por ejemplo, haga doble clic y seleccione el campo Nombre. Para seleccionar la entrada de texto del campo Nombre, puede utilizar las opciones del panel de control o el panel Relleno para establecer el color de fondo del campo de texto.

Mediante las opciones del panel Relleno, puede definir el color de relleno en sólido o degradado. También puede definir una imagen de fondo para el relleno y configurar las opciones Encaje y Posición. Para ajustar la transparencia del relleno, puede modificar el ajuste Opacidad.

Tenga en cuenta que, a menos que desactive la opción Editar conjuntamente (activada de forma predeterminada), se actualizan todos los campos al editar un solo campo. Esta función ayuda a crear un diseño coherente en el formulario y ahorra tiempo. Sin embargo, si prefiere aplicar estilos a los campos de forma individual, siempre puede seleccionar todo el formulario, hacer clic en el botón de flecha azul para abrir el menú Opciones y desactivar Editar conjuntamente.

Haga clic en el botón Publicar y, a continuación, en OK.

Se abre una ventana del navegador para mostrar el sitio publicado.

Visite la página con el formulario de contacto e interactúe con él en el sitio activo. Pruebe lo que ocurre al enviar el formulario sin introducir contenido en los campos obligatorios. Compruebe el aspecto y el funcionamiento del formulario y preste especial atención al modo en que se muestran los mensajes de error.

Una vez que haya determinado que el formulario funciona y se muestra del modo previsto, pruebe a enviar el formulario con algún mensaje ficticio para enviar un mensaje. Compruebe su correo electrónico y asegúrese de que ha recibido el mensaje en su bandeja de entrada.

En la barra lateral izquierda, haga clic en la opción de uso de formularios web en la categoría de informes. El gráfico que aparece muestra la actividad del formulario reciente relacionada con los envíos de formularios.

A través de los informes del panel de instrumentos, puede aprender mucho acerca de los visitantes de su sitio web. Puede realizar un seguimiento de tendencias para ver en qué momento el sitio recibe la mayor cantidad de tráfico y comprobar el rendimiento de los formularios que añada al sitio.

Esta información es útil a la hora de decidir el momento en que conviene añadir promociones o actualizar el contenido del sitio. También ayuda a interactuar con los visitantes, ya que permite que les envíe mensajes y comentarios. Puede establecer un diálogo con los visitantes, en lugar de mostrar simplemente información a través de una comunicación unidireccional desde el sitio.

Para obtener más información sobre la creación de sitios con Muse, visite la página de tutoriales de Adobe Muse. Consulte también la página Site of the Day (Sitio del día) para ver ejemplos de diseños web recientes creados con Muse.

En Adobe Muse, seleccione Ventana > Biblioteca de widgets > Formularios. Arrastre y agregue un formulario de contacto simple o detallado.

En el panel Opciones, en la lista desplegable Captcha, seleccione reCAPTCHA 2.0.

Se recomienda que elija el reCAPTCHA v2, debido a que Google ya no admite la versión 1 de reCAPTCHA.

El campo de reCAPTCHA (verificación de imagen) se ha añadido al formulario.

Configure reCAPTCHA con las siguientes opciones:

• Clave pública: se utiliza en el código JavaScript que se presenta a los usuarios. Para obtener más información sobre cómo generar claves de reCAPTCHA, consulte Generación de claves públicas y privadas.
• Clave privada: se utiliza para comunicarse entre el servidor del sitio web y el servidor de Google. Le recomendamos que almacene la clave privada en un lugar seguro y que no la divulgue. En caso de pérdida, no podrá recuperarla de Google. Para obtener más información sobre cómo generar claves de reCAPTCHA, consulte Generación de claves públicas y privadas.
• Entrada obligatoria: especifique si reCAPTCHA es obligatorio. La opción no es editable y, de forma predeterminada, está seleccionada.
• Tema: especifique si desea elegir el tema claro u oscuro para el cuadro de reCAPTCHA.
• Tipo: especifique si desea activar la verificación de imagen o reproducir un sonido para la verificación del reCAPTCHA. La reproducción del sonido permite a personas ciegas y con problemas de visión navegar por su sitio web con facilidad.
• Tamaño: especifique si desea que el tamaño de reCAPTCHA sea normal o compacto.
  
• Etiqueta: seleccione esta casilla de verificación para que se muestre una etiqueta del campo reCAPTCHA. Puede utilizar este campo para añadir un título a la sección de reCAPTCHA del formulario.
• Texto del mensaje: seleccione esta casilla de verificación para que se muestre un mensaje.

Abra la consola de administración de Google en un navegador. En la consola de administración de Google, haga clic en la opción para registrarse y podrá iniciar sesión con su cuenta de Google o registrar una nueva con la opción correspondiente.

Tras iniciar sesión, se le redirigirá a la página principal de reCAPTCHA de Google.

Haga clic en el botón para obtener un reCAPTCHA, en la parte superior de la página.

Indique el nombre de dominio del sitio web en el campo Dominios. No especifique la URL completa del sitio web, sino únicamente el nombre de dominio. Por ejemplo, ejemplodesitiowebdemuse.com.

Haga clic en el botón de registrar para generar las claves públicas y privadas de su sitio web.

Observe que se ha generado una clave pública (clave del sitio) y una clave privada (clave secreta).

Copie la clave del sitio y la clave secreta en los campos Clave pública y Clave privada de Adobe Muse, respectivamente.

Asegúrese de que copia las claves por completo y de que no le falta ningún carácter.

Una vez obtenga las dos claves para un dominio, estas se compartirán en todos los formularios del sitio Muse. Si se cambia una, cambiarán todas automáticamente, y se programará otra exportación de todas las páginas y de sus scripts .php correspondientes. Si está utilizando una herramienta de terceros para enviar por FTP archivos al servidor, asegúrese de copiar todos los archivos .html y .php (los archivos .php están en la carpeta "scripts/") en el servidor, no solo el que se haya actualizado.

Previsualice la página en el navegador o en Adobe Muse para probar reCAPTCHA.