WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Mailchimp widget subscribe box needs aligning (42 posts)

  1. WP Sites - Brad Dalton
    Member
    Posted 2 years ago #

    How do i align the email address box with the button?

    http://wordpress.org/extend/plugins/mailchimp/

  2. mc_nate
    Member
    Posted 2 years ago #

    Hey there, Brad!

    If you don't mind, could you send us a link to your website. That will give us a better idea of how things are looking. However, generally this can be accomplished through the CSS. Here's a link to another post on the WP Forum with how to accomplish that general idea:

    http://wordpress.org/support/topic/styling-mailchimp-for-one-line?replies=2

    Let us know if we can help with anything else!

    Cheers

  3. WP Sites - Brad Dalton
    Member
    Posted 2 years ago #

    The problem is its the mailchimp widget which looks different in different versions of different browsers.

    My site is http://wpsites.net/

    I'd like the submit button aligned directly underneath the email box otherwise it won't fit next to it.

    Thanks for your help

  4. mc_nate
    Member
    Posted 2 years ago #

    Hey again, Brad!

    If you literally want the submit button to be RIGHT underneath the Email field, that is possible through editing the CSS. What you'd want to do is edit both the email input field and the submit button by adding the following to your site's "Style.css" under "Appearance" -> "Editor" -> "Style.css":

    #mc_signup_form .mc_input {
    width: 135px;}
    
    input#mc_signup_submit.button {
    margin-left: 55px;}

    That should give you something like this:
    Screenshot -- http://cl.ly/3R190l341e3F3u1H2t08

    Let us know if we can help with anything else!

    Cheers

  5. wpfspin
    Member
    Posted 2 years ago #

    How do I get the input labels to appear above the input boxes?

    Any assistance would be greatly appreciated.

  6. mc_nate
    Member
    Posted 2 years ago #

    Hey there, wpfspin!

    Generally that can be done by setting the fields to display as "block". You can do that by adding the following to your sites "Style.css" file.

    #mc_signup_form .mc_input {
    display:block;}

    If that doesn't get it, give us a shout back. Make sure to include a link to your site so we can have a closer look at what's going on, as well, please! :D

    Cheers

  7. wpfspin
    Member
    Posted 2 years ago #

    MC Nate...thanks for the quick response!

    I tried using that code before but it wasn't working...I realize now that I included a note before the code which I now see wasn't commented out properly which prevented the code from working properly.

    Thank you
    /marcus

  8. mc_nate
    Member
    Posted 2 years ago #

    Awesome! Glad to hear everything's looking good. :)

  9. moisescolon
    Member
    Posted 2 years ago #

    Hello. Great post.

    My client blog is having a similar issue...

    http://claudiapcollazos.com/

    I can't fix it no matter what I do.

    Any help would be appreciated.

  10. mc_nate
    Member
    Posted 2 years ago #

    Hey there, moisescolon!

    By adding the CSS above to your site's "Style.css" file, that should display each input field on a different line under the field title.

    #mc_signup_form .mc_input {
    display:block;}

    If that doesn't get it squared away, let us know!

    Cheers

  11. moisescolon
    Member
    Posted 2 years ago #

    Hello. Thanks for helping. I just don't know where to put that code. Im using genesis framework and this is my table of content in the .css

    /* Table of Contents

    * Import Fonts
    * Defaults
    * Hyperlinks
    * Body
    * Wrap
    * Header
    * Image Header - Partial Width
    * Image Header - Full Width
    * Header / Primary / Secondary Navigation
    * Primary Navigation Extras
    * Inner
    * Breadcrumb
    * Taxonomy Description
    * Content-Sidebar Wrap
    * Content
    * Column Classes
    * Featured Post Grid
    * Headlines
    * Ordered / Unordered Lists
    * Post Info / Post Meta
    * Author Box
    * Sticky Posts
    * Archive Page
    * Images
    * Post Navigation
    * Primary / Secondary Sidebars
    * Dropdowns
    * Featured Page / Post
    * User Profile
    * Buttons
    * Search Form
    * eNews & Updates Widget
    * Calendar Widget
    * Footer Widgets
    * Footer
    * Comments
    * Gravity Forms
    * Focus Gray
    * Focus Brown
    * Responsive Design

    */

  12. mc_nate
    Member
    Posted 2 years ago #

    You should be able to add it to the very bottom and that'll take care of it! It doesn't have to go anywhere specific.

    Cheers

  13. adevandry
    Member
    Posted 2 years ago #

    This isn't working for me. I entered the code like recommended, but the fields are still not lining up with the display: block intention. http://lakebalboanc.org/

    Please help. Thanks in advance.

  14. mc_nate
    Member
    Posted 2 years ago #

    Hey there, adevandry!

    We had a look at the site, but when applying the "display:block;" attribute to the CSS, it appears that everything behaves correctly in Chrome:

    Screenshot -- http://cl.ly/3T3K3I373J0w0P3E2g0R

    Make sure to add that chunk of CSS in the site's "Style.css" file under "Appearance" -> "Editor" -> "Style.css".

    Let us know if we can help with anything else!

    Cheers

  15. adevandry
    Member
    Posted 2 years ago #

    Maybe it shows up in Chrome, but it's not showing up that way in Firefox, IE, or Safari.

    The code is there, and has been there all along.

  16. mc_nate
    Member
    Posted 2 years ago #

    Hey again!

    It seems that I misspoke earlier. Using Chrome's developer tools, we were able to apply that style correctly. In looking at the "Style.css" file, we're not seeing that specific MailChimp attribute applied anywhere:

    http://lakebalboanc.org/wp-content/themes/WhiteHousePro/style.css

    Are there any caching plugins installed that might be holding onto the old version of the CSS for some reason? If so, try to disable those temporarily and see if that allows that file to be updated.

    Cheers

  17. adevandry
    Member
    Posted 2 years ago #

    The weird thing is that I'm using a child theme, so the CSS is in the child theme's style.css.

    I'm confused, but I'll work on it more today and try to figure it out.

  18. mc_nate
    Member
    Posted 2 years ago #

    Hey again --

    Just wanted to touch base and make sure everything worked out. We had a look at the site, and it does look like the forms are displaying correctly, now! If there's anything we can help with, please don't hesitate to give us a shout! :D

  19. WP Sites - Brad Dalton
    Member
    Posted 2 years ago #

    Appreciate your followup mc_nate

    I have changed themes so everything looks ok now

    I stripped all the bloated code from the sign up forms which may have been causing a problem

  20. mc_nate
    Member
    Posted 2 years ago #

    Awesome. Definitely glad to hear it.

    If you do see any other weirdness, give us a shout. We're happy to help!

    Cheers

  21. Chris Barrett
    Member
    Posted 2 years ago #

    http://shmortgage.com/signup

    I added:

    #mc_signup_form .mc_input {
    display:block;}

    And I notice the phone number is now split over three lines.

    Anyway to fix that?

    Thanks!

    Chris

  22. mc_nate
    Member
    Posted 2 years ago #

    Hey there, Chris!

    Basically with that chunk of code, what we're telling the form to do is to display each area on it's own separate line. So, what we want to do is isolate just the "phone" portion of the code and tell it to display all on the same line. To do that, I use the built-in Developer Tools in Chrome to find that id and add the following to my CSS:

    .mc_phone {
    display: inline !important;}

    That gives us something that looks like this:

    http://cl.ly/3b3V3p1Q1f1g2M1y3e2E

    Let us know if we can assist with anything else. We're happy to help!

    Cheers

  23. bhealth
    Member
    Posted 2 years ago #

    Hi, I am trying to align the <input text= boxes vertically on the subscription page of mailchimp see http://www.balmainhealthfoods.com.au/good-health-form/ as they are all ranging left. I've been playing around for ages but with no success.

  24. mc_nate
    Member
    Posted 2 years ago #

    Hey there, bhealth!

    We can totally help with that. As mentioned, above, you'll need to add the following CSS to your site's "Style.css" file:

    #mc_signup_form .mc_input {
    display: block;}

    That will give you a form that looks something like this:

    Screenshot -- http://cl.ly/0h2N1t0G10060U1d1A1q

    If we can assist with anything else, give us a shout!

    Cheers

  25. Chris Barrett
    Member
    Posted 2 years ago #

    mc_nate, I was on vacation and just got back.

    Thank you so much for the feedback - worked like a charm!

  26. mc_nate
    Member
    Posted 2 years ago #

    Glad to help, Chris! :)

  27. Nickie_VZ
    Member
    Posted 2 years ago #

    @mc_nate I'm also having trouble with getting my telephone number to appear on one line. Have tried coding above, but this didn't work. I'm helping our designer with a website build for a client. The mailchimp widget is being used for one form, with the other two forms required placed in another page, and CSS used at the head of the html page where the forms are.

    I've managed to style the form using the following coding but can't seem to get the phone number to appear on one line.

    <style type="text/css">
    	#mc_embed_signup{background:#d1d4d3; border:2px solid #011931; clear:left; font: 14px Helvetica,Arial,sans-serif;}
             #mc_embed_signup .mc-field-group{background:#d1d4d3; clear:left; font: 14px Helvetica,Arial,sans-serif;}
             #mc_embed_signup .mc-field-group-label{clear:left; font:14px Helvetica,Arial,sans-serif;}
             #mc_embed_signup input.button{background:#b10021; clear:left; font:strong 14px Helvetica,Arial,sans-serif;}
             #mc_embed_signup .mc-field-group select{width:300px; height:28px; margin:0px;}
             #mc_embed_signup .mc-field-group input{border:1px solid #616a71;}
             #mc-embed_signup .phonefield-us .phonearea input .phonedetail1 input .phonedetail2 input{display: inline !important;}
             	/</style>

    Also, in mailchimp our form has a headerbar but I assume this functionality is not available when coding this way direct into a page?

    Please can you help?

    Many thanks

    Nickie

  28. mc_nate
    Member
    Posted 2 years ago #

    Hey Nickie!

    Would you mind shooting us a link to your site to have a peek?

    Cheers

  29. plonde
    Member
    Posted 2 years ago #

    Hi!

    Obsessed with MailChimp! Just added the widget to my site and have a formatting question. It's aligning center and looks yucky (yes, I said yucky). http://www.americanathebeautiful.org/blog

    1. how do i align left
    2. any way to get the text/html/mobile onto one line so it doesn't consume so much real estate?

    ****
    Another question. I'd also like to make a page in the nav for "subscribe." My theme has a lovely home page, but folks don't always find the subscribe intuitively... I tried entering the html and php cpde you suggested (http://wordpress.org/extend/plugins/mailchimp/installation/) but 1. it didn't work and 2. it deleted the text I had on the page. thoughts? how do i get the form into the body of a page, not just in a widget area?

    Thank you!

  30. Nickie_VZ
    Member
    Posted 2 years ago #

    @MC Nate thanks, but changed field to international phonefield instead of US phonefield. It now looks fine.

    @plonde I'm working on a site build at the moment and as we've got more than one form, needed to embed the form within the body of a page.

    If you look in the form design area, the last section is share it. It gives you a URL to your form but if you look on the right hand side of the , click where it says about getting the html code for your form. It then gives you the options of a form type. I went for classic. There are drop downs for each option such a title and show all fields on your form so you can tailor these. Then just click the generate the code button. Paste top part of code up to comments in top of your page in WordPress and the other part which relates to the actual form below your text, if that's where you want it. By placing the first part of the coding at the top of the page means you're won't affect the CSS for your site. It also gives you the options to add CSS to style the form in this page. See an example

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags