Como ya sabes, finalmente estoy usando GetResponse para mis proyectos web.

Los motivos ya te los contare más extensamente, pues estoy preparando una serie de artículos sobre esta herramienta, y todo lo que he descubierto que me ha hecho decidirme y pagar por ella.

Pero ahora quiero hablarte de otros de mis plugins preferidos, y contarte como usar Genesis Enews Extended para GetResponse.

Ya sabes que Genesis Enews Extended es un plugin que nos permite insertar una caja de suscripción a nuestra lista de correo, y que estéticamente se integra perfecto con nuestros temas Genesis.

¿Se puede usar en otro temas que no sean Genesis? En verdad si, pero pierde esa forma y estilo tan característicos que lo diferencian.

Pero al grano.

Encuentras muchos tutoriales de como configurarlo en Mailchimp, pero nada en español sobre Getresponse, así que aquí estoy yo para despejarte esas dudas.

Paso a paso para configurar Genesis Enews Extended para GetResponse

Configurar Genesis Enews Extended para GetResponse es fácil si sabes exactamente que poner en cada campo. Así que eso es lo que te quiero explicar en esta entrada.

Antes de nada, necesitas tener ya creado un formulario web para la campaña que queramos en tu cuenta de GetResponse. Y dentro de ese formulario web, es necesario que localicemos una serie de lineas de código, desde la fuente en HTML, que será lo que usemos en los campos de Genesis Enews Extended.

Paso #1. Recuperar el código del formulario

Ve a tu cuenta de GetResponse, y haz clic en «Formularios Web», y en la primera opción «Listas de Formularios Web» (Si no lo tienes en español, recuerda que puedes cambiar el idioma en el pie de la página).

Ya deberías de ver los formularios que hayas creado en GetResponse, o si no tienes ninguno, crea el más sencillo que veas.

Elige el formulario que quieras, y haz clic en «Ver Fuente» entre las opciones del lado derecho.

En la siguiente ventana, baja,os hasta ver la caja que contiene el código HTML. Para eso tendrás que hacer clic en la pestaña «Mostrar código HTML», y además, para dejarlo más limpio, haz clic en el botón de abajo «Incluir diseño atractivo al formulario», para desactivar el código CSS y dejarlo en OFF.

Ahora si, selecciona todo el código, y pégalo en un Editor de textos o similar, para que sea más sencillo trabajar con el.

De esta forma será más sencillo localizar la parte de código que nos interesa para rellenar los campos de Enews Extended. Te dejo aqui el mio de ejemplo:

<div id="WFItem9946001" class="wf-formTpl">      <form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html?u=1yFD"      method="post">          <div class="wf-box">              <div id="WFIheader" class="wf-header el" style="height: 75px; display:  block !important;">                  <div class="actTinyMceElBodyContent">                      <p>                          <span style="font-size: 24px !important;">Encabezamiento</span>                      </p>                  </div>                  <em class="clearfix clearer"></em>              </div>              <div id="WFIcenter" class="wf-body">                  <ul class="wf-sortable" id="wf-sort-id">                      <li class="wf-name" rel="undefined" style="display:  block !important;">                          <div class="wf-contbox">                              <div class="wf-labelpos">                                  <label class="wf-label">nombre:</label>                              </div>                              <div class="wf-inputpos">                                  <input class="wf-input" type="text" name="name"></input>                              </div>                              <em class="clearfix clearer"></em>                          </div>                      </li>                      <li class="wf-email" rel="undefined" style="display:  block !important;">                          <div class="wf-contbox">                              <div class="wf-labelpos">                                  <label class="wf-label">Email:</label>                              </div>                              <div class="wf-inputpos">                                  <input class="wf-input wf-req wf-valid__email" type="text" name="email"></input>                              </div>                              <em class="clearfix clearer"></em>                          </div>                      </li>                      <li class="wf-submit" rel="undefined" style="display:  block !important;">                          <div class="wf-contbox">                              <div class="wf-inputpos">                                  <input type="submit" class="wf-button" name="submit" value="Suscribirse"                                  style="display:  inline !important; width: 152px !important;"></input>                              </div>                              <em class="clearfix clearer"></em>                          </div>                      </li>                      <li class="wf-counter" rel="undefined" style="display:  none !important;">                          <div class="wf-contbox">                              <div>                                  <span style="padding: 4px 6px 8px 24px; background: url(https://app.getresponse.com/images/core/webforms/countertemplates.png) 0% 0px no-repeat;"                                  class="wf-counterbox">                                      <span class="wf-counterboxbg" style="padding: 4px 12px 8px 5px; background: url(https://app.getresponse.com/images/core/webforms/countertemplates.png) 100% -36px no-repeat;">                                          <span class="wf-counterbox0" style="padding: 5px 0px;">suscriptor(es):</span>                                          <span style="padding: 5px;" name="https://app.getresponse.com/display_subscribers_count.js?campaign_name=hormigasenlanube&var=0"                                          class="wf-counterbox1 wf-counterq">879</span>                                          <span style="padding: 5px 0px;" class="wf-counterbox2"></span>                                      </span>                                  </span>                              </div>                          </div>                      </li>                      <li class="wf-captcha" rel="undefined" style="display:  none !important;">                          <div class="wf-contbox wf-captcha-1" id="wf-captcha-1" wf-captchaword="Ingrese las palabras de arriba:"                          wf-captchasound="Ingrese los números que oiga:" wf-captchaerror="Incorrecto por favor intente nuevamente"></div>                      </li>                      <li class="wf-privacy" rel="undefined" style="display:  block !important;">                          <div class="wf-contbox">                              <div>                                  <a class="wf-privacy wf-privacyico" href="http://www.getresponse.es/permission-seal?lang=es"                                  target="_blank" style="height: 14px !important; display: inline !important;">Respetamos tu privacidad<em class="clearfix clearer"></em></a>                              </div>                              <em class="clearfix clearer"></em>                          </div>                      </li>                      <li class="wf-poweredby" rel="undefined" style="display:  block !important;">                          <div class="wf-contbox">                              <div>                                  <span class="wf-poweredby wf-poweredbyico">                                      <a class="wf-poweredbylink wf-poweredby" href="http://www.getresponse.es/"                                      style="display:  inline !important; color: inherit !important;" target="_blank">Email Marketing</a>by GetResponse</span>                              </div>                          </div>                      </li>                  </ul>              </div>              <div id="WFIfooter" class="wf-footer el" style="height: 20px; display:  block !important;">                  <div class="actTinyMceElBodyContent"></div>                  <em class="clearfix clearer"></em>              </div>          </div>          <input type="hidden" name="webform_id" value="9946001" />      </form>  </div>  <script type="text/javascript" src="http://app.getresponse.com/view_webform.js?wid=9946001&mg_param1=1&u=1yFD"></script>

Paso #2. Localiza los campos que nos interesan

Ya tienes el código de tu formulario Web, asi que vamos a sacar todos los campos que necesitamos.

Te voy a poner de ejemplo de donde los saco yo, viendo mi código, pero ten en cuenta que el tuyo puede ser diferente si le diste otro diseño.

• Form Action: Yo lo tengo en la linea 2, y en este caso el valor que me interesa es «https://app.getresponse.com/add_contact_webform.html?u=1yFD». Para ayudarte a encontralo, puedes usar la función de buscar de tu editor, y buscar la palabra Action.
• Hidden Fields: Hay un campo oculto, que es necesario usar. Te evita spam, e identifica al formulario. Al igual que antes, busca la palabra hidden, y en mi caso, encuentro en la linea 90 este valor: «<input type=«hidden« name=«webform_id« value=«9946001« />»
• Campo Email: No tienes que buscar nada. Simplemente pon «email»
• Campo Name: Lo mismo, solo hay que poner «name». Aunque si no quieres usar los campos nombre o last name, o usarlos para otros campos personalizados que tengas, solo tienes que buscar en el código en texto input, y coger lo que ponga en la etiqueta name.

Paso #3. Rellena los campos de Genesis Enews Extended

Ya tienes todo lo necesario.

Ve a Apariencia/Widgets. Agrega el widget Genesis Enews Extended donde quieras, y rellena los diferentes campos.

Como ves, ya es simplemente copiar y pegar cada campo, el valor obtenido antes.

En Form Action pon la url de tu formulario.

En Campo de Email, recuerda, solo pon Email.

En Campo de Nombre, puedes poner name, o bien usarlo para otro campo.

En campos escondidos, pones todo el código obtenido antes, todo lo que esta entre los «brackets» <>

Un poco más abajo, podrás configurar los textos, que quieres que aparezca en cada campo, o el botón de enviar.

¡Listo!

Por qué mola usar Genesis Enews Extended

Hoy en día hay plugins muy sencillos de usar como Thrive Leads para crear formularios muy atractivos, pero si usas Genesis Framework como yo, encontrarás muchos tutoriales que te enseñan a insertar el widget de Genesis Enews Extended en distintas partes de la Web.

Y por eso te viene bien saber como conectarlo con tu proveedor de email marketing.

Yo por ejemplo, lo uso en la barra que puedes ver arriba de los mi web, en todos los sitios excepto la home y landing pages. ¿En que lugares de tu Web estas usando este Widget?

Si quieres, déjame en los comentarios, en que lugar crees que sería optimo que aparezca o te gustaría, y cual es tu Child Theme, y veo si te puedo preparar un tutorial para que lo consigas.