enewsletter: formatting signup form

site is: http://ub2.trb-dev.com/
I have the signup form in the footer - but would like it in line like in this example: http://ub2.trb-dev.com/wp-content/uploads/2016/04/footer-author.jpg is that possible?

  • Adam Czajczyk

    Hello reikob,

    I hope you're well today and thank you for your question!

    I can see on a screenshot that the form is using different label and only an e-mail address field. To change the "Join Our Mailing List" to "Subscribe to our Newsletter" text and to disable "Your Name" field please go to your dashboard's

    "Appearance -> Widgets" page

    and then

    - find the "eNewsletter: Subscribe" widget in your footer sidebar
    - expand it
    - replace the text in a "Title" field
    - un-check the "Ask the name?" option
    - save widget

    At this point the widget should use new text and only a single (Your Email) filed.

    Next step would be to add some CSS to put it in a single line and change colors. This should do the trick:

    #subscribes_form label {display:none;}
    #subscribes_form br {display:none;}
    #subscribes_form input {float:left;clear:none;border:0;height:25px;}
    #subscribes_form .enewletter_widget_submit {background:#A9C000;border:0;color:#fff;font-weight:bold;text-transform:uppercase;height:26px;margin-top:0px;}

    To apply it to your site either add it to your child theme's style.css file (if you're using a child theme) or use a "Simple Custom CSS" plugin:

    https://wordpress.org/plugins/simple-custom-css/

    Finally, to add a "Your email address" text inside an e-mail field add following code to your current theme's "functions.php" file:

    function wpmu_enewsletter_form_placeholder() {
        ?>
        <script type="text/javascript">
        jQuery(function($) {
             $('#e_newsletter_email').attr("placeholder", "Your email address");
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'wpmu_enewsletter_form_placeholder');

    I hope that helps!
    Best regards,
    Adam

  • reikob

    Thanks for your quick response! You gave me exactly what I asked...but i had something different pictured in mind. I want both the email and name fields - I tried with my limited .css but couldn't do it, so some help please. It is okay to put the field names above -

    Also if someone is signed in and the look at the area it just says "unsubscribe" I would like to change that text to say something like "You are already subscribed! and a small "unsubscribe" it that difficult to do?

  • Adam Czajczyk

    Hello reikob!

    You gave me exactly what I asked...but i had something different pictured in mind.

    I followed the picture, it seems though that fortunately it was close enough to what you wish to achieve :slight_smile:

    so now just need to add name field to horizontal and change the unsubscribe response

    I took another look at your site and it seems that the name field is there again so I suppose you have just turned it on in a widget. I'm guessing the you'd also like to add a "placeholder" text inside, is that right? This would be easy to achieve with a slightly modified code in your "functions.php"file.

    Instead of the one I gave you recently, please use this one:

    function wpmu_enewsletter_form_placeholder() {
        ?>
        <script type="text/javascript">
        jQuery(function($) {
             $('#e_newsletter_email').attr("placeholder", "Your email address");
             $('#e_newsletter_name').attr("placeholder", "Your name");
    
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'wpmu_enewsletter_form_placeholder');

    I suppose you may want to "mark" both fields somehow so they'd be easy to notice as for know they are there but look like a one single long field. You could do this e.g. by adding a little space between the fields with this additional CSS:

    #e_newsletter_email {margin-right:10px;}

    Additionally, you may want to add the same space between name field and submit button. This CSS would help:

    #e_newsletter_name {margin-right:10px;}

    As for changing unsubscribe response. I think you may want to give our Ultimate Branding plugin a try. It features a "Text Change" module that should let you do this easily from your site's dashboard. Take a look here please:

    https://premium.wpmudev.org/project/ultimate-branding/

    Best regards,
    Adam