Move Success Message to the bottom of form

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:
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://www.impressivewebs.com/absolute-position-css/

Let us know if you have any other questions.

-mc_d

Thanks. Worked great!

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

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

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.

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

https://jrbinfinity.com/?page_id=20

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

Thanks, worked great!