Como customizar un formulario de suscripcion Jetpack en WordPress

Como customizar un formulario de suscripcion Jetpack en WordPress

12 Enero, 201415 Comentarios5


Want create site? With Free visual composer you can do it easy.

Hola a tod@s de nuevo, la temática de este artículo vuelve a ser un tutorial de WordPress pero esta vez vamos a explicar como customizar un formulario de suscripción Jetpack Responsive con Bootstrap2.

Jetpack es uno de esos plugins imprescindibles en nuestro WordPress, podéis visitar la página del plugin para obtener más información pulsando aquí. Resumiendo un poco Jetpack es un plugin muy potente que utiliza servicios en la nube conectados a WordPress.com y se compone de múltiples plugins que podemos activar/desactivar de forma independiente.

Después de este breve inciso, lo primero que hay que hacer es descargar el plugin Jetpack, instalarlo y activarlo. Una vez que esté activado editamos el archivosidebar.php de nuestro theme y escribir el siguiente código:

<aside>
<h3 class="widget-title">Suscríbete</h3>
<div class="row-fluid"><?php $status = isset( $_REQUEST['subscribe'] ) ? $_REQUEST['subscribe'] : false; ?> <?php if ( $status == 'invalid_email' ) : ?>
<p class="alert alert-danger span12">Has introducido una dirección de correo inválida, prueba de nuevo!</p>

<div class="span4 padding-8"><a href="htttp://www.muchomasquewebs.com" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/logo-muchomasquewebs.png" alt="Ir a Muchomasquewebs" width="141" height="140" /></a></div>
<div class="newsletter-desc">Si quieres recibir noticias nuestras rellena el formulario con tu dirección de correo y pulsa sobre enviar y recibirás nuestra información más fresca al momento y de manera espaciada.</div>
<form method="POST"><input name="my-form-action" type="hidden" value="subscribe" /> <input class="span8 form-control" name="my-email" type="text" value="" placeholder="Introduce tu email" /> <input class="btn btn-small btn-primary span4" type="submit" value="Enviar" /></form><?php elseif ( $status == 'success' ) : ?>
<p class="alert alert-success span12">Gracias por suscribirte! Por favor comprueba tu bandeja de entrada y sigue las instrucciones para confirmar la suscripción.</p>

<?php else : ?>
<div class="span4 padding-8"><a href="htttp://www.muchomasquewebs.com" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/img/logo-muchomasquewebs.png" alt="Ir a Muchomasquewebs" width="141" height="140" /></a></div>
<div class="newsletter-desc">Si quieres recibir noticias nuestras rellena el formulario con tu dirección de correo y pulsa sobre enviar y recibirás nuestra información más fresca al momento y de manera espaciada.</div>
<form method="POST"><input name="my-form-action" type="hidden" value="subscribe" /> <input class="span8 form-control" name="my-email" type="text" value="" placeholder="Introduce tu email" /> <input class="btn btn-small btn-primary span4" type="submit" value="Enviar" /></form><?php endif; ?></div>
</aside>

Vamos a detallar el código sobre la customización del formulario de suscripción que acabamos de mostrar. Para empezar comprobamos el estado del formulario, de esta forma podemos saber si se ha enviado o no. Una vez que tengamos el estado de la suscripción realizamos las siguiente condiciones:

  • ¿Ha ocurrido un error al enviar el formulario?
  • ¿Se ha enviado correctamente?
  • No se cumple ninguna de las condiciones anteriores.

En caso de que el formulario de suscripción contenga errores mostramos una alerta informando de que ha ocurrido un error y volvemos a incluir el formulario de suscripción para que puedan volver a rellenarlo correctamente.

Si nuestro formulario de contacto se ha enviado correctamente entonces mostramos un mensaje de confirmación y un aviso para que revisen su bandeja de correo y sigan las instrucciones para confirmar la suscripción.

Si por el contrario no se ha realizado ninguna de las acciones anteriores entonces mostramos el formulario para que puedan suscribirse. Dicho formulario lo hemos diseñado para que tenga nuestro logotipo a la izquierda. Le añadimos la clase span4para que tenga un tamaño definido responsivo y así el texto de la derecha pueda estar alineado al logotipo y una vez sobrepase la altura del logotipo aparezca por debajo ocupando todo el ancho de nuestro sidebar. El resto del diseño lo hemos realizado en base a clases de Bootstrap2 pero eso lo podéis adaptar a vuestra web de la manera que más os guste.

Una vez realizadas estas acciones en nuestro frontend de WordPress debemos desarrollar las funciones para gestionar el estado del formulario de suscripción editando el archivo functions.php de nuestro theme de la siguiente forma:

add_action( 'init', 'process_my_subscription_form' );
function process_my_subscription_form() {
	if ( isset( $_POST['my-form-action'] ) &amp;&amp; $_POST['my-form-action'] == 'subscribe' ) {
        $email = $_POST['my-email'];
        $subscribe = Jetpack_Subscriptions::subscribe( $email, 0, false );
		// comprobamos el estado de la suscripción
		if ( is_wp_error( $subscribe ) ) {
			$error = $subscribe-&gt;get_error_code();
		} else {
			$error = false;
			foreach ( $subscribe as $response ) {
				if ( is_wp_error( $response ) ) {
					$error = $response-&gt;get_error_code();
					break;
				}
			}
		}
		if ( $error ) {
			switch( $error ) {
				case 'invalid_email':
					$redirect = add_query_arg( 'subscribe', 'invalid_email' );
					break;
				case 'active': case 'pending':
					$redirect = add_query_arg( 'subscribe', 'already' );
					break;
				default:
					$redirect = add_query_arg( 'subscribe', 'error' );
					break;
			}
		} else {
			$redirect = add_query_arg( 'subscribe', 'success' );
		}
		wp_safe_redirect( $redirect );
    }
}

De esta manera podemos decir que hemos customizado nuestro formulario de suscripción en WordPress con Jetpack,  como veis es bastante sencillo de implementar y os puede servir de base para customizar dicho fomulario con la ayuda de Jetpack.

¿No sois capaces de hacer esto por vosotr@s mismos? Entrad en nuestro servicio de mantenimiento de paginas web en http://www.muchomasquewebs.com/servicios/mantenimiento-web. Si tenéis alguna duda, comentario o queréis añadir alguna información podéis enviarnos vuestros comentarios o contactar con nosotros vía formulario de contacto.

Soy diseñador/programador desde hace 9 años y un apasionado de las nuevas tecnologías, el deporte y las videoconsolas.

No soy PRO de nada ya que me gusta tanto el mundo Apple como el Android aunque me considero un fan de Google.

Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com

Customizar un formulario de suscripción Jetpack enWordpress
Customizar un formulario de suscripción Jetpack enWordpress
Si utilizas el mega plugin Jetpack para WordPress y te interesan las suscripciones a tu web aprenderás a customizar este formulario con el estilo de tu web.
Did you find apk for android? You can find new Free Android Games and apps.




15 comentarios

  • will777| Responder

    I’ve been looking for this answer for literally six hours today. How to redirect to a success page when someone subscribes to my blog by using the Jetpack subscribe widget. Unfortunately, mi espanol es como un nino de cuatro anos, jajaja 😎 If you are a little better at English, would it be possible for you to explain how to redirect to a success page when subscribing with the Jetpack subscription widget. Muchas gracias. will@bigmediahouse.com

    • Muchomasquewebs| Responder

      Hi Will:

      We will solve your problem as soon as possible.

      Thanks for your comment.
      Regards.

      • will777| Responder

        Thank you very much. I did find out in the php file for Jetpack Subscriptions that when you do have success, there is a line that says to check for an email, and it is styled with a div class “success”, though I cannot find that class in any of the css or php files within the plugin… So there is a redirect, but it’s to the same page with a new line that is barely noticeable. Unsure how to redirect to a different page.
        Thank you again for any help, it is much appreciated.

        • Muchomasquewebs| Responder

          Hi:

          Try this:

          } else {
          $redirect = add_query_arg( ‘subscribe’, ‘success’ );
          wp_safe_redirect( $success_page_url );
          }

          We are waiting your response.
          Thanks for visit the blog.

          Cheers

          • will777|

            Awesome! Thank you very much. The only thing I changed on your code was to add quotes around “$http://celestinegardens.com/subscription-success/” and it worked great! I really appreciate your help on this. I will add your company to my rolodex for php work next time I or one of my clients need to hire for a larger project. Muchas Gracias hermanos 😎

          • Muchomasquewebs|

            We are happy for your success, if you have more troubles or need any tutorial you can request it.

            Thanks for your comments!
            Cheers!

  • steven77dev| Responder

    Saludos, muy bueno el tutorial, me funciona. Mi problema radica en que cuando escribo el correo y se envía me sale el error 500, pero si llega al correo. No sé a qué se deberá y espero puedas ayudarme. Esta es la página que estoy trabajando: http://klandestina.net/
    Saludos

    • steven77dev| Responder

      Esto es lo que tengo

      add_action( ‘init’, ‘process_my_subscription_form’ );
      function process_my_subscription_form() {
      if ( isset( $_POST[‘my-form-action’] ) && $_POST[‘my-form-action’] == ‘subscribe’ ) {
      $email = $_POST[‘my-email’];
      $subscribe = Jetpack_Subscriptions::subscribe( $email, 0, false );
      // comprobamos el estado de la suscripción
      if ( is_wp_error( $subscribe ) ) {
      $error = $subscribe->get_error_code();
      } else {
      $error = false;
      foreach ( $subscribe as $response ) {
      if ( is_wp_error( $response ) ) {
      $error = $response->get_error_code();
      break;
      }
      }
      }
      if ( $error ) {
      switch( $error ) {
      case ‘invalid_email’:
      $redirect = add_query_arg( ‘subscribe’, ‘invalid_email’ );
      break;
      case ‘active’: case ‘pending’:
      $redirect = add_query_arg( ‘subscribe’, ‘already’ );
      break;
      default:
      $redirect = add_query_arg( ‘subscribe’, ‘error’ );
      break;
      }
      } else {
      $redirect = add_query_arg( ‘subscribe’, ‘success’ );
      // wp_safe_redirect( “http://www.klandestina.net” );
      }
      wp_safe_redirect( $redirect );
      }
      }

      Y este es el sidebar.php

      Suscríbete a Klandestina

      $status = isset( $_REQUEST[‘subscribe’] ) ? $_REQUEST[‘subscribe’] : false;
      if ( $status == ‘invalid_email’ ) :
      Has introducido una dirección de correo inválida, prueba de nuevo!

      Si deseas que llegue todos las noticias a tu correo electrónico sólo escribelo y lo recibirás diaremente.

      elseif ( $status == ‘success’ ) :
      Gracias por suscribirte! Por favor comprueba tu bandeja de entrada y sigue las instrucciones para confirmar la suscripción.
      else :

      Si deseas que llegue todos las noticias a tu correo electrónico sólo escribelo y lo recibirás diaremente.

      endif;

      • Muchomasquewebs| Responder

        Hola:

        Dame un poco de tiempo y te lo miro. Muchas gracias por tu visita y comentarios!

        • steven77dev| Responder

          Sí, por favor. El código está bueno, pero necesito solucionar ese problema. Espero su ayuda. Saludos.

          • Muchomasquewebs|

            En la última parte donde la redirección prueba esto:

            if ( $error ) {

            switch( $error ) {

            case ‘invalid_email’:

            $redirect = add_query_arg( ‘subscribe’, ‘invalid_email’ );

            break;

            case ‘active’: case ‘pending’:

            $redirect = add_query_arg( ‘subscribe’, ‘already’ );

            break;

            default:

            $redirect = add_query_arg( ‘subscribe’, ‘error’ );

            break;

            }

            wp_safe_redirect( $redirect );

            } else {

            header( ‘Location: http://www.klandestina.net?subscribe=success‘ ) ;

            exit;

            }

            De hecho he probado a hacerlo en mi local y me redirige a tu web y en tu sidebar me muestra que me he suscrito satisfactoriamente. Prueba y me dices! Espero serte de ayuda. Saludos!

          • Muchomasquewebs|

            Donde pone ?sub… debería poner subscribe=success

          • steven77dev|

            ¡Excelente!
            Me ha funcionado, muchas gracias, y estaré más atento a lo que publican. Saludos.

  • Erick Calvo| Responder

    MUY BUENO EL TUTORIAL

Soy diseñador/programador desde hace 9 años y un apasionado de las nuevas tecnologías, el deporte y las videoconsolas. No soy PRO de nada ya que me gusta tanto el mundo Apple como el Android aunque me considero un fan de Google. Si queréis contactar conmigo directamente podéis hacerlo a jose.revenga@muchomasquewebs.com