Custom CSS

Hello Brooke,

Have you tried using the inline form checkbox? Is this putting the first and last name fields on the same line, but bumping the submit button to the next line? If so, there is probably an additional padding or margin being added to input fields (or buttons) by your theme. Without having access to your website, it’s hard to track down the exact cause.

If you can’t locate the cause of the submit button dropping down, you could try manually setting the widths. We calculate the number of fields and set a width based on that calculation. If you’re only using three fields and a submit button, you could try hardcoding the width for these fields. That would look something like:

.yikes-easy-mc-text, .yikes-easy-mc-email {
    width: 27%;;
}
.yikes-easy-mc-submit-button {
     width: 15%;
}

For the submit button’s colors, try this CSS.

.yikes-easy-mc-submit-button {
    background-color: #fcbbeb;
}
.yikes-mailchimp-submit-button-span-text {
    color: #fff;
}

If the any of the styles aren’t taking effect, try adding the !important keyword, for example, background-color: #fcbbeb !important.

I hope that will work for you. If you’re having trouble and you’re okay with waiting until your website is live, we can give you CSS specifically tested on your site.

Cheers,
Kevin.

Hi! Thanks for the response!

I did try using the inline form checkbox.
I think the issue is that I have 4 boxes – first name, last name, email address, and the submit button. So, the submit button is going to the next line.
I wasn’t sure if there was coding to simply make the boxes a bit smaller, so they can all fit in one line. It looks like submit button box is just barely not fitting.

I tried the CSS you provided and it worked to change the background and text color of the submit button, but nothing happened to get the boxes in one line, even with the !important added.

Is there any other CSS suggestions you might have to get them all on one line? For example resizing them all in another way perhaps? I don’t know much about CSS, so anything helps!

Thank you,
Brooke

Hi Brooke,

Keep the inline checkbox enabled.

Remove the previous CSS and try this:

.yikes-easy-mc-form > label {
    width: 25% !important;
}

If the submit button is still dropping off, lower the width percentage gradually (i.e. try 24%, 23%).

Let me know if you are – at the least – seeing a change in the field size.

Cheers,
Kevin.

Hi Kevin,

Yes, that got it all on one line at 24%. Thank you!!!

However, now the submit button field looks a bit odd compared to the other fields. Is there a way to make the button flat without the shadow? Perhaps that would make it look the same size as the other boxes too.
Right now the top of the submit button box starts lower than the other boxes and the bottom of the submit button box goes past the bottom of the other boxes. I hope that makes sense.

Additionally, I’m wondering if more customizations are available?
For example, if I would want to change the placeholder font, along with the submit button font, (color and the font style), is there a way to do that?
Is there also a way to change the opt-in success color? (Where it says thank you for subscribing after someone inputs their info)?

Sorry about all the questions. I’ve been searching how to figure all this out the last several days and just can’t seem to find my answers.

Thanks again,
Brooke

I also just tested opting in myself with these fields and I noticed that my final welcome email does not go through. Do you also happen to have the steps to ensure this goes through?

Thanks,
Brooke

1. Styles

The top of the submit button is probably level with the fields but the bottom hangs below (it’s illusory though) – this is another common issue with the inline style. Try adding this CSS to change that:

.yikes-easy-mc-form .yikes-easy-mc-submit-button {
    padding: 5px !important
}

In terms of other customizations, I would be remiss if I didn’t mention that we offer a paid customizer add-on that lets you change some of the styles of your form. It does offer placeholder and submit button styling but it does not offer font changes. It also comes with premium support and a convenient spot for all of your form’s custom CSS to live. Here is a URL with more details on that: https://yikesplugins.com/plugin/form-customizer-for-easy-forms-for-mailchimp/. The base Easy Forms plugin does not come with any built-in styling options.

2. What do you mean by final welcome email? Do you mean the email you – as the owner of the MailChimp list – receive when someone has subscribed to your list? If so, you’ll need to use double opt-in for that. Check out MailChimp’s article on notifications for more information: https://kb.mailchimp.com/lists/manage-contacts/change-subscribe-and-unsubscribe-notifications

All the best,
Kevin.

• This reply was modified 7 years, 3 months ago by yikesitskevin.

1. Unfortunately that still doesn’t make the button to appear inline with the others, it still appears to hang quite a bit below. Any other suggestions to adjust that?

2. So is there no way to customize the opt-in success color then? Or could that be done with the paid customizer?

3. As for the final welcome email – I would like an email to send to the subscriber that confirms they’ve subscribed and shows the information they input. Is that considered a double opt-in? I don’t want them to get the email that says confirm subscription, but simply one letting them know they are subscribed successfully.

Thanks,
Brooke

1. Without being able to interact with your form through the browser I don’t know what else to do for the submit button. It could be a font size issue (reducing the font-size will reduce the height of the button), maybe it needs a margin-bottom to push it up a little, or it could be something else.

2. The opt-in success and error messages are not customizable through the paid add-on. The classes to target them are .yikes-easy-mc-error-message and yikes-easy-mc-success-message. For example,

.yikes-easy-mc-success-message {
    background-color: #fcbbeb;
    color: #fff;
}

3. You received the success message but didn’t receive any email that confirmed this? Did you confirm that the email was successfully added to your list? If the email was successfully added to the list then the confirmation email will be sent by MailChimp. The plugin has no interaction with this email.

1. I wish I could submit a screenshot here to show you exactly what I mean.

Could you possibly provide the code to change the text size to be a bit smaller so I could see if that would help at all?

2. It seems that the css doesn’t change the success message color, even with !important added.

3. Yes, correct. The success message pops up, but nothing happened after that. I thought I didn’t need to have a double-opt-in to send a welcome email/confirmation, but it seems I do.

Thanks,
Brooke

1. Try changing the height of the button directly…

.yikes-easy-mc-submit-button  { 
    height: 40px;
}

2. Make sure you have it in there correctly and your page isn’t cached.

.yikes-easy-mc-success-message {
    background-color: #fcbbeb !important;
    color: #fff !important;
}

3. If your email made it onto your list but you didn’t receive an email then the issue is on MailChimp’s side. The “You’ve been subscribed to this list” email will be sent to all subscribers regardless of single or double opt-in.

(The welcome email I was talking about previously is a different email that’s sent to the owner of the list – not the subscriber. Disregard the previous information about double opt-in/single opt-in welcome emails).

1. That still doesn’t seem to change anything unfortunately. Any other suggestions?

2. That worked now. Thank you!

3. Could you possibly give me the css to change the color and font for the error messages? Right now I just tested the one that says, “You’re already subscribed. To update your MailChimp profile, please click to send yourself an update link”. It’s showing the ‘You’re already subscribed’ in red and then the rest ‘To update your Mailchimp’…. is in purple and turns pink when I hover over it.
I’m hoping to change the second part of the text to be white and then red when hovered over? Or just wondering how to change these.

4. It shows “edit form” under the form, (not clickable), is this only showing because my site isn’t live? Or how would I remove that?

5. Is there a way to make the form appear in a mobile friendly way? It currently shows the 3 box fields, first name, last name, and email address on the top line, aligned left, and then the submit button on the next line, also aligned left. Is there a way to at least make these appear in the center? (I have them aligned center in my theme already). OR is there a way for each of the 4 boxes to be on a separate line/full size across the screen?

Thanks,
Brooke

• This reply was modified 7 years, 3 months ago by bboesl.
• This reply was modified 7 years, 3 months ago by bboesl.

1. Without seeing the form, I have no other suggestions here, sorry.

2. Good ??

3. The link is being styled separately so we’ll need to target the link specifically.

.yikes-easy-mc-success-message a {
    color: #fff;
}

.yikes-easy-mc-success-message a:hover {
    color: red;
}

4. The edit form link is only viewable by admins. No one else will see it. Here is an article about it. https://yikesplugins.com/support/knowledge-base/remove-edit-form-link/.

We also have an article about CSS selectors in general that may be of use to you: https://yikesplugins.com/support/knowledge-base/selectors-add-custom-css/

5. Mobile-specific CSS will be needed and I can’t do that part without being able to interact with the form, sorry.

All the best,
Kevin.

1. Unfortunately that css doesn’t seem to work for the success error message, even with adding !important. Is there anything else to try for that?

2. So if I made my website live and gave you the link, would you be able to give me the css for fixing both the submit button to line up with the other fields, as well as a mobile friendly layout?

Thanks,
Brooke

Hello Brooke,

1. You’re referring to the update profile link, correct? I mixed it up – we need to target the error message’s link rather than the success message. I just tested this CSS and it worked:

.yikes-easy-mc-error-message a {
    color: #fff;
}
.yikes-easy-mc-error-message a:hover {
    color: red;
}

2. Once your site is live, I will be able to fix the submit button layout without trouble. I can help with mobile friendly design but I am not a mobile friendly expert so I can’t guarantee that.

Cheers,
Kevin.

Hi again,

Yes, that’s what I was referring to.

That worked, thanks! However, then I decided I wanted to change what the error message actually says, (the text), in the custom messages. So I did that, but now I can’t figure out how to get the link back! So where it said, “…click to send yourself an update”, it’s no longer clickable.
Oops!!! Can you please help me get that clickable link back?

Updated: I fixed how to make that clickable again by adding [link]. However, then the success message after that says, “Update email successfully sent. Please check your inbox for the message.” Is there anywhere that I can customize the text for that? I would like to make it say the same thing, but also add check your inbox or spam/junk folder for the message.

So sorry for all my issues and thanks so much for helping,
Brooke

• This reply was modified 7 years, 3 months ago by bboesl.