Formulario personalizado para suscribirse o cancelar la suscripción a una Lista de anuncios

Ejemplo de formulario

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 Announcement List (lista de anuncios).

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 electrónico" 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 electrónicos a listname@example.com a menos que lo configures como una dirección de correo electrónico 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 — Parámetros 'name' (nombre) y 'email' (correo electrónico)

Esta sección agrega un campo de entrada para el nombre del usuario y la dirección de correo electrónico. El segundo parámetro de correo electrónico valida que has ingresado tu correo electrónico correctamente.

<!--Visible Fields-->
<div>
    <label for="name">Name:</label>
    <input type="text" name="name">
</div>
<!-- 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 — Parámetros opcionales

Después de agregar parámetros para el nombre y el correo electrónico del usuario, puedes agregar parámetros adicionales para satisfacer las necesidades de tu lista. Los siguientes parámetros son opcionales, pero muestran cómo agregar parámetros adicionales para:

  • street (calle)
  • city (ciudad)
  • state (estado)
  • zip (código postal)
  • country (país)
<div>
    <label for="street">Street:</label>
    <input type="text" name="street" required >
</div>

<div>
    <label for="city">City:</label>
    <input type="text" name="city" required>
</div>

<div>
    <label for="state">State:</label>
    <input type="text" name="state"  required>
</div>

<div>
    <label for="zip">Zipcode:</label>
    <input type="text" name="zip"  required>
</div>

<div>
    <label for="zip">Country:</label>
    <input type="text" name="country" required>
</div>

Sección 4 — Botones 'Submit' (enviar) y 'Unsubscribe' (cancelar suscripción)

Correos electrónicos 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 electrónico 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 su lista pueden darse de baja en la web, sin su 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.

¿Cómo uso 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:

Announcement_List_Success_add.png

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:

  • Unsubscribe URL (URL para Cancelar suscripción)
  • Already Subscribed URL (URL de miembro suscrito)
  • Not Subscribed URL (URL de miembro no suscrito)
  • Invalid Email Address URL (URL de dirección de correo electrónico no válida)
  • Confirmation URL (URL de confirmación)

Explicación de los parámetros anteriores

Parámetro Explicación
_http://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.
_http://AlreadyOnURL_ La URL de la página que aparece si alguien que ya está en la lista intenta suscribirse. Puedes crear su 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.
_http://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.
_http://InvalidURL_ La URL de la página que aparecerá si la dirección de correo electrónico 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 electrónico no válido) en la página de edición de la Lista de anuncios.
_http://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 electrónico que se le acaba de enviar. Si personalizas el parámetro URL, probablemente también debería personalizar este parámetro. Básicamente, necesitas un mensaje que diga algo como "Aún no está suscrito. ¡Por favor revise su correo electrónico ahora para ver el último paso para confirmar su suscripción a nuestra lista!". Puedes crear su 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 electrónico 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 electrónico 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 utilizando 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 "http://ejemplo.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:

  • http://example.com/wp-admin/post.php?post=3141?action="edit", entonces la post ID es "3141".

En este ejemplo, usarías algo como:

  • http://example.com/?p=3141

como la URL de la página, incluso si también tiene un enlace permanente "bonito" como:

  • http://example.com/mailing_list_unsubscribed

También puedes crear estas páginas fuera de WordPress para evitar los problemas con los permalinks.

Ver también

¿Este artículo ha respondido sus preguntas?

Última actualización el PST.

¿Aún no encuentra lo que busca?