Two Fields One Line

Hi Maicon!

Thanks for writing in!

In order to customize the actual layout of the output of the plugin, the trick would really be to use CSS in your site. You can modify the CSS in your WordPress theme’s style.css file to change the appearance of items and sometimes even their layout next to each other.

In the MailChimp Setup page for the plugin inside WordPress, you can find the “CSS Cheat Sheet” at the bottom. This has different IDs and classes which can be used for custom CSS. That said, if you can provide a link to your page and describe which objects you’d like to be put next to which other ones, we’ll be happy to at least take a look and see if we can suggest anything for you.

Have a great day!

I’m current developin at maestraweb.com.br/centervida
You’ll find a current subscribe dummy field (contact 7 form) on index for ilustrating purposes (on the green container of harmony and fresh fellings)
I managed to stylize many things with css like colors and stuff but couldnt find a way work it out. Probably because I’m pro – lying I’m not – with coding skillz.

And finally, thank you again for your time and sweet disposition.
Keep up the great work Gabe, the cake is not a lie.

Hi Maicon,

Thanks for writing back with that information. Since contact form 7 uses different styling than our form, customizing it would be a little different. But if you’re using our plugin, there’s some css id’s and classes you can target to customize the form and align them. Here’s a sample:

.mc_merge_var label {
	display: none;
}
.mc_merge_var {
	width: 55%;
	float: left;
}
.mc_signup_submit #mc_signup_submit {
	width: 25%;
	float: left;
	margin-top: 0;
}

The first bit is for removing the label, the label and the input box are contained in one div, so if the whole box is aligned left, the subscribe button wouldn’t align vertically. Removing it makes aligning the boxes easier, but you can keep the label displayed and make other adjustments if you want.

The second section(.mc_merge_var) is for targeting the actual email input box and aligning it to the left, I also set a width value here. This can either be a percentage or another value like a set px width.

The last section(.mc_signup_submit #mc_signup_submit), as you can tell, is for aligning the signup button and setting a width.

In the plugin settings, at the bottom of the page there’s a CSS cheatsheet, that can provide additional help with targeting the form.

Also here’s some additional resources on styling forms with css:

https://www.sitepoint.com/style-web-forms-css/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms

Let us know if you have any other questions.

I was looking to solve this same issue. I used to code you provided above on my site to get the email input field on the left and the button on the right. It didn’t work though. Is there something else I need to do? It didn’t budge and the button is still underneath my email field in the footer. Here is a link so you can take a look at the for in the footer.

https://www.28event.com/public_html/wp/

Hi Matt,

Thanks for hopping in the forum. Looking at your site, it seems you’re using the MailChimp embed code. This forum is really geared to supporting the wordpress plugin. The embed code uses different css ids and coding from the plugin, but the MailChimp Knowledge base has a great guide that can help with styling it: https://kb.mailchimp.com/article/embed-code-css-reference/

Let us know if you have any other questions.

-mc_d

I’ve been away for a while and coulnt respond to it in time, I’ll try ur suggestions and give a feedback by monday.

Thank you sir.

Hey Guys, sorry for the delay.

I dint made the changes that you guys recommended to me.

But marvelous thanks for your time and pacience.

Wish y’all the best.

Bye