Genesis Enews Extended para GetResponse

Cómo configurar Genesis Enews Extended para GetResponse

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.

Ver Fuente en Formularios Web GetResponse

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.

HTML del formulario Web en GetResponse

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

genesis-enews-extended-widgetYa 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.

EN ESTE ARTÍCULO:

comparte este artículo

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

no dejes de leer...

4 comentarios en “Cómo configurar Genesis Enews Extended para GetResponse”

  1. Hola Javier.

    Muy buen tutorial. Yo no uso GetResponse, pero el sistema que uso también me requirió buscar los campos necesarios de forma manual, tal y como lo describes aquí.

    Genesis eNews Extended me parece un excelente complemento para los que usamos plantillas Genesis. La única opción que eché de menos en el plugin era la de hacer el campo del nombre requerido. La configuración por defecto del plugin permite el registro usando solo el email, sin necesidad de escribir el nombre. A mi me gusta personalizar los mensajes que envío con el nombre del remitente en el saludo, por lo que requiero en los formularios de inscripción que la persona introduzca su nombre y dirección de email. Que yo tenga conocimiento, el plugin aún no tiene esa opción de requerir el nombre. Supongo que para hacer eso habría que editar el código del plugin. Cosa que nunca hice por falta de tiempo, y decidí cambiar a otra solución.

    A pesar de esa pequeña falta, el plugin está bien hecho. Y es muy práctico para los que usan Genesis, pues el estilo complementa muy bien con los temas de StudioPress.

    Excelente tuturial; bien explicado. Se que a los que usan Genesis y GetResponse les vendrá bien. Gracias Javier.

    1. Muchísimas Gracias Angel. efectivamente a los que no usen GetResponse tambien les servirá, pues al final es buscar en tu código los campos.

      Un abrazo.

  2. Gracias Javier. La verdad es que al usar los formularios de suscripción en la parte superior de mi web y en los post, me ha aumentado los suscriptores.

    Seguir los consejos de lo que mas saben da resultados.

    Un saludo

    Jose Lacoma

Los comentarios están cerrados.

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba