WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Move Success Message to the bottom of form (10 posts)

  1. Brian Holloway
    Member
    Posted 4 months ago #

    I would like to move the success message to the bottom of the form when you submit.

    I know the CSS code is: .mc_success_msg

    I don't know how to move it down.

    Thanks

    https://wordpress.org/plugins/mailchimp/

  2. mc_dominic
    MailChimp Support Rep
    Posted 4 months ago #

    Hi JrBro,

    Thanks for hopping in the forum. Here’s a bit of css you can add to your site to move the success message to the bottom of the form:

    #mc_signup .mc_form_inside {
    position: relative;
    padding-bottom: 100px;
    }
    
    .mc_form_inside .updated {
    position: absolute;
    bottom: 0;
    left: 0;
    }

    To explain what’s happening here, when a success or error message is inserted in the form it’s added to a div with the class of .updated. The first bit of css above, set’s the positioning context of the inside of the form to relative. Then adds some padding to the bottom for the updated message. The second bit of css makes the updated block absolutely positioned then adds it to the bottom of the .mc_form_inside. You can make other adjustments to the padding or style to fit your site. Here’s are some great resources on using absolute positioning:
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/
    http://www.impressivewebs.com/absolute-position-css/

    Let us know if you have any other questions.

    -mc_d

  3. Brian Holloway
    Member
    Posted 4 months ago #

    Thanks. Worked great!

  4. Brian Holloway
    Member
    Posted 4 months ago #

    Is there a way to have it appear on both the top and bottom?

  5. mc_dominic
    MailChimp Support Rep
    Posted 4 months ago #

    Great! I’m glad it worked.

    You could add it to the bottom and the top, but it would require changing the plugin code. I would warn you that changes to the plugin code might not carry over when it's updated.

    Below are the steps to change the code.
    - In the WordPress Admin area, go to Plugins > Editor
    - Select MailChimp > mailchimp_widget.php
    - Look for this bit of code:

    <div class="updated" id="mc_message">
    <?php echo mailchimpSF_global_msg(); ?>
    </div><!-- /mc_message -->

    - Copy it and paste further down in the code above this closing div:

    </div><!-- /mc_form_inside -->

    Once that is saved, the success or error messages should appear in both places. If you use this option, the css code I mentioned earlier wouldn’t be needed.

    Let us know if you have any other questions.

    -mc_d

  6. Brian Holloway
    Member
    Posted 4 months ago #

    Sorry for the delay,

    I did as instructed and pasted the

    <div class="updated" id="mc_message">
    <?php echo mailchimpSF_global_msg(); ?>
    </div><!-- /mc_message -->

    code in front of

    </div><!-- /mc_form_inside -->

    and the success/error messages are still in one place. I also took out the CSS code from earlier and it still didn't work.

  7. mc_dominic
    MailChimp Support Rep
    Posted 4 months ago #

    Hi JrBro,

    Can you send a link to the page with the signup form? Also you might want to double check that the code is added in both the top and the bottom of the signup form code.

    We look forward to hearing from you!

    -mc_d

  8. Brian Holloway
    Member
    Posted 4 months ago #

  9. mc_gabe
    MailChimp Support Rep
    Posted 3 months ago #

    Hey JrBro,

    Thanks for getting in touch! It looks like that solution mc_dominic mentioned works specifically when JavaScript is disabled. So in order to get it working you can go to the MailChimp Setup page of your WordPress settings, then go to the List Options section of the page and uncheck the box for "Use Javascript Support?", then save. That should get the code working if it's both above and below the signup form in the plugin's code.

    -Gabe

  10. Brian Holloway
    Member
    Posted 3 months ago #

    Thanks, worked great!

Reply

You must log in to post.

About this Plugin

About this Topic