Center Placeholder Text

Hi @reissaus,

These styles should work:

.yikes-easy-mc-form input[type="text"]::-webkit-input-placeholder, .yikes-easy-mc-form input[type="email"]::-webkit-input-placeholder {
    text-align: center;
}

.yikes-easy-mc-form input[type="text"]::-moz-placeholder, .yikes-easy-mc-form input[type="email"]::-moz-placeholder {
    text-align: center;
}

.yikes-easy-mc-form input[type="text"]::-ms-input-placeholder, .yikes-easy-mc-form input[type="email"]::-ms-input-placeholder {
    text-align: center;
}

.yikes-easy-mc-form input[type="text"]::-moz-placeholder, .yikes-easy-mc-form input[type="email"]::-moz-placeholder {
    text-align: center;
}

Let me know if you need any help applying the custom styles.

Cheers,
Kevin.

First of all thanks for the quick reply. And yes, I need help :), because I have no idea of CSS. Where excatly do I have to put that in?

You should have a “Custom CSS” section in Appearance -> Customize. You can paste the CSS there.

Alternatively, some themes have their own Custom CSS section (usually in a settings menu or something equivalent).

If neither of those are working for you, I would recommend using a plugin like Simple Custom CSS.

Let me know how that goes.

Cheers,
Kevin.

Worked, perfect! Is there a way to center the input in that field, too?

Sure!

.yikes-easy-mc-form input[type="text"], .yikes-easy-mc-form input[type="email"] {
    text-align: center;
}

You know, if you center the text for inputs in general I don’t think you need separate CSS to center it for placeholders. I might be wrong. Feel free to use the above CSS and remove the previous CSS if you want to test that.

Great! One last thing. In the mobile view, the input text isn’t centered and the text on the submit button isn’t either. Why is that?

https://weltreise.jetzt

• This reply was modified 6 years, 2 months ago by reissaus.

Hmm… What’re you viewing mobile from? Your browser? If so, which browser? Your phone? If so, which browser on your phone?

• This reply was modified 6 years, 2 months ago by yikesitskevin.

Phone; Chrome Browser

• This reply was modified 6 years, 2 months ago by reissaus.

There are some styles from your theme (I’m assuming it’s your theme) that is forcing the text-align to the left.

Try adding these styles:

div#row-1 .yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-1.btn.btn-primary  {
    text-align: center !important;
}

div#row-1 .yikes-easy-mc-form input[type="text"], div#row-1 .yikes-easy-mc-form input[type="email"] {
    text-align: center !important;
}

it looks like a chrome mobile problem. The website looks completely different there. I tried it on the samsung standard browser and it looks (almost) like the desktop version. So thanks for your support!

Is there a site where I can see how to change the style of the buttons?

• This reply was modified 6 years, 2 months ago by reissaus.

Hi @reissaus,

There are tons of resources available on the internet about CSS and button styles. Google it a bit and get back to us if you have any questions.

Cheers,
Kevin.

ok, I will, thank you. I thought there are some specific things/commands I have to use for the buttons in the form.

There are specific classes for our button, yeah, but any CSS will work ??

.yikes-easy-mc-submit-button {
    /* Put any CSS you want here! */
}

I have another question. How can I insert checkboxes into the form, for example for GDPR reasons? Thank you!

Hello,

We have a GPDR add-on: https://www.ads-software.com/plugins/eu-opt-in-compliance-for-mailchimp/

Here are instructions for using that plugin:
https://yikesplugins.com/support/knowledge-base/gdpr-compliance-for-easy-forms-for-mailchimp/

Thank you!
-Tracy