[Plugin: MailChimp List Subscribe Form] Widget does not display correct

Hey there, OttoMan!

Any chance you can shoot a link over to your site to have a closer look at the one that’s not cooperating?

Hi mc_nate

I have now pinpointed it to the theme “Twist of Ten”, the error
On a clean test installation, i get the samme error on if i install Twist of Ten.
Switching back to the original “Twenty Eleven” then no problem.
See below

https://onlinedemo.dk/wordpress/

Thanks

No worries. If that’s the theme you’re wanting to use, we should be able to get you rockin’ and rollin’. All we have to do is have the plugin set to “display: block;” so that each input field displays on it’s own line. So you’ll need to add something like this to your CSS;

#mc_signup_form .mc_input {
display: block;
}

Using that CSS should give you something like this:

Screenshot — https://cl.ly/2s3Y3G0N0n2r1Y463W1n

Give us a shout back if that doesn’t get it. We’ll be happy to have a closer look!

Cheers

Hi mc_nate

I think my problem is similar to this described here, so I hope it is okay, that I write a comment/question.

My site is https://www.loppelyst.dk

In the sidebare where I have the subscribtionform for MailChimp the input fields are cramped together so it does not look very nice.

I would like for the input fields to have space between them and be aligned.

I guess I could try using the code you write above mc_nate but I am not that technical unfortunatly – I do know how to insert the code in a file but where should I insert it?

Hope you can help. Thank you very much in advance.

Best,
Christian

Wow I did something that worked.

I tried copy pasting the code into the css file named flick.css and the input fields aligned themselves. And it does not look like I have messed anything else :O)

BUT I still have a question. If you take a look at my site the fields and texts are still very close together.

Can you tell me how I put more space between them?

Thank you in advance once again
Christian

I have a kind of the same problem, please look at:

https://www.investors-overseas.co.uk/newsletter/

I need to format the form so as the lenght of the fields are longer, and so as it does not look all joit together,

thanks

Hey there Loppelyst!

That can be adjusted by adding some padding or a margin to the fields in your CSS, as well. It really depends on how you want things to look and how much padding you’re looking to add. However, using either Firebug for Firefox or Chrome’s built-in Developer Tools, you can pull out the specific class that you’ll need to make changes to in your CSS. To add padding to the whole field (label and input box), you’ll use something like this:

.mc_merge_var {
margin-top: 10px;
}

For Krolly, you’ll want to do somewhat the same thing. We covered how to break the fields onto their own line, above. However, for additional styling, you’ll want to use Firebug or Developer Tools to isolate the specific classes and ids you want to make edits to.

From there, you’ll add that CSS to your site’s “Style.css” file. ??

Let us know if we can help with anything else!

Hi mc_nate

Thank you very much for your kind help.

I will try this.

Best,
Christian

I tried to add it to the bottom of flick.css where I also added the code that put the fields in line.

But it did not work. I am sure I am doing something wrong like putting the code in the wrong place but where to put it then? I hope you can point me to the correct location.

Thanks in advance
Christian

Hey there, Christian!

You’ll need to add the CSS to your “Style.css” file. That should take care of it! ??

Cheers

Hi again mc_nate

I tried your suggestion but unfortunately it did not work.

I am hoping you have another suggestion? Maybe it is me who places the piece of code wrong? I have just placed it at the bottem of the style.css file.

Kind regards,
Christian

Hey Loppelyst!

I had a look at the site, and I do see the margins for the Flick.css file, but nothing for the Style.css file. Try adding it there, instead and that should take care of it!