¿Cómo personalizar un widget de formulario web?

Es posible personalizar a nuestro gusto el widget de formulario que acabamos de crear con el wizard a través del editor avanzado. De este modo podremos añadir o eliminar elementos de nuestro formulario web para conseguir la funcionalidad que deseemos o decorarlo para darle un toque de estilo.

Para ello deberemos iniciar sesión en Codeeta con los credenciales de nuestra cuenta y acceder a la sección de widgets de formulario. Una vez allí, buscaremos el widget que queremos editar y haremos clic en la opción “Configurar”. De este modo se abrirá el editor avanzado de Codeeta:

Configuración de los widgets de formulario
Fíjate que situando el ratón sobre cada elemento de tu widget se te habilitan tres opciones posibles:

Duplicar el elemento: podemos replicar el elemento pulsando el icono verde. El elemento duplicado se sitúa a continuación del original.
Eliminar el elemento: suprimiremos el elemento haciendo clic en el icono rojo. Todos los elementos situados a continuación del elemento eliminado se recolocarán ocupando el sitio liberado.
Desplazar el elemento: sin más que hacer clic y arrastrar un elemento concreto, podremos recolocarlo en nueva posición dentro del widget.

Opciones sobre un elemento del widget: colocar, duplicar o eliminar

Para editar cualquiera de los elementos (nombres o atributos), deberemos hacer clic sobre el elemento en cuestión y configurar su contenido en el cajetín “Contenido” que se abrirá en el lado izquierdo de la pantalla:
Edición de un elemento

Análogamente, puedes editar la apariencia de cada elemento concreto en el cajetín “Estilos” (situado justo encima del cajetín de “Contenidos”). Si prefieres estilizar el widget completo deberás acudir a la pestaña “Widget” y editar ahí las opciones que desees configurar:
Personalización del estilo del widget
Además, puedes añadir nuevos elementos a tu widget sin más que hacer clic en el elemento deseado dentro de la sección “Elementos” (básicos o avanzados).

¿Cómo crear un formulario web?

Crear un formulario web es muy sencillo, sólo tienes que seguir los siguientes pasos:

1. Inicia sesión en Codeeta.

2. Dírigete a la sección de widgets de formulario de tu cuenta

3. Haz clic en el icono de creación de widget de formulario y nómbralo.

Icono de creación de un widget de formulario

Nombramiento y confirmación de la creación del widget

 

4. Añade nuevos elementos a tu widget sin más que hacer clic sobre el elemento deseado en la sección de “Elementos”. Al añadirlos, éstos aparecerán en la parte inferior de tu widget, así que tendrás que arrastrarlos pulsando el botón al área donde desees situarlo (pinchar y arrastrar).

 

Sección de elementos dentro del editor avanzado

Recuerda que una vez creado tu widget de formulario puedes personalizarlo a tu gusto.

¿Cómo importar datos a tus widgets de formulario?

Llegado un determinado momento puedes necesitar importar las entradas procesadas por un widget a otro diferente o agregar algún tipo de información extra a tu formulario web. Para ello puedes utilizar la función de importación que sólo está disponible en los widgets de formulario. ¡Ojo! La importación se realiza mediante CSV, así que prevees que vas a necesitar importar los datos en el futuro asegúrate de realizar la exportación en este formato en el futuro.

Para importar tus datos tienes que seguir los siguientes pasos:

1. Ve a la sección “Actividad” de tu widget:

Acceso a la sección de actividad del widget

2. Pulsa el enlace “Importar” que encontrarás encima de la tabla resumen de entradas.

Situación del enlace
3. Carga el fichero CSV almacenado en tu equipo y pulsar siguiente:

Carga del fichero CSV
4. Establece la relación entre los campos del widget actual (situados en el margen izquierdo) y los campos del fichero que estamos importando (se muestran en el margen derecho, en forma de desplegable). Por defecto el segundo parámetro se deja en blanco.

Correspondencia entre las columnas del widget y las columnas importadas
5. Pulsa el botón “Importar”. Si no se produce ningún error, nuestra información será correctamente agregada a la tabla. Si se produce algún error, sólo hay que seguir las instrucciones que se mostrarán en el widget.

Estructura de un widget de formulario de contacto

Un widget de formulario web de contacto es un widget monopágina, es decir, contiene solamente una vista, aunque si se produce un envío de información puede, al igual que en el resto de widgets de Codeeta, mostrar un mensaje al usuario.

El widget de formulario más completo que podemos realizar mediante wizard tiene la siguiente estructura:

1. Título del widget de formulario.
2. Mapa: localiza geográficamente el emplazamiento de nuestro negocio.
3. Información de contacto presencial: indica dónde podemos encontrar físicamente el negocio. Los datos que aparecen en esta sección son los que se reflejan en el mapa superior.
4. Información de contacto electrónica y telefónica: aquí se indica cuál es la dirección de correo electrónico de contacto o los números de teléfono o fax a los cuales podemos llamar para ser atendidos.
5. Formulario de contacto: recoge los datos personales del usuario que quiere establecer la comunicación, así como el motivo del contacto.
6. Botón “Enviar”: permite mandar el formulario de contacto, lo que provoca que todos los datos recogidos queden grabados en la base de datos que aparece en la sección “Actividad” del widget.

¿Cómo llevar un formulario web a tu página web o Facebook?

La publicación de módulos de formulario es análoga a la del resto de familias de widgets, por lo que tenemos varias opciones a la hora de exportarlos:

Opciones de publicación de tus widgets

Tienes varias posibilidades a la hora de poner tu formulario web en tu site/blog. Las más usadas son las siguientes:

IFrame
Esta es la opción que te recomendamos si tu web está hecha con un gestor de contenidos como WordPress, Joomla, Blogger,etc. En este caso, los pasos a seguir para insertar el widget en tu página son:

1. Copiar el código de iframe que suministra Codeeta:
Ejemplo de código para la publicación en iFrame
2. Pegarlo en la vista HTML del editor de contenido del post o editor de contenido de la página.
3. Guardar las modificaciones de la página.

Debes tener en cuenta que los widgets exportados por iframe son estáticos, lo que significa que tendrás que exportar de nuevo tu widget cada vez que lo modifiques. De no hacerlo, tu widget no mostrará los cambios que hayas aplicado.

Script
Esta opción es la que se usa generalmente por defecto en entornos web y nosotros te la recomendamos si tu web está hecha con HTML tradicional. Este tipo de exportación genera un pequeño código que puedes pegar directamente en la sección de tu web en la que quieres mostrarlo. Los pasos a seguir para insertar el widget en este formato son:

1. Copiar el código de script que suministra Codeeta.
Ejemplo de código para la exportación del widget en script
2. Pegarlo en el HTML de tu página.
3. Guardar el cambio y subir la página modificada a tu servidor FTP.

Esta opción de exportación es dinámica, así que no requiere que vuelvas a exportarlo cada vez que realices algún cambio en él. No obstante, usa JavaScript, que no es siempre soportado por todas las plataformas. Si te ocurre esto, te recomendamos que exportes tu widget como iframe.

Ventana modal
Si quieres que tu widget le aparezca al usuario como ventana modal (es decir, como un popup con el fondo oscurecido) al acceder a tu web, esta es la opción en la que debes exportar tu widget.
Los pasos a seguir en este caso son:
1. Elegir si quieres habilitar la ventana modal siempre que el usuario visite tu web o sólo la primera vez que acceda a ella.
2. Copiar el código de script que suministra Codeeta.
Ejemplo de código para la exportación del widget como ventana modal
3. Pegarlo dentro del HTML de tu página antes de la etiqueta .
4. Guardar el cambio y subir la página modificada a tu servidor FTP.

Botón
Esta opción de exportación te permite configurar un botón, que tras ser pulsado mostrará el widget en una ventana modal.
Los pasos a seguir para añadir el módulo a su página de esta manera son:
1. Configurar el texto que quieres que aparezca en tu botón
2. Copiar los dos trozos de código que te proporciona
Ejemplo de código para la exportación en forma de botón
3. Pegar el código superior (el que tiene como principio ) en la parte del HTML de tu página donde desees mostrar el botón y el segundo código (script) antes de la etiqueta “a href…” del código HTML de tu página.
4. Guardar el cambio y subir la página modificada a tu servidor FTP.

No necesitas copiar el script (el segundo trozo de código que se te genera al seleccionar la opción de exportación como botón) si quieres poner el botón en más de una parte del código HTML, con una sólo sirve.

URL
Esta opción general la URL o dirección web donde se encuentra tu widget. Esta exportación te permite enlazar directamente a tu widget, por lo que puedes usarlo para acceder de forma externa a tu web al widget. Tan sólo tienes que copiarlo y pegarlo en el sitio desde el que quieras llegar a él.

Ejemplo de código para la exportación como URL

¿Cómo poner un formulario web en Facebook?

Para poder publicar tu widget de formulario web en Facebook debes ser administrador de la página en la que quieras publicar tu widget.

Los pasos que debes seguir en este tipo de exportación son:

1. Iniciar sesión en Facebook, en el mismo navegador en el que se haya elegido la opción de publicar en Facebook:

Identificación en Facebook

2. Seleccionar el nombre que queremos que tenga la pestaña en Facebook. Te recomendamos que elijas un nombre significativo y coherente con tu widget deformulario, como “Contacto” o “Encuesta”.

Elección del nombre de la pestaña

3. Elegir la página de Facebook en la que queremos que se publique el widget, de entre las opciones en las que se nos ha detectado como administrador.

Elección de la página de Facebook en la que se publicará el widget

4. Pulsar el botón azul de “Publicar widget” correspondiente a la página donde desea poner el módulo.

5. Conceder a la aplicación Codeeta los permisos necesarios para completar la publicación:

Concesión de permisos IConcesión de permisos II

Tu widget de formulario publicado en Facebook quedaría así:

Ejemplo de widget de formulario publicado en Facebook

¿Cómo publicar más de un formulario web en Facebook?

Si has llegado hasta esta entrada es posible que hayas publicado más de un widget de formulario web en Facebook y no hayas visto a dónde haya ido a parar el segundo. Si a la hora de publicar en Facebook has asignado una etiqueta al widget que ya habías asignado a otro widget previamente, los widgets se publicarán en distintas pestañas dentro de esa categoría.

En el ejemplo que te ponemos a continuación, hemos publicado un segundo widget bajo la etiqueta “Contacto” y por tanto todos los widgets clasificados como tales se muestran en distintas pestañas:

Formularios publicados en Facebook en múltiples pestañas

Notificaciones por email en tus widgets de formularios web

Como en cualquiera de los widgets de Codeeta, puedes habilitar notificaciones tanto para ti como para tu usuario. En el caso de los widgets de formulario web, al no tener embebida la funcionalidad de los pagos, no existen por defecto otras situaciones distintas a la de “Entrada recibida”. Esto podría cambiar con la adición de elementos al formulario, como los temporizadores.

Notificaciones para ti: correo electrónico

Puedes elegir el tipo de texto a redactar y e-mail al que enviarás la notificación en caso de entrada recibida. Si quieres recibir distintos tipos de correo en función del valor de los campos que debe rellenar tu usuario, puedes añadir reglas condicionales (mirar el manual general de widgets para más información).

Notificación para ti por correo electrónico

Notificaciones para tus clientes

Puedes mandar un mensaje a los usuarios que te envían un formulario de dos formas distintas: mediante un correo electrónico (sólo en el caso de que tu formulario tenga un elemento de correo electrónico) o bien mediante un mensaje que se mostrará en el widget tras el envío del formulario. En ambos casos la notificación se emitirá en caso de que se nos remita un formulario (“Entrada recibida”). La notificación mediante email se encuentra por defecto desactivada.
Notificaciones para tu cliente: correo electrónico

Notificaciones para tus clientes: mensaje del widget

¿Dónde se guardan los datos que recibe tu widget de formulario?

La sección de actividad de tu widget de formulario web contiene toda la información enviada en el formulario. Cada envío realizado queda listado en una tabla, situada en la parte inferior de la página, que nos proporciona algunos de los datos más relevantes de la persona que nos ha contactado.

En la parte superior de la pantalla podemos ver un resumen de la actividad procesada por el widget tanto en número de entradas como en evolución con el tiempo.

Actividad en el widget de formulario

Para ver toda la información contenida en el formulario, podemos hacer clic en el enlace “Ver entrada”, situado en el extremo derecho de la tabla. De esta forma nos aparecerá un desglose con todos los datos disponibles:

 Detalle de una entrada recibida en un widget de formulario

Podemos responder directamente a nuestro usuario en la zona de comentarios, habilitando la opción “Enviar por e-mail”. Si la desactivamos, el comentario sólo será visible para el administrador de la cuenta de Codeeta. De este modo, el comentario tendría propósitos de gestión interna.