Help with layout

Hi Ben,

These are great questions!

1. We only handle one list per form.

2. You can add classes to each field when you open the field up in the form builder. Click on a field and the field options will slide down. Within these field options there is an “Additional Classes” input field to add your own classes.

3. I’m not sure what you mean by “customize the design.” You can customize the messages that are returned. Are you trying to customize the styles? Like, for example, changing the default green background for a successful subscription?

4. The email you get after subscribing is the MailChimp email. The email you see in the “Custom Messages” section is specifically for updating a profile. Depending on your submission settings, you may be allowing already subscribed users to update their profile via an email. This email is sent to users who try to subscribe to the same list twice, and contains a URL that takes them to their MailChimp profile.

Also, I’m not sure how familiar with CSS you are, but on your site the email field is being styled differently based on styles coming from your styles.css file. This is the CSS selector causing this:

.contactForm input[type="text"], input[type="email"], input[type="tel"] {
border-radius: 0px;
    height: 50px;
    border: none;
    padding: 16px;
    width: 100%;
    outline: none;
    background-color: #eee;
    font-size: 18px;
}

Specifically the font-size and height properties.

Cheers,
Kevin.

Hi Kevin,

Thank you so much for the answers that’s really helpful. Just to follow back on some of what you said:

3. Yes, I’d like to change the colour for instance
4. makes perfect sense, I hadn’t read it properly thanks!

wrt CSS, it’s definitely not my strong point but I’m confused by what you found. Actually the CSS you highlighted I added for another form. I thought that given the classname is ‘contactForm’ that class would have to be added to your form to have any impact? Also why has it only affected the email field and not the text field?

Thanks again for your help.

Ben

Hi Ben,

I believe you added the contactForm class to the form, and the reason it was targeting only the email was due to some of our styles not being overwritten. I looked at the site again though and it seems the styles are applying to all of the fields now. Did you change something?

In terms of customizing the success message, unfortunately there’s no perfect way to do this. You can add your own styles to the .yikes-easy-mc-error-message class, and these should override the existing styles. If the style is not overriding, try using the !important flag. If you need help with the specific CSS, just let us know.

Cheers,
Kevin.

Whoops – forgot to mention that the .yikes-easy-mc-error-message class is for submission errors (currently pinkish background) and the .yikes-easy-mc-success-message is for successful subscriptions (currently green background).

Hi Kevin,

Wow that was fast!

Actually I added the class contactForm just 5 mins ago to see if that now applied to all fields and it does. Still confused why it affected the email field before I added it to the class though.

Thanks again ??

Ben

Oh I see it now. After talking to our CSS expert it’s the way your CSS is. You’re scoping the contactForm class only for the input[type=”text”]. What I believe you’re looking for is .contactForm input[type="text"], .contactForm input[type="email"], .contactForm input[type="tel"].

Before you were targeting all of the input[type=”email”] fields (so email was styled). Does that make sense?

ah yes I think I do!

I have to specifically say that for each input type. Makes sense!

Thanks CSS expert guy!

Ben

I’m a woman, actually, but you’re very welcome!
-Tracy

Hi Tracy!

Oh God how embarrassing! I did mean guy in the generic person sense I promise.

<sneaks away in shame>

:((((

No worries!!

Glad we could help ??
-Tracy

hello both,

Actually one last question, is it possible to resize the recaptcha box and set width to 100% too?

Thanks

Ben

Hi Ben!

There are lots of ways you can customize the reCAPTCHA, but unfortunately I don’t believe you can set the width to 100%. Here is an article from our knowledge base explaining your reCAPTCHA options: https://yikesplugins.com/support/knowledge-base/how-do-i-customize-the-recaptcha-field/.

Let me know how you get along,
Kevin.