spirit theme - make default forms work with enewsletters/contact

Hi,

I am very happy so far with upfront, I historycally have coded my own themes and some plugins, but have decided to try WPMU in order to speed up development and also to avoid having to support theme functions etc as new vulnerabilities are found. Anyway, this is a question that you must have had numerous times, but here it goes:

I want to make the default "subscribe to newsletter" and "contact form" functional as I like the look/feel as per default, I specifically want to make them work with enewsletter and contact plugins, can you guide me with this one? One issue is that the labels have to be custom as the site in question is in a foreign language, see:

http://mz.manoglia.com

So I am not sure that customizing the enewsletter's plugin form would work well.

Have a great weekend

Nuno

  • Dimitris

    Hey there Nuno,

    hope you're doing good and thanks for reaching us!

    You can use some CSS to style e-Newsletter plugin like this dummy subscriber form of Spirit theme. I just tried this in my test install and I used a "e-Newsletter : Subscribe" widget, leaving the "Ask the name?" option un-checked. Then I edited the default preset CSS using as a base the CSS provided in subscriber form of Spirit theme.

    Here's the whole CSS snippet I used, feel free to play with it and match it with the rest of your web design.

    #subscribes_form {
      padding:0px;
      margin:0px;
      width:100%;
    }
    #subscribes_form input[type="text"] {
      width: 75%;
      text-indent: 15px;
      line-height: 38px;
      height: 38px;
      box-sizing: border-box;
      font: 15px 'Open Sans', Arial;
      font-weight: 300;
      color: #707070;
      background: #ufc6;
      outline: 0px;
      border: 1px solid #ufc6;
      border-radius: 4px 0 0 4px;
      display: inline-block;
      float:left;
    }
    #subscribes_form input[type="text"]:focus {
      outline: 0px;
      border: 1px solid #ufc0;
      color:#ufc7;
    }
    #subscribes_form input[type="submit"] {
      background: #ufc0;
      border-bottom: 2px solid #ufc1;
      border-radius: 0 4px 4px 0;
      color: #ufc6;
      font-family: "Oswald", Arial, sans-serif;
      font-size: 16px;
      font-weight: 300;
      line-height: 38px;
      height: 38px;
      width: 25%;
      padding: 0px;
      margin:0px;
      text-decoration: none;
      text-transform: uppercase;
      -moz-transition: background-color .2s;
      -ms-transition: background-color .2s;
      -o-transition: background-color .2s;
      -webkit-transition: background-color .4s;
      transition: background-color .2s;
    }
    #subscribes_form input[type="submit"]:hover {
      background: #ufc1;
    }
    #subscribes_form p {
      display: inline;
    }
    #subscribes_form label {
      display: none;
    }

    As for labels, you can use placeholder text instead with a bit of javascript code. For that, you can use a plugin like this and create a custom JS snippet like the following

    (function($) {
      setTimeout(function(){
      $( '#e_newsletter_email' ).attr("placeholder", "Type your placeholder here");
    }, 200);
    })( jQuery );

    Warm regards,
    Dimitris