WordPress.org

Ready to get started?Download WordPress

Forums

Newsletter Sign-Up
[resolved] Single Line option (8 posts)

  1. seaus
    Member
    Posted 1 year ago #

    After looking around, your plugin is the best I have found for Mailchimp subscription.

    I am having some trouble customizing the look of the form though. Ideally would like to have the subscription form be a single line. Would love to not have a title and just have the text inside the box (which your widget does) and then would need to have the submit button on the same line as the email field. Can you advise of the way to do this, ideally without hacking the php files (do not want to loose the hacks upon upgrades).

    I was able to customize the size of the email field in CSS, but long term it would be great to have that as an option in plugin settings

    You can see the subscribe form in action on this page in the header widget area.
    http://journeyinstruments.com/shop/

    http://wordpress.org/extend/plugins/newsletter-sign-up/

  2. Danny van Kooten
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Serge,

    I'll reply here as it might interest others too. Add these CSS lines to your theme's stylesheet (usually found in /wp-content/themes/your-theme-name/style.css).

    form.nsu-form{ float:right; }
    form.nsu-form label{ display:none; } /* like you did already */
    form.nsu-form p{ display:inline-block; margin-right:5px; margin-bottom:0; }
    form.nsu-form p:last-child{ margin-right:0; }

    That should do the trick of converting it to a one-line form!

  3. seaus
    Member
    Posted 1 year ago #

    that works very well

    as a variation, if I did want the form in single line but still having a label? (when I remove the display:none it breaks the form into two lines)

    And is it possible to make label match style of existing theme?

  4. beru82
    Member
    Posted 1 year ago #

    Hi Danny,

    I love the sign up from Seaus website but this CSS code doesn't work for me :(

    I'm using

    form.nsu-form{ float:left; }
    form.nsu-form label{ display:none; } /* like you did already */
    form.nsu-form p{ display:inline-block; margin-right:5px; margin-bottom:0; }
    form.nsu-form p:last-child{ margin-right:0; }

    and I need the email field to be 200px wide and the Subscribe button to be on the same line as the field.

    See here: http://www.lotto4sure.com.au/

    Any ideas?

  5. gejiaxu
    Member
    Posted 1 year ago #

    For anyone else who might encounter issues using this method, just wanted to add some info:

    The CSS works great, but only *if* you haven't manually set your newsletter form action (using YMLP here, and the API just doesn't work, as reported by several users before). Once you do that, the plugin will assume you want to use static data (even if not necessary, and even if all fields are blank), and the code in frontend/NewsletterSignUp.php will insert a hidden <div> between the input and signup paragraphs to store that static data. This prevents the inline-block from working properly, so since I wasn't using static data I just commented out that if-statement in the php file. Lines up nicely now.

  6. Danny van Kooten
    Member
    Plugin Author

    Posted 11 months ago #

    I'll look into fixing that gejiaxu. Thanks.

  7. Danny van Kooten
    Member
    Plugin Author

    Posted 11 months ago #

    Removed the <div> wrapping the hidden input fields in version 1.9. Enjoy everyone!

  8. mconheady
    Member
    Posted 9 months ago #

    That worked great for me to get it all on one line, but how do i adjust the width of the email field? nothing I do seems to work.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic