E-mail field and submit botton on same line

Hey jnshim,

Thanks for swinging by the support forum. When using the MailChimp List Subscribe Form Plugin, the submit button can be made to appear alongside the Email field by making a few CSS edits. This can be done by adding a float:left style to the .mc_merge_var element and a float:right style to the .mc_signup_submit element in the stylesheet for the page.

I tested out a few of these changes on the page linked, but it appears as though the container that the form is in is too narrow to allow them to sit side-by-side as is. It would be possible to either place the elements into a wider container, or reduce the width of the field button.

Thanks again for posting. Please feel free to contact us with any other questions you may have. Have a great day!
-Gunter

cheers gunter this is what i need to do in natureheals.co.uk but i dont know where and how to structure this code? are you able to assist?

thank you so much

Hi there stellamaris5,

I’m happy to help you out there! The styles my fellow chimp Gunter mentioned need to be added into the mailchimp_widget.php file of the plugin.

When editing the code in that file, there will be an area with CSS styles for the widget appearance, and here you can add float:left; into the .mc_merge_var styles, and float:right; to the .mc_signup_submit styles. I also recommend changing the width percentage of the submit button to 50% or less (so when it’s next to the email field, the field is equal or larger in width).

I took a screenshot as an example here and highlighted those code additions/changes in yellow: https://eepurl.com/44hV5

Thanks for posting, and let us know if you have any additional questions. Have a good one!

-Kath

ps – Make sure to remove any spaces before the opening <?php tag when editing/saving changes to this code in the mailchimp_widget.php file. Certain editors will add additional spaces at the beginning of the <?php tag which can cause issues after the edits are saved.

Thanks Kath, I have tried your suggestion but it is not good the whole box doesnt fit properly then etc., I think I need to edit/style it a lot more but don’t really (yet) understand the different parts.

if you look https://natureheals.co.uk/conditions/ here you will see that I have to work in the narrow sidebar.

Any other help you can provide maybe to have it fit in there
?

Many thanks

Hey stellamaris5,

Thanks for replying back. I was able to check out that page, and once the float:left and float:right styles have been added to the email field and submit button, it would be possible to “shrink” the button size by changing the submit button text. For example, I’ve changed it to say “OK!” in this screenshot, and it’s made enough space for the field and the button to sit side-by-side: https://screencast.com/t/J7krlajCNP

In order to change the text, head into the plugin settings in the WP Admin panel, and then edit the Submit button text then save the changes: https://screencast.com/t/37QrxRAwI

Thanks again for posting. Please let us know if you have any other questions. Have a great day!
-Gunter

Hi Gunter yes I’ve tried that but then the green border/background dissappears as in your screenshot. That’s why I reverted back to original as I can live with this for now until I find more time to style the whole thing to fit in my site properly. Ideally I want it down in the footer so it is there in the home page as well but it looked even worse there. I’d like it to look ideally like my contact form and testimonial submission form and the button should be the same shade of green like other things. Thanks for your help though as I now know which php file I need to edit.

Regards