Uso de widgets de formulario de Adobe Muse - Parte 1

Uso de widgets de formulario

Mejora de Adobe Muse CC 2015

Ahora puede añadir botones de opción y grupos de botones de opción para que los visitantes del sitio puedan seleccionar una única respuesta solo en los formularios de contacto. Cuando trabaje con formularios simples o detallados, puede habilitar los grupos de botones de opción en el panel Opciones. Asimismo, puede configurar cada uno de estos grupos al establecer una opción predeterminada.

 

La mayoría de los sitios que visita tienen una página de contacto que permite a los visitantes ponerse en contacto con el propietario del sitio. Los formularios son muy útiles porque se puede recopilar la información de contacto de posibles clientes, al tiempo que se evita el correo no deseado que puede originarse al publicar una dirección de correo electrónico directamente en una página web.


En este artículo aprenderá a añadir formularios de contacto a los sitios Muse. 

 

Adición de un formulario de contacto a una página


Siga estos pasos para añadir un widget de formulario de contacto al diseño del sitio:

Abra una página en la vista Diseño para editarla.

Abra la Biblioteca de widgets. Haga clic en la palabra Formularios para expandir la categoría Formularios y, a continuación, seleccione uno de los dos tipos de formularios:

  • Contacto detallado
  • Contacto simple

Los iconos BC a la derecha de los nombres de widget indican que estos widgets se han creado con la arquitectura de servidor de Business Catalyst.

Arrastre el nombre del widget Contacto simple a la página.

Expanda la sección Formularios y arrastre el formulario Contacto simple a la página.

Puede añadir widgets de formulario de contacto del mismo modo que arrastra y coloca otros widgets en la Biblioteca de widgets.

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 en el diseño de página.

Nota:

si desea que un formulario aparezca en todas las páginas, puede añadir el widget de formulario de contacto a una página maestra. En tal caso, todas las páginas que utilicen la página maestra mostrarán el formulario de contacto.

 

Configuración de todo el formulario de contacto


En esta sección podrá ver una descripción de la configuración del widget de formulario de contacto y aprenderá a configurar las opciones del menú Opciones para controlar el comportamiento del formulario.

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
 
El indicador de selección muestra los estados disponibles para todo el formulario.

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

El formulario tal como aparece en el estado Error de envío.

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 que se muestran en el menú Opciones afectan a todo el widget:

 
El menú Opciones muestra la configuración de todo el formulario de contacto.

De forma predeterminada, el campo Nombre del formulario se rellena con el nombre de la página actual, pero 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 vinculado después de enviar el formulario)
 
Elija el comportamiento del formulario en el menú Después de enviar.

Hay dos tipos de nuevos elementos de formulario que puede añadir: Campos estándar y Campos personalizados.

Campos estándar

La lista de campos estándar incluye:

  • Número de teléfono móvil
  • Número de teléfono del domicilio
  • Dirección de domicilio
  • Sitio web
  • Empresa
  • Número de teléfono del trabajo
  • Dirección del trabajo
  • reCAPTCHA
  • CAPTCHA de BC

Si desea añadir uno de estos campos, simplemente active la casilla de verificación.

Campos personalizados

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

 

Configuración de elementos de formulario individuales


Cuando se selecciona un elemento de formulario, el indicador de selección se actualiza para mostrar el nombre del elemento, como Etiqueta, Introducción de texto o Enviar. El indicador de selección es útil, ya que facilita ver qué elemento anidado del formulario está seleccionado.

Haga clic en todo el formulario una vez para seleccionarlo y, a continuación, haga clic en un campo dos veces más. En primer lugar, el indicador de selección muestra Formulario, luego Campo de formulario y, a continuación, Introducción de texto. Introducción de texto es el nombre del campo real en un formulario.

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.

El menú Opciones muestra un conjunto de opciones contextuales correspondientes al elemento de formulario seleccionado.

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 elemento de formulario está seleccionado, utilice el menú del indicador de selección para seleccionar el estado deseado.

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

Los estados de 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.

Los estados de un botón Enviar son:

  • Normal
  • Rollover
  • Ratón pulsado
  • Envío en curso
Seleccione el botón Enviar para acceder a los estados del botón.

Como se ha visto en la sección anterior, los estados de un formulario completo se muestran cuando todo el formulario está seleccionado:

  • Normal
  • Envío en curso
  • Enviado correctamente
  • Error de envío
Mientras todo el formulario está seleccionado, puede elegir el estado de todo el formulario para influir en el modo en que se mostrará.

 

Aplicación de estilos a formularios para ajustar su aspecto


Puede diseñar el aspecto de los widgets de formulario de contacto y los elementos de formulario del mismo modo en que se actualiza el aspecto de otros widgets en Muse. Siga este flujo de trabajo básico:


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 clic en el botón Enviar del formulario varias veces. Primero debe seleccionar el formulario completo, luego el botón Enviar y, a continuación, debe seleccionar el texto dentro del botón. Con la herramienta Texto, puede seleccionar entonces el texto del botón Enviar, eliminarlo y escribir una palabra nueva que aparezca en el botón. 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.

Una vez que haya seleccionado el elemento de formulario, puede ajustar su aspecto.

Por ejemplo, si hace clic una vez para seleccionar Formulario, vuelve a hacer clic para seleccionar Campo de formulario y, a continuación, hace clic una vez más para seleccionar Introducción de texto para el campo Nombre, podrá usar las opciones del panel de control o el panel Relleno para configurar el color de fondo del campo de texto.

Utilice el panel Relleno para definir el color de relleno de los campos Introducción de texto.

Mediante las opciones del panel Relleno, puede definir el color de relleno en sólido o degradado. O bien, puede definir una imagen de fondo para el relleno y configurar las opciones Encaje y Posición. Como se muestra en la Figura 10, también puede ajustar la transparencia del relleno aplicado si cambia la configuración de Opacidad.

Tenga en cuenta que, a menos que desactive la opción Editar conjuntamente (que está activada de forma predeterminada), todos los campos se actualizan cuando se edita un solo campo. Esta función permite crear un diseño coherente en el formulario y ahorra tiempo pero, 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.

Cuando la opción Editar conjuntamente está desactivada, los cambios realizados en un tipo de elemento de formulario no se aplican automáticamente a otros elementos del mismo tipo.

 

Prueba del formulario y recuperación de mensajes enviados


Cuando termine de configurar y aplicar estilos al formulario, guarde el sitio y publíquelo para poder probar el formulario en un navegador.


Haga clic en el botón Publicar y, a continuación, haga clic en OK (véase la Figura 12).

Figura 12. Publique el sitio con los cambios más recientes.

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 de formularios reciente relacionada con envíos de formularios (véase la Figura 14).

Figura 14. Compruebe el informe de uso de formularios web para saber cuántos visitantes han enviado el formulario.

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.



<a onclick=omegayalfa" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2015-12-19
  • Categorias: Noticias Tutorial Adobe Adobe Muse CC



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!