Generalidades
Este artículo te guía a través de la creación un formulario de contacto personalizado para permitir a los usuarios suscribirse a tu Lista de anuncios.
Por favor ten en cuenta que si tienes varias listas de correo, debes tener un formulario de suscripción por separado para cada una.
Sección 1 — Agregar los valores de tu lista
Esta primera sección es responsable de enviar información a tu lista. Debes cambiar los valores _MailingListName_ y _DomainName_ correspondientes a los valores específicos de tu lista.
<form method="post" action="https://scripts.dreamhost.com/add_list.cgi"> <input type="hidden" name="list" value="MailingListName"> <input type="hidden" name="domain" value="DomainName">
Debes personalizar el texto MailingListName y DomainName según tus necesidades. Los otros campos pueden permanecer como están, pero estos dos deben actualizarse a los detalles específicos de tu Lista de anuncios. A continuación verás una explicación de estos campos.
Explicación de los parámetros anteriores
| Parámetro | Explicación |
|---|---|
| MailingListName |
Esta es la parte de su lista de correo "Desde el correo" que viene antes del signo @. Entonces, si tu lista es mylist@example.com, esta sería mylist. Por ejemplo: <input type="hidden" name="list" value="mylist"> Ten en cuenta que las personas no podrán enviar correos a listname@example.com a menos que lo configures como una dirección de correo independiente o una respuesta automática en el panel. |
| DomainName |
Este es el nombre de dominio del sitio donde reside este formulario. No es necesario tener este parámetro, pero tenerlo asegurará una compatibilidad total con todos los navegadores. Por ejemplo: <input type="hidden" name="domain" value="example.com"> |
Sección 2 — Campos de correo
Esta sección agrega un campo de entrada para el nombre del usuario y la dirección de correo. El segundo parámetro de correo valida que has ingresado tu correo correctamente.
<!-- Required: -->
<div>
<label for="email">Email:</label>
<input type="text" name="email" placeholder="Enter a valid email" required>
</div>
<!-- Optional: -->
<div>
<label for="confirm-email">Confirm Email:</label>
<input type="text" name="address2" placeholder="Please verify you email" required>
<input type="hidden" name="req_address2" value="1" input name="email" />
</div>
Sección 3 — Botones Submit y Unsubscribe
Correos de confirmación de suscripción:
- Se debe responder para verificar una suscripción.
- Se envían por defecto desde donotreply@dreamhost.com, que no se puede modificar. Solo los anuncios enviados a los suscriptores actuales se enviarán desde la dirección de la lista, no desde el correo de confirmación inicial.
El botón de enviar es obligatorio ya que envía los datos del formulario. También puedes agregar el botón Cancelar suscripción para que sea más fácil para los usuarios eliminarse de tu lista. Deberías cambiar este texto para adaptarlo a tus necesidades.
<div class="button">
<input type="submit" name="submit" value="Join Our Announcement List">
</div>
<!-- Optional Unsubscribe Button -->
<div class="button">
<input type="submit" name="unsub" value="Remove from list">
</div>
Explicación de los parámetros anteriores
| Parámetro | Explicación |
|---|---|
| Join Our Announcement List (Únete a nuestra lista) | Esta etiqueta se puede cambiar a cualquier cosa que no contenga las palabras "remove" (eliminar), "out" (eliminar), "unsub" (cancelar suscripción), "leave" (dejar) o "delete" (eliminar), y actuará como botón de suscripción. Además, si eres un experto en HTML, puedes usar una imagen para el botón de envío. |
| Remove from list (Salir de la lista) | Esta será la etiqueta en su botón "unsubscribe" (darse de baja). No es obligatorio tener este botón, pero es más conveniente si los miembros de tu lista pueden darse de baja en la web, sin tu intervención. El nombre de este botón debe incluir uno de los siguientes: "remove" (eliminar), "out" (eliminar), "unsub" (cancelar suscripción), "leave" (dejar) o "delete" (eliminar). Si no lo haces, actuará como si fuera un botón de suscripción. |
Ejemplo completo de un formulario básico
Este es un ejemplo de código de solo HTML de cómo una ser vería un formulario simple de suscripción.
<html> <body> <form method="post" action="https://scripts.dreamhost.com/add_list.cgi"> <input type="hidden" name="list" value="MailingListName"> <input type="hidden" name="domain" value="DomainName"> <!-- Required: --> <div> <label for="email">Email:</label> <input type="text" name="email" placeholder="Enter a valid email" required> </div> <!-- Optional: --> <div> <label for="confirm-email">Confirm Email:</label> <input type="text" name="address2" placeholder="Please verify you email" required> <input type="hidden" name="req_address2" value="1" input name="email" /> </div> <div class="button"> <input type="submit" name="submit" value="Join Our Announcement List"> </div> <!-- Optional Unsubscribe Button --> <div class="button"> <input type="submit" name="unsub" value="Remove from list"> </div> </form>
<body> <html>
¿Cómo usar las imágenes para mis botones de envío de suscripción y cancelación de suscripción?
Si no deseas usar los botones de envío estándar, sino que prefieres usar tus propias imágenes, puedes hacerlo con este código:
<input type="image" border="0" name="submit" src="subscribe.gif"> <input type="image" border="0" name="unsub" src="unsubscribe.gif">
Código genérico de CSS
Este es un código CSS genérico que puedes usar para diseñar tu formulario. Lo más probable es que necesites más dependiendo de las necesidades de tu sitio:
/* Centers the form on the page */
form {
margin: 0 auto;
width: 400px;
/* Add a border */
border: 1px solid #CCC;
padding: 15px;
border-radius: 15px;
}
/* add space between fields */
form div {
margin-bottom: 15px;
}
/* Space input fields */
label {
display: inline-block;
width: 125px;
text-align: left;
}
Crear URL personalizadas
Hay varias páginas predeterminadas que se muestran según la información que el usuario ingrese en tu formulario. Por ejemplo, así es como se ve la página de confirmación predeterminada:
Puedes cambiar estas URL predeterminadas a una URL personalizada que hayas creado. Para cambiar dónde se redirigen las URL, debes agregar tus URL personalizadas en el panel mientras editas la lista.
Por ejemplo, los siguientes elementos se pueden ajustar desde la página 'Edit' (Editar) de tu lista:
- URL de Suscripción.
- URL para Dar de Baja.
- URL de Ya Suscrito.
- URL de No Suscrito.
- URL de Dirección de Correo inválida.
- URL de Confirmación.
Explicación de los parámetros anteriores
| Parámetro | Explicación |
|---|---|
| _https://UnsubscribedURL_ | La URL de la página que aparece si alguien canceló la suscripción de la lista. Puedes crear tu propia página .html u omitir este campo del formulario HTML. Si se omite, se utilizará el valor en el parámetro Unsubscribe URL (cancelar suscripción de URL) en la página de edición de la Lista de anuncios. |
| _https://AlreadyOnURL_ | La URL de la página que aparece si alguien que ya está en la lista intenta suscribirse. Puedes crear tu propia página .html u omitir este campo del formulario HTML. Si se omite, se utilizará el valor en el parámetro Already Subscribed URL (URL ya suscrito) en la página de edición de la Lista de anuncios. |
| _https://NotOnURL_ | La URL de la página que aparece si no están en la lista y han intentado cancelar la suscripción. Puedes crear tu propia página .html u omitir este parámetro del formulario HTML. Si se omite, se usará el valor en el campo Not Subscribed URL (URL no suscrito) en la página de edición de la Lista de anuncios. |
| _https://InvalidURL_ | La URL de la página que aparecerá si la dirección de correo ingresada no es válida. Puedes crear tu propia página .html u omitir este parámetro. Si se omite, se usará el valor en el campo Invalid Email Address URL (URL de dirección de correo no válido) en la página de edición de la Lista de anuncios. |
| _https://EmailConfirmURL_ | La URL de la página que aparecerá cuando el usuario confirme su aceptación a tu lista haciendo clic en un enlace en un mensaje de correo que se le acaba de enviar. Si personalizas el parámetro URL, probablemente también deberías personalizar este parámetro. Básicamente, necesitas un mensaje que diga algo como "Aún no estás suscrito. ¡Por favor revisa tu correo ahora para ver el último paso para confirmar tu suscripción a nuestra lista!". Puedes crear tu propia página .html con este mensaje u omitir este parámetro. Si se omite, se utilizará el parámetro Confirmation URL (URL de confirmación) en la página de edición de la Lista de anuncios. |
| <input type="hidden" name="emailit" value="1" /> | Si tienes esta entrada oculta en el formulario, recibirás automáticamente un correo predeterminado enviado a _MailingListName_@example.com. Luego, puedes configurarlo como respuesta automática cada vez que alguien se registre en la lista de correo. Además, también recibirás un correo predeterminado enviado a unsubbed-_MailingListName_@example.com cada vez que alguien cancele su suscripción. |
Si utilizas tus propias URL personalizadas, aún puedes acceder a algunas partes de la información presentada en el formulario. El script DreamHost redirige tus URL con las siguientes variables:
- address=usuario@example.com
- name=su+nombre
El siguiente ejemplo lee el nombre y la dirección ingresados en el formulario en una página personalizada de respuesta a la Subscribe URL (URL de suscripción):
<?php $email = $_GET['address']; $name = $_GET['name']; ?> Gracias por suscribirte, <?php echo $name; ?> - te enviaremos nuestro próximo boletín a <?php echo $email; ?>!
En este ejemplo, se supone que estás utilizando un archivo PHP y se requiere el parámetro de formulario de nombre, de lo contrario, necesitaría ser un poco más elegante para mostrar algo más si el parámetro del nombre está en blanco.
Usa un condicional PHP para verificar datos en el campo de nombre:
<?php if ($name!="") echo "$name"; ?> Gracias por suscribirte<?php if ($name!="") echo ", $name"; ?> - te enviaremos nuestro próximo boletín a <?php echo $email; ?>!
De esta manera, el campo de nombre no se imprime si no contiene nada.
Si necesitas suprimir estas variables de consulta (por ejemplo, si estás usando WordPress), puedes hacerlo agregando la variable de consulta nourlvars = 1 al agregar a alguien a la lista.
Una nota para los sitios de WordPress
Si tu sitio usa WordPress, debes enlazar por defecto al permalink "Feo" (del formulario https://example.com/?p=N), incluso si utiliza cualquiera de los enlaces permanentes "Bonitos". Esto se debe a que los scripts de la lista de correo agregan automáticamente parámetros a las URL que no funcionan con enlaces permanentes "bonitos".
Si editas una publicación o una página, puedes encontrar post ID number (el número de ID) de la publicación en la línea URL después de la post= text (publicación = texto). Por ejemplo, puedes ver algo como:
- https://example.com/wp-admin/post.php?post=3141?action="edit", entonces la post ID es 3141.
En este ejemplo, usarías algo como:
- https://example.com/?p=3141
como la URL de la página, incluso si también tiene un enlace permanente "bonito" como:
- https://example.com/mailing_list_unsubscribed
También puedes crear estas páginas fuera de WordPress para evitar los problemas con los permalinks.
