El conector Woocommerce permite crear un formulario de suscripción a newsletters que se integrará en tu sitio web y cuyas respuestas se enviarán automáticamente a tu base de datos Probance.
En este tutorial se explica cómo crear el formulario y cómo integrarlo en las páginas de tu sitio web.
1. Crear el formulario
El contenido y la apariencia del formulario se configuran en el menú Probance > Optin del panel de administración WordPress, en la sección Newsletter.
1.1. Contenido del formulario
Se puede crear el formulario con los siguientes elementos:
- Main Title: título del banner (1 en el ejemplo anterior)
- Subtitle: texto complementario del banner (2 en el ejemplo anterior)
- With First Name & Last Name: marca esta casilla para recuperar el nombre y apellido (3 en el ejemplo anterior) de la persona que rellena el formulario.
- Is required (Name & Last Name): si está marcada, el campo es obligatorio
- Display Names same row: muestra los campos de nombre y apellido en la misma línea
- First Name: denominación del campo en el formulario
- First Name Error Msg: mensaje de error mostrado si el valor indicado no es conforme o si el campo está vacío en el momento de validar el formulario (cuando es obligatorio).
- Last Name: denominación del campo en el formulario
- Last Name Error Msg: mensaje de error mostrado si el valor indicado no es conforme o si el campo está vacío en el momento de validar el formulario (cuando es obligatorio).
- Add birthday field: marca esta casilla para recuperar la fecha de nacimiento (4 en el ejemplo anterior) de la persona que rellena el formulario.
- Is required (Birthday): si está marcada, el campo es obligatorio
- Birthday: denominación del campo en el formulario
- Birthday Error Msg: mensaje de error mostrado si el valor indicado no es correcto o si el campo está vacío en el momento de validar el formulario (cuando es obligatorio).
- Add gender field: marca esta casilla para recuperar el género (5 en el ejemplo anterior) de la persona que rellena el formulario. Este campo se presenta en formato de lista de selección. Haz clic en el botón Options values para indicar las opciones que se propondrán.
- Is required (Gender): si está marcada, el campo es obligatorio
- Gender: denominación del campo en el formulario
- Gender Error Msg: mensaje de error mostrado si el valor indicado no es conforme o si el campo está vacío en el momento de validar el formulario (cuando es obligatorio).
- Add language field: marca esta casilla para recuperar el idioma de preferencia (6 en el ejemplo anterior) de la persona que rellena el formulario.
- Is required (Language): si está marcada, el campo es obligatorio
- Language: denominación del campo en el formulario
- Language Error Msg : mensaje de error mostrado si el valor indicado no es conforme o si el campo está vacío en el momento de validar el formulario (cuando es obligatorio).
- El campo email (7 en el ejemplo anterior) está presente y es obligatorio por defecto en el formulario.
- Email: denominación del campo en el formulario
- Email Error Msg: mensaje de error mostrado si el valor indicado no es conforme.
- Email Empty Msg: mensaje de error mostrado si el campo está vacío en el momento de validar el formulario
Los tres últimos campos permiten definir la denominación del botón de confirmación y los mensajes de confirmación/error de envío del formulario.
- Button: denominación del botón de confirmación (8 en el ejemplo anterior)
- Confirmation Message: Mensaje de confirmación que se mostrará tras la validación del formulario
- Error Message: Mensaje mostrado en caso de error en el momento de validación del formulario
La casilla para marcar Add reCAPTCHA v3 permite incluir una protección anti-spam reCAPTCHA en el formulario. Consulta nuestra guía informativa para más información.
1.2. Modificación de las denominaciones y de los textos
Importante: los campos del formulario básico corresponden a las denominaciones que deben mostrarse en los idiomas para los que no se ha definido ninguna traducción. Si el sitio web está en francés, en español y/o en inglés, es necesario pasar por el módulo Translations para modificar el valor de una denominación o de un mensaje.
Haz clic en el botón Translations a la derecha de un elemento para acceder al módulo.
Existen denominaciones predeterminadas en francés, inglés y español. Estos valores se pueden modificar en las pestañas FR, EN y ES. También se puede añadir un idioma haciendo clic en la pestaña +.
Haz clic en Save para guardar las denominaciones y después en Close para volver al formulario.
1.3. Modificación de la apariencia de los campos
El estilo del sitio web se aplica de forma predeterminada al formulario. No obstante, se puede ajustar la apariencia de cada elemento haciendo clic en el botón Properties correspondiente en la sección Newsletter Form. Este botón abre la ventana de personalización de CSS y de las clases para el elemento en cuestión donde se pueden definir las reglas de estilo que se aplicarán.
Nota: Para esta personalización se necesitan conocimientos de HTML/CSS. Para mantener la armonía entre el banner y el resto del sitio web es aconsejable limitar los cambios de estilo.
Las opciones de personalización dependen del elemento:
- Main title y subtile: propiedades CSS de tipo de letra + tag HTML (h1, h2, h3, etc.)
- Labels: propiedades CSS de tipo de letra
- Input y Button: propiedades CSS de tipo de letra, focus y hover
1.4. Inclusión de la casilla de optin
Para cumplir con la normativa RGPD sobre optin, el formulario de suscripción a la newsletter debe contener una cláusula donde se acepte expresamente recibir comunicaciones de marketing en la dirección de correo electrónico facilitada.
Para activar la casilla de optin en el formulario se debe acceder a la sección Web Elements de la página Probance > Optin, y marcar la opción Display checkbox into «Newsletter» form.
El campo Checkboxes labels permite modificar la denominación de la casilla. Se debe tener en cuenta que este texto es común para todas las casillas de verificación mostradas por nuestro módulo Woocommerce, por lo que el cambio se aplicará a todas las páginas en las que se active la casilla de verificación optin.
La casilla se añadirá al final del formulario: permite a la persona que rellena el formulario confirmar que acepta recibir comunicaciones de marketing.
2. Cómo incluir el formulario en el sitio web
Para integrar el formulario en el sitio web sólo hay que pegar el siguiente shortcode en el lugar en el que debe aparecer: [probance_newsletter]
Este shortcode puede utilizarse varias veces para mostrar el formulario en diferentes lugares del sitio web.
También se pueden añadir parámetros a un shortcode para modificar el contenido y/o la apariencia del formulario correspondiente (los formularios mostrados por otros shortcode no se ven afectados por estos cambios.
2.1. Ocultar campos
Se puede ocultar un campo en el formulario añadiendo el nombre del campo con el argumento «false» en el shortcode.
Por ejemplo, el shortcode [probance_newsletter gender="false" birthday="false"]mostrará un formulario donde los campos Género y Fecha de nacimiento estarán ocultos:
2.2. Modificar el formato
Se pueden añadir reglas de estilo a un shortcode y modificar así la apariencia del formulario.
- El parámetro block_style permite aplicar CSS en todo el banner (Título, subtítulo y formulario)
- El parámetro form_style permite aplicar CSS en el formulario (denominaciones, campos de texto, mensajes de error y botón)
Por ejemplo, el shortcode [probance_newsletter block_style="text-align: center" form_style="padding: 15px; background-color: #3b3b3b; color: #f5f5f5; text-align: left;"] dará:
