Editor 6 - Formulario: Crear nuevo formulario

1. Haz clic en la pestaña de WIDGETS
2. Haz clic en FORMULARIO para poder ver tus widgets de formulario
3. Arrastra el Widget formulario a tu página

Cuando crees un formulario nuevo, verás la ventana que se muestra en la imagen.

1. En Título debes de nombrar a este formulario con un nombre único, para que, en caso de que tengas más formularios, puedas diferenciarlos.
2. Puedes añadir una Descripción de tu formulario para que te sea más fácil identificarlo. Esto no se verá en tu página.
3. En este espacio puedes nombrar a tu botón de envío del formulario como lo desees.
4. Si quieres que la información que ha rellenado el usuario te llegue inmediatamente a tu correo, tienes que escribir tu email en la casilla de Email (esto es opcional).

La configuración de la acción de un formulario (Link interno o externo) determina lo que sucede cuando un usuario hace clic en el botón Enviar en tu formulario. Puedes hacer que al pulsar el botón Enviar tuusuario sea llevado a una página de confirmación o a una página agradeciendo haber enviado el formulario. Estas opciones a continuación son opcionales:

5. Link Interno lleva a tus usuarios a una página dentro de tu sitio una vez que hayan hecho clic en el botón Enviar
6. Link Externo lleva a tus usuarios a una página de un sitio web externo cualquiera (tu eliges). Para esto tienes que escribir la URL entera (incluyendo el http://www).

Cuando hagas clic en el botón CREAR FORMULARIO en la ventana anterior, te aparecerá un formulario en tu página como el que ves en esta imagen. Esto es la base dentro de la cual podrás añadir cajas de texto, seleccionadores de casilla, etc.

Puedes arrastrar dentro de tu formulario widgets de:

Caja de texto - Es una caja para introducir textos cortos como un nombre, un apellido o un correo electrónico
Área de texto - Es un espacio más grande para escribir textos largos como comentarios
Seleccionar casilla - Le permite al usuario seleccionar entre distintas opciones
Valoración de estrellas - Le permite a tus usuarios valorar una imagen o un servicio
Selector de fecha - Para elegir una fecha para una cita

NOTA: No puedes arrastrar dentro de un Widget formulario otro Widget formulario.

Para poder editar el texto por defecto de los widgets de formulario, haz clic en el botón de configuración del widget.

Habiendo hecho clic en el botón de configuración del widget de formulario se desplegará el panel inferior de opciones. Solamente puedes editar tu formulario cuando este panel se ha desplegado.

Pasa el cursor sobre la caja de texto para que te aparezcan las opciones de configuración de la caja de texto.

1. Haz clic sobre el texto para modificarlo
2. Haz clic en el botón de configuración para elegir un tipo de validación
3. Haz clic en las flechas para mover la caaj de texto dentro del widget de formulario
4. Haz clic en la cruz para borrar la caja de texto

Haz clic en el icono de configuración del campo de texto (ver imagen anterior) y haz clic en la pestaña Validación. Elige el tipo de validación que desees y escribe un error de mensaje que recibirá el usuario si no rellena los campos correctamente.

Este es el panel inferior de opciones. En él puedes configurar las opciones de tu formulario o cambiar tu configuración hecha en el paso 2 de este tutorial.

Haz clic en el icono de ajustes del formulario (1) y después en el icono de ajustes del selector de casilla (2). A continuación podrás añadir opciones para que tus usuarios puedan elegir entre ellas. Para aprender a configurar el selector de casilla sigue este enlace.

Haz clic en la pestaña superior ESTILOS (1) en el panel de configuración del Widget de formulario. Aquí podrás cambiar el estilo de la tipografía de tu formulario (2).

Para probar tu formulario tendrás que ir al modo de Vista Previa.

Rellena las casillas de tu formulario y haz clic en el botón Enviar.

Para poder ver los formularios respondidos por tus usuarios pulsa en el icono de configuración del formulario

A continuación, pulsa en la pestaña BASE DE DATOS (1) y podrás ver las respuestas que tus usuarios han dado a tu formulario. Si deseas exportar el formulario a tu ordenador haz clic en el botón EXPORTAR DATOS (2).

Si deseas cambiar el estilo de tu botón en un formulario, puedes añadir el siguiente código CSS:

.widget-formarea-button  /*Este trozo de código cambiará la apariencia de tu botón en estado normal*/
{
    background: url("#") crimson no-repeat;   /*Añade el color o imagen que desees para tu botón*/
    border: 0px;
    color: white;   /*Esto cambiará el color del texto que aparece en el botón*/
    padding-bottom: 3px;
    width: 100px;    /*Con esto marcas el ancho que desees para tu botón*/
    height: 25px;    /*Aquí puedes marcar la altura que deseas para tu botón*/
    text-align: center;   /*Alinea el texto que aparece en tu botón al centro*/
    font-size: 12px;  /*Cambia el tamaño de la fuente que aparece en el botón*/
     border-radius: 3px;  /*Si lo deseas puedes darle un efecto redondeado a las esquinas del botón*/
}
.widget-formarea-button:hover  /*Modifica la apariencia de tu botón al pasar el cursor por encima*/
{
    background: url("#") black no-repeat;  /*Cambia el color del botón y deja el resto igual que arriba*/
    border: 0px;
    color: white;
    padding-bottom: 3px;
    width: 100px;
    height: 25px;
    text-align: center;
    font-size: 12px;
  border-radius: 3px;
}

Si en lugar de un color deseas añadir una imagen para tener textura o un diseño mejor, sube la imagen al editor, obtén la URL de la imagen y reemplaza el símbolo # que aparece en el código con esa URL. Asegurate de que el alto y ancho de la imagen coincidan con la altura y anchura que aparecen en tu código. NOTA: La imagen no debe incluir el texto. Es sólo una imagen de fondo para tu botón.

Al usar colores puedes escribir el nombre del color o usar el código hex. Puedes ver los nombres de los colores existentes en ESTE ENLACE