Añade formularios a tu sitio de Basekit y obtén los datos del formulario en tu email o almacenalos online para descargarlos más tarde.
Arrastra el widget Formulario a la zona de editar
Pulsa en la pestaña widgets (1) y baja hasta llegar la sección Formulario (2). Arrastra el widget formulario (3) a tu página.
Dale a tu formulario un nombre único
Dale a tu formulario un nombre único (1) - Es importante no tener dos formularios con el mismo nombre ya que podría causar problemas con la recopilación de datos.
Los ajustes de email, link interno and externo son opcionales y tu formulario funcionará sin ellos. No necesitas configurar estas opciones ahora, puedes hacerlo más tarde.
Para enlazarlo a una página dentro del mismo sitio, selecciona una página del menú link interno (3). Para enlazarlo a una página de otro sitio introduce la URL completa (incluyendo http//www) en la casilla Link externo (4). Para que los datos del formulario se envíe a tu email rellena la casilla Correo electrónico (2).
Pulsa en el botón CREAR FORMULARIO para continuar.
El widget formulario se verá en la página
Arrastra una de las opciones al widget de formulario
Arrastra un widget desde la pestaña formulario (caja de texto, área de texto, seleccionador de casilla, etc) hasta el interior del widget de formulario
NOTA: No se puede arrastrar un widget formulario en el interior de otro widget formulario,
Pulsa el botón editar para editar el formulario
En el modo editar, pasa el cursor por cualquier campo del formulario para ver sus opciones
Pulsa sobre la etiqueta (1) para cambiar el nombre de la misma.
Pulsa en el botón ajustes (2) para configurar la validación del formulario y otras opciones.
Usa el icono de arrastrar (3) para mover el campo dentro del widget de formulario
Pulsa el icono eliminar (4) para borrar el campo.
(Opcional) Configura la validación del formulario
Pulsa en el botón de configuración del campo (ver paso anterior) y selecciona la pestaña Validación. Elige el tipo de validación y un mensaje de error.
Panel de formularios
1. Dale un título a tu formulario (esto te resultará muy útil si pretendes crear más de un formulario en tu sitio)
2. Escribe una descripción para tu formulario
3. Esta es la etiqueta que aparecerá en el botón de enviar el formulario
4. Si quieres que el Mensaje se muestre después de que el usuario haya enviado el formulario, no deberías modificar la configuración de la Página Interna. Si modificas esto, este mensaje no se mostrará.
5. Esta es la página que el usuario verá como resultado tras pulsar el botón enviar (OPCIONAL)
6. Introduce tu dirección de correo electrónico en la casilla Email a si quieres que los datos se envíen a tu correo.
7. Para descargar los datos del formulario como hoja de cálculo, pulsa en la pestaña DATABASE y luego pulsa en EXPORTAR DATOS. Puedes ver tu base de datos aquí o puedes verla en el modo CONFIGURAR.
Seleccionar caja (Lista de múltiple opciones)
Pulsa en el icono editar (1) y luego doble click en el icono de configuración del campo.
Inroduce un título (1) para el menú y opcionalmente una descripción.
En la columna izquierda (2) introduce los valores que quieres guardados en la base de datos y en la columna derecha (3) introduce los valores que quieres que vea el usuario. Pulsa el botón Añadir nuevo valor a la lista (4) para añadir nuevos valores.
Cuando finalices, pulsa en OK (5)
Editar el estilo de un formulario.
Pulsa en la pestaña STYLES (1) y luego selecciona el elemento del formulario que deseas editar (2).
Cambia el aspecto de del botón Enviar
Si quieres cambiar el aspecto del botón en tu formulario, puedes añadir algún código css.
.widget-formarea .widget-formarea-button
{
font-family: futura, arial;
font-size: 16px;
color: #fff; /* Esto cambia el color de tu texto */
text-transform: uppercase;
height: 36px; /* Esta es la altura de tu boton */
background: url(http://basekit-image.s3.amazonaws.com/live150101_form-btn-bg1.png) no-repeat; /* Puedes usar una URL para mostrar una imagen o un color*/
border: none;
padding: 8px 140px 10px 120px;
border-radius: 0; /* Añade esquinas redondeadas a tu boton */
margin: 0;
margin-top: 0px;
margin-right: -20px;
}
.widget-formarea .widget-formarea-button:hover /* Este es el estado de tu boton al pasar el cursor sobre el */
{
cursor: pointer;
background: url(http://basekit-image.s3.amazonaws.com/live150101_submit-hov1.jpg) no-repeat; /* Puedes modificar el color para que al pasar el raton cambie de color */
}
Si tu ya tienes la imagen de un botón, puedes cargar la imagen a tu editor, copiar la URL para esa imagen y ponerlo en backgroung.
Asegurate que la altura y la imagen del código son las mismas que las de tu imagen.
Cuando uses colores, puedes escribir el nombre del color o usar código hex. Puedes ver los nombres de los colores AQUI.
Comentarios
0 comentarios
El artículo está cerrado para comentarios.