post

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!

    • http://Www.retazoscondulce.com Elisa

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

      • http://meisi.es meisi

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

    • http://rosaballerina.blogspot.com neus

      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

      • http://meisi.es meisi

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

    • http://rosaballerina.blogspot.com neus

      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.

      • http://meisi.es meisi

        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?

    • http://rosaballerina.blogspot.com neus

      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!!

    • http://doygestion.com Ainhoa

      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.

      • http://meisi.es meisi

        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?

    • http://doygestion.com Ainhoa

      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.

    • http://doygestion.com Ainhoa

      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

      • http://meisi.es meisi

        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.

        • http://doygestion.com ainhoa

          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.

          • http://meisi.es meisi

            Espera, prueba a poner comillas solo asi:’

          • http://meisi.es meisi

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

            • http://doygestion.com Ainhoa

              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!

    • http://www.rosaballerina.com Neus

      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.

      • http://meisi.es meisi

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

        • http://www.rosaballerina.com neus

          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 :)

          • http://meisi.es meisi

            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?

            • http://www.rosaballerina.com neus

              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á.

        • http://meisi.es meisi

          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?

          • http://www.rosaballerina.com neus

            voy!

    • http://veronic2-cp84.wordpresstemporal.com/ Verónica Guijarro

      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

      • http://meisi.es meisi

        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…

    • http://putxi.tumblr.com PUIG

      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.

      • http://meisi.es meisi

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

        • puig

          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!

          • http://meisi.es meisi

            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.

    • http://www.ronaldosantos.com Ronaldo Santos

      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?

      • http://meisi.es meisi

        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í?

        • http://www.ronaldosantos.com Ronaldo Santos

          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.

    • http://www.ronaldosantos.com Ronaldo Santos

      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?

      • http://meisi.es meisi

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

        • http://www.ronaldosantos.com Ronaldo Santos

          É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 ==================*/

          • http://meisi.es meisi

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

            • http://www.ronaldosantos.com Ronaldo Santos

              Lo sentimos, no entendí …

            • http://www.ronaldosantos.com Ronaldo Santos

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