personalizar un formulario mailchimp
5051
single,single-post,postid-5051,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-title-hidden,paspartu_enabled,paspartu_on_top_fixed,side_menu_slide_from_right,qode-child-theme-ver-1.0.0,qode-theme-ver-8.0,wpb-js-composer js-comp-ver-4.3.4,vc_responsive
personalizar un formulario mailchimp

25 mar CCS SUPER ÚTIL: Personalizar un formulario de Mailchimp

personalizar un formulario mailchimp

Ayer os enseñé el nuevo WordPress ProPhoto que he terminado estos días, la web/blog de Helen Medal, h2nutricoach.
Si os fijáis al pie de la pagina, lleva un formulario para newsletter personalizado. Es un tipo de pie muy atractivo, es llamativo, pero no está en un sitio que moleste.

Esta vez vamos a personalizar un formulario Mailchimp.

El código que he utilizado (en este caso de Mailchimp), es el mismo para un formulario normal que para este. Si os fijáis en esa web hay tres formularios diferentes, en la home bajo la cabecera, en el pie, y en el blog.

El código es siempre el mismo, lo que varían son los estilos que le doy de cada vez.

Paso a paso para crear un footer especial

Primera cosa que quiero decirte: el mecanismo es el mismo si usas Mailchimp Aweber, Madmimi o cual sea la paltaforma que utilices. Pero cada una utiliza nombres diferentes. (Lee antes de intentar entender esto).

Vamos con el de Mailchimp.

Entra a tu cuenta y haz click en tu lista de direcciones, verás en el menú Signup forms. Aquí hay dos secciones que nos interesan: General forms (que es donde decides qué campos va a llevar tu formulario) y Embedded forms, donde se genera el código que buscamos.
Primero elige los campos en General forms.
A continuación, en Embedded forms puedes elegir qué tipo de formulario quieres. Elige Naked: no necesitamos que traiga ningún estilo.

Ahora verás esta pantalla:

personalizar un formulario mailchimp

Copiemos el código. Como ves está desastradillo. Pero así es como lo queremos

personalizar un formulario mailchimp

Dónde colocar el código html

Vamos a ponerlo en el pie (footer):

  • Si estás en Blogger, en Diseño, pon un gadget de texto o html y colócalo en la parte que representa el pie del blog. Pégalo allí.
  • Si estás en WordpPress reza para que tu plantilla tenga una zona de widgets para el footer. Si estás en Prophoto, lo tienes. Pon un widget de texto y pégalo allí.
  •  

    ¿Qué es todo ese código html?

    Para hacer lo que vamos a hacer, y sobre todo, para poder hacer variaciones personales, tienes que entender qué demonios hay dentro del código.

    Antes de que salgas corriendo a la nevera, espera. De verdad, no se trata de entender código, si no de saber 3 detalles.
    Venga, sin miedo.

    personalizar un formulario mailchimp

    Las tres cosas que necesitas saber son…

  • 1. Que el html es como una construcción. Son piezas. Piezas que contienen piezas. Este html tiene un bloque de código que representa todo el formulario.
    Otro que representa el titular.
    Otro, el campo del nombre.
    El campo del mail
    Y el botón.

    Solo eso.

  • 2. Los textos se pueden sustituir. Puedes cambiar la frase titular, el nombre de los campos y lo que pone en el botón si escribes sobre ese código y quitas lo que hay.
  • 3. El nombre de cada pieza. Vamos a poner el formulario bonito, para eso tenemos que poder decir que cada pieza sea con un color X y una tipografia X. Tienes que distinguir en medio del código el nombre del titular, el del botón, el del mail y el de nombre. Y asi poderle dar mensajes como este:

    “Que el titular lleve la tipografia Open sans, el tamaño 20px y el color el #123456″

  • El gráfico anterior relaciona el formulario feíto con el código.
    En la siguente imagen verás exactamente como hay que llamar a cada parte.
     

    personalizar un formulario mailchimp

    Poniendo la imagen del fondo

    Ahora un detalle especial: en este caso voy poner una imagen de fondo al formulario. Forma también parte de los estilos. ¿Cómo la ponemos dentro?
    El primer paso es subir la imagen a tu blog.

  • Si es Blogger súbela a un post vacío. Luego mira el editor de texto en la pestaña de html y verás la dirección en html. Cópiala.
  • Si estás en WordPress, ve a Medios, sube la la imagen. A continuación le das a editar y copias la dirección (es la URL).
  • Pégala en algún sitio donde puedas copiarla de nuevo. Como dicen en las recetas, reserva.

    personalizar un formulario mailchimp

    Te he explicado todo esto porque si comprendes qué sucede podrás adaptarlo a tu caso.
    Este es el CSS de el formulario que hice para Helen.

    ¿Dónde colocar el CSS?

  • En Blogger pega el CSS en Plantilla > Personalizar > Avanzado > Añadir CSS
  • Si estás en Prophoto WordPress, ve a Advanced >Custom Code. Si es otra plantilla WordPress busca el editor de CSS
  • Ten en cuenta que las medidas, los colores y los espacios son los que se refieren a este caso, pero por supuesto pon lo que necesites.
    Y allá voy:

    #mc_embed_signup h2 {
      color: #D33254;
        font-size: 16px !important;
        padding-top: 221px !important;
        text-align: right;
       float: left;
        height: 410px;
        margin-bottom: -46px !important;
        width: 1100px;
    }

    #mc_embed_signup #mce-EMAIL {
        float: left;
        margin-left: 199px;
    }

    #mc_embed_signup #mce-EMAIL,
    #mc_embed_signup #mce-FNAME {
        background-color: #D1FFC1 !important;
        border: medium none !important;
        color: #429676;
        font-family: Open Sans,sans-serif !important;
        font-size: 20px !important;
        font-weight: normal !important;
        margin-right: 40px;
        padding: 10px;
    }

    #mc_embed_signup .indicates-required {
        display: none;
    }

    #mc_embed_signup #mc-embedded-subscribe.button {
    background-color: #FF6484;
    border: medium none !important;
    color: #FFFFFF !important;
    font-family: Open Sans,sans-serif !important;
    font-size: 20px !important;
    padding: 10px;
    }

    #mc_embed_signup {
    background-image: url(“URL de la imagen“);
    background-repeat: no-repeat;
    height: xxxxpx (alto de la imagen)
    width: xxxxpx (ancho de la imagen)
    }

     

    Atrévete a hacer pruebas con este código y ve cambiando los parámetros que ves (color, número de pixels), después guarda y refresca tu página para ver qué sucede. No te lo creerás pero así empecé yo.

    En mis tres cursos hay una parte de CSS básica que te pondrá sobre la pista de este arte-ciencia. Yo me empeño con ello porque no se puede personalizar nuestras webs y blogs sin saber nada. Tienes info de ellos aquí:

  • Cultiva la imagen de tu blog
  • Diseña en Blogger
  • Diseña en Prophoto (WordPress)
  • Te propongo poner un footer en tu blog como ejercicio, a ver qué sucede. Si aun no te queda como te gusta siempre puedes borrarlo.
    ¡Cuéntame qué tal te resulta!

    ¡Y si te interesa comparte!

    48 Comments
    • Elisa
      Posted at 20:31h, 25 marzo Responder

      Que pasada de tutorial!! Súper clarito y bien explicado :)
      A ver si me pongo con la tarea
      Gracias

      • meisi
        Posted at 21:28h, 25 marzo Responder

        Qué bien Elisa, a veces no estoy muy segura que se entienda hasta que me lo dice alguien :)

    • neus
      Posted at 07:29h, 27 marzo Responder

      El tutorial es genial y el resultado super chulo, yo no se que hago mal pero lo he intentado 6 veces y no me ha salido, volveré a repasarlo cuando esté más despejada.
      Gracias

      • meisi
        Posted at 07:56h, 27 marzo Responder

        Hola Rosa, me explicas un poco más qué es exactamente lo que no te sale?

    • neus
      Posted at 23:07h, 27 marzo Responder

      Hola Elena! Pues cuando copio la plantilla en el CSS y guardo, después al refrescar no me sale la fotografía de fondo y el texto del formulario está fuera de sitio.

      • meisi
        Posted at 23:45h, 27 marzo Responder

        Neus, no olvides adaptar el tamaño de tu imagen y poner sus pixels en donde lo dejé en rojo.
        Y además como os comento, todas las medidas que yo pongo son para este ejemplo , has de ir cambiandolas para adaptarlas. Si?

    • neus
      Posted at 23:53h, 27 marzo Responder

      Sí hice varias pruebas con esto cambiando los tamaños, volveré a probar a ver como sale que creo que había un problema con la url de la foto :). Gracias!!

    • Ainhoa
      Posted at 19:31h, 28 marzo Responder

      Hola Meisi: El tutorial me ha parecido sencillo y super claro pero me pasa lo mimso que a Neus, No me coge la foto de fondo y los campos del formulario salen descuadrados. Si quito el CSS entonces se ve que que los datos de mailchimp si los entiende, pero pegando el css aunque coge los colores del boton no coge la imagen de fondo. Ni grande ni pequeña.
      Tengo una duda, en la linea:
      background-image: url(‘URL de la imagen’);
      ¿Como quedaría con la url? asi?
      background-image: http://www.xxx.xxx/;
      No se si el error está en esta linea, pero de tdoas formas los campos no quedan alineados.
      Seguire probando, llevo picada con este tutorial desde que lo lei el otro día, pero no habia tenido tiempo de jugar con él.
      Un saludo.

      • meisi
        Posted at 19:40h, 28 marzo Responder

        Ainhoa, el css es superpuñetero, con una coma que no esté en su sitio parece que haya una catástrofe.
        la linea de background-image es siempre así:
        background-image: url(‘http:….’);
        pero no olvides poner tambien width y hight!
        como tu me dices seguro que no puede funcionar. Son protocolos fijos.
        Este ejemplo necesita muuucho ajuste, y efectivamente hay que jugar bastante.
        Pásame tu web con la imagen puesta que no sale y te la miro, ok?

    • Ainhoa
      Posted at 19:46h, 28 marzo Responder

      Gracias Meisi, por contestar tan rápido. Acabo de apagar el ordenador y ahora no puedo volver a probar. Pero creo que el error está en esa línea, así que cuando tenga un rato volveré a intentarlo y te comento.
      Un saludo.

    • Ainhoa
      Posted at 13:50h, 29 marzo Responder

      Hola he vuelto a probar y el resultado es el mismo. Lo tengo puesto como pie de pagina en doygestion.com. No he configurado los colores pero si hay una foto de fondo que no aparece. height: ywidth: he puesto los que tiene la imagen que he preparado.
      Lo dejo asi todo pocho por si puedes echarle un ojo.
      Un saludo

      • meisi
        Posted at 17:53h, 29 marzo Responder

        Um Ainhoa detecto algo raro, mira:

        #mc_embed_signup {
        background-image: url(“‘http://wp.me/ap00E-zF’”);
        background-repeat: no-repeat;
        }

        tienes dobles comillas, las comillas son un tema rollo han de ser ‘ o ” pero no las dos a la vez. Prueba con ello bien. Por cierto no se cuan avanzada eres pero lo he visto con Firebug, un add-on de Firefox qu te deja ver el código de cada parte del blog.

        • ainhoa
          Posted at 20:28h, 29 marzo Responder

          Avanzada poco pero voy trasteanado, me he instalado Firebug y creo que ahora solo tengo comillas así ” de todas formas no se ve la foto y no soy capaz de configurar nada.
          Mañana volveré a toquitear algo a ver si puedo avanzar. Si no ya nos eseñasaras estas cosillas en el curso de diseño blogger de Mayo al que me he apuntado con muchisimas ganas.
          Lo voy a quitar de momento porque queda el blog feote.
          Un saludo.

          • meisi
            Posted at 20:40h, 29 marzo Responder

            Espera, prueba a poner comillas solo asi:’

          • meisi
            Posted at 11:43h, 31 marzo Responder

            Ainhoa! Con Neus lo hemos descubierto, las comillas han de ser ” no ‘
            Voy a rectificarlo. Gracias por ayudarme a descubrir un gazapo!

            • Ainhoa
              Posted at 12:51h, 31 marzo

              Hola Meisi,
              Acabo de probar pegamdo el codigo corregido coon las comillas y nada. Creo que el tamaño de la foto debe ser grande pero como tampoco la veo no lo puedo corregir. Ayer probe con dobles comillas y comillas simples y siempre lo veo igual. Lo dejo un rato chapucero a la vista por si lo quieres revisar.
              Esto es de brujas!

    • Neus
      Posted at 17:48h, 29 marzo Responder

      Hola Elena! Yo también he vuelto a probar varias veces y nada, me sigue pasando lo mismo. Me he hecho un esquema de como quiero que quede para medirlo y darle las medidas acorde con esto pero el resultado sigue siendo el mismo.

      • meisi
        Posted at 17:54h, 29 marzo Responder

        Neus, me das la dirección de tu blog?

        • neus
          Posted at 20:05h, 29 marzo Responder

          Lo acabo de ver ahora, mi blog es http://www.rosaballerina.com, está en construcción y estoy practicando con tus totorales del curso de diseño con blogger que, por cierto, son fantásticos y me han salido todos a la primera :)

          • meisi
            Posted at 20:39h, 29 marzo Responder

            Uyuyuy… mira lo qeu me dice Firebug:
            #mc_embed_signup {
            background-image: url(“‘http://i61.tinypic.com/r9lbfn.jpg’”);
            background-repeat: no-repeat;
            }
            La dirección está super rara. estas poniendo un gadget de texto o html? al pegar el codigo cambia o algo?

            • neus
              Posted at 21:15h, 29 marzo

              Ahora he cambiado la url de la imagen, pero ningún cambio. Estoy poniendo un gadget html y al pegar el código aparecen los colores y cambia el tamaño y la distribución de los campos, pero ya está.

        • meisi
          Posted at 21:18h, 29 marzo Responder

          Neus, estas poniendo el html en el gadget y el css en su sitio verdad? me escribes por mail y me pones un pantallazo del css en su sitio?

    • Verónica Guijarro
      Posted at 12:08h, 04 abril Responder

      Hola Meisi,
      Estoy intentando instalar este widget en mi WordPress y me aparece sólo este texto en mi blog sin imagen ni nada:

      #mc_embed_signup h2 { color: #D33254; font-size: 16px !important; padding-top: 221px !important; text-align: right; float: left; height: 410px; margin-bottom: -46px !important; width: 1100px; } #mc_embed_signup #mce-EMAIL { float: left; margin-left: 199px; } #mc_embed_signup #mce-EMAIL, #mc_embed_signup #mce-FNAME { background-color: #D1FFC1 !important; border: medium none !important; color: #429676; font-family: Open Sans,sans-serif !important; font-size: 20px !important; font-weight: normal !important; margin-right: 40px; padding: 10px; } #mc_embed_signup .indicates-required { display: none; } #mc_embed_signup #mc-embedded-subscribe.button { background-color: #F05483; border: medium none !important; color: #FFFFFF !important; font-family: Open Sans,sans-serif !important; font-size: 20px !important; padding: 10px; } #mc_embed_signup { background-image: url(‘http://veronic2-cp84.wordpresstemporal.com/wp-content/uploads/2014/04/DSC03084.jpg’); background-repeat: no-repeat; height: 400px width: 950px }

      ¿Qué puedo estar haciendo mal? Gracias

      • meisi
        Posted at 20:25h, 07 mayo Responder

        Verónica no habia visto respuesta! esás poniendo el codigo en la pestaña de html del editor de texto? parece que estás en la normal…

    • PUIG
      Posted at 15:47h, 04 abril Responder

      Hola, gracias por el post! Estava haciendo pruebas y me pregunto si es posible hacer que mailchimp no te pida la confirmación de subscripción. Me gustaría poner el formulario pero sin que se tengan que subscribir. Muchas gracias.

      • meisi
        Posted at 17:56h, 04 abril Responder

        Hola! no te entiendo, un formulario de mailchimp que no sirva para sucribirse? Explícame plis.

        • puig
          Posted at 19:09h, 04 abril Responder

          Perdona, me explico fatal. Me refería a que cuando te subscribas no sea necesario tener que ir al email a clicar la confirmación de subscripción.

          Muchas gracias por tu rapidez!

          • meisi
            Posted at 19:13h, 04 abril Responder

            No, no se pude. Es una formalidad imprescindible. Si no fuera asi la gente podria suscribir a otro en su lugar, de esta manera se aseguran que eres tú quein lo solicita.

    • Ronaldo Santos
      Posted at 20:14h, 07 mayo Responder

      Buenas tardes,

      Estoy tratando de seguir su tutorial para poner el widget de formulario de registro MailChimp en un blog. El problema que se presenta es que la imagen que he elegido no es completa y no aparecerá en el botón de envío.

      Cómo solucionar?

      • meisi
        Posted at 20:24h, 07 mayo Responder

        Hola Ronaldo, no se si te entiendo bien:
        puedes mover con margin-left hacia la izquierda todo el formulario hasta que entre en el espacio del que dispones. lo que no entiendo muy bien es que el hecho de que la imagen sea completa o no no tiene más importancia. lo importante es las medidas que tiene y sobre ellas mover los elementos, no es así?

        • Ronaldo Santos
          Posted at 15:27h, 08 mayo Responder

          Hola!
          El problema con la imagen ya podía resolver. Lo que aparece ahora no es el botón “Suscribirse”. El sitio aparece para poner el nombre y el correo electrónico, pero no aparece el botón de suscribirse. Parece que se encuentra debajo de la imagen.

          • Jesús Abón
            Posted at 21:27h, 28 octubre Responder

            Hola Ronaldo:

            Tenía el mismo problema con mi blog http://www.technopatas.com, no me aparecía el botón de suscripción. La solución es relativamente simple, en el código del formulario, justo en el div que contiene el botón de suscribir, borra el ‘class=”clear”, y asunto arreglado.

            Esta es la div habitual que te bota mailchimp:

            Esta es la div sin el class=”clear”.

            Espero te sea de ayuda, saludos.

    • Ronaldo Santos
      Posted at 20:08h, 08 mayo Responder

      Hola,

      Deja emplicar mejor.

      Estoy tratando de poner este código en un widget. Todo fue bien y fue precioso. Sólo tengo un problema. El botón de suscribirse no aparece. ¿Qué debo hacer?

      • meisi
        Posted at 08:41h, 09 mayo Responder

        Me puedes poner un pantallazo de tu codigo tal cuál como lo tienes?

        • Ronaldo Santos
          Posted at 15:20h, 09 mayo Responder

          Éste es el código que puse en Widget de texto

          FIQUE ATUALIZADO!
          Insira aqui o seu email para receber nossas promoções e atualizações gratuitamente!

          Pongo esto en CSS

          /* ============ START MAILCHIMP DESIGN ==================*/

          #mc_embed_signup input.email {
          display: block;
          padding: 6px 0;
          margin: 0 4% 15px 0;
          text-indent: 5px;
          width: 58%;
          min-width: 238px;
          margin-left: 6px;
          line-height: 14px;
          border-radius: 3px;
          }

          #mc_embed_signup {
          background-image: url(“http://www.lojainstrumentos.com.br/wp-content/uploads/2014/05/bg-caixa.jpg”);
          clear: left;
          font: 14px;
          width: 272px;
          max-width: 272px;
          height: 225px;
          max-height: 225px;
          border-radius: 3px;
          }

          #mc_embed_signup input.button {
          display: block; !important;
          margin: 0 0 11px 0; !important;
          width: 240px; !important;
          min-width: 240PX; !important;
          margin-left: 5px; !important;
          }

          #mc_embed_signup .button {
          clear: both; !important;
          background-color: #F60; !important;
          border: 0 none; !important;
          border-radius: 4px; !important;
          color: white; !important;
          font-size: 15px; !important;
          font-weight: bold; !important;
          height: 34px; !important;
          line-height: 31px; !important;
          padding: 0px; !important;
          text-align: center; !important;
          text-decoration: none; !important;
          vertical-align: top; !important;
          white-space: nowrap; !important;
          }

          #mc_embed_signup input {
          border: 1px solid grey;
          -webkit-appearance: none;
          }

          #mc_embed_signup form {
          display: block;
          position: relative;
          text-align: left;
          padding: 20px 0 8px 3%;
          }

          #mc_embed_signup label {
          display: block;
          margin-top: -5px !important;
          padding-bottom: 5px;
          font-size: 18px; !important;
          font-family: ‘Oswald’, sans-serif;
          color: #373736;
          font-style: normal;
          font-weight: 400;
          margin-right: 10px;
          margin-left: 5px;
          }

          /* ============ END MAILCHIMP DESIGN ==================*/

          • meisi
            Posted at 15:41h, 09 mayo Responder

            Perdona! y la página para que lo mire con Firebug, me pones la URL?

            • Ronaldo Santos
              Posted at 16:26h, 09 mayo

              Lo sentimos, no entendí …

            • Ronaldo Santos
              Posted at 16:28h, 09 mayo

              ¿hay alguna otra forma de comunicación? Email?

    • Eli
      Posted at 15:09h, 15 septiembre Responder

      Hola, Primero muchas gracias por compartir tutoriales como este! Segundo, a ver si puedes ayudarme… O no tengo o no soy capaz de encontrar el editor de CSS (tengo un wordpress.org con plantilla gratuita). Así que he entrado en el servidor, he creado una carpeta nueva dentro de content/themes y en ella he hecho una copia de todos los archivos del tema original.
      Lo que pretendo hacer es editar el css desde ahí pero no sé qué archivo es el que debo editar. Supongo que debería abrirlo con Dreamweaver, ¿no?
      Gracias por adelantado!

    • meisi
      Posted at 15:51h, 15 septiembre Responder

      Hola Eli. Yo nunca trabajo por ftp, me sinto muy insegura, porque no soy informática. Que yo sepa, si tu WordPress no te muestra el css en Apariencia > Editor, puedes instalarle en el plugin Jetpack que te instala en Apariencia un flamante editor de CSS. Espero que te valga!

    • SaraFernandezH
      Posted at 19:31h, 21 septiembre Responder

      Hola. Tengo la caja de suscripción puesta como un widget. Modifiqué el CSS y quedó perfecto. Ahora la quiero poner debajo de alguna entrada o debajo dela página de Sobre mí o Contacto. Sólo me sale en forma Naked. Qué tngo que hacer en ese caso? Muchas gracias y felicidades por el blog.

    • Daniela Crucez
      Posted at 23:27h, 12 diciembre Responder

      Hola! Excelente post! Tengo 2 preguntas… La primera, si copio el código tal como lo general mailchimp y lo pego en el editor de textos de wordpress para que salga en la pagina de contacto al dar clic en el botón este no me guarda la informacion en mailchimp ni se actualiza la pagina, no hace nada. Me gustaría que al hacer clic a suscribirme entonces este generara un mensaje como de Gracias por suscribirte y al mismo tiempo me guarde en la base de datos de mailchimp. ¿Que tendría que hacer? Mi segunda pregunta, también probando descargue el plugin de mailchimp for wordpress y este si me genera el mensaje y me registra los correos en la base de datos de mailchimp pero el problema que tengo con este es que el formulario me aparece muy pequeño!!! y quiero que sea un ancho considerable de la pagina! (cosa que con la primera opción si tengo, es decir, el tamaño si es suficientemente grande) Uno tiene lo que al otro le falta!!! AUXILIOOO!

    • ALina
      Posted at 12:07h, 15 enero Responder

      Muchas gracias por post. Pero me ha surgido una duda.Dentro de Apariencia-Editor adonde exactamente pego el código?? A la derecha del todo en Pantillas aparecen muchísimas partes: p.ej content,pie de pagina, cabecera etc..Si yo quiere poner el formulario justo de bajo de cabecera o en la misma cabecera en que parte tengo que pegar CSS? Un saludo y muchisimas gracias

    • Fabian
      Posted at 17:52h, 13 febrero Responder

      esto que es?

    Post A Comment