Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #527207

    Hi
    I followed the tutorial instructions on the MailChimp Intregration and was able to add a signup form to my homepage. However, when I look at the button, it appears larger than the other input fields. How can I get the button to be the same size.
    Here’s a link to my home page: http://www.herbalhealinginc.ca/

    I also added a sign-up form at the bottom of my blog. However, the input boxes borders and placeholder are while (because of my customization on the form on the homepage I presume). How do I solve this? (the transparency used on my home page form seem to causing this and also the button is much smaller. I would also like to reverse the button colors on this particular form only.
    Here’s the link to a blog:
    http://www.herbalhealinginc.ca/january-herb-of-the-month

    Much appreciated
    Lyse

    #527219

    Hi
    I would like to add one more issue with the form on the home page. When I enter text into the form, the color is gray (like the placeholfer), how can I get it to be #191816 (black)?

    Thanks
    Lyse

    #527547

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #mc4wp-form-1 input[type="email"], #mc4wp-form-1 input[type="text"] {
        color: #191816!important;
    }
    .mc4wp-form .modified_width .button {
        padding: 13px 10px 13px;
    }

    Can you please elaborate on the changes you would like to make on #2?

    Cheers!
    Yigit

    #527634

    Hi Ygit,

    Your suggested CSS changes resolved my issue #1. Thank you.

    As for issue #2:
    If you look at the form added at the bottom of the blog content, you’ll notice that the changes I have applied to the form (which I refer to as my newsletter form I use on my home page) get applied on the “default form” that gets styled by the Enfold theme MailChinp Integration. I use the MailChimp for WordPress Pro plugin that allows me to create multiple forms. So, I am tryng to customize the “default form” so it does not use the styling I have applied to my newsletter form (and which I intend to use on other pages). So how do I style the default (blog) form separately from what I’ve used for the newsletter from.

    The border to the input fields on the default form could be color: #b9a790, the input text color #191816,the button color: #191816, the button hover state color#cc6600, the background color can be #f4f4f4

    Hope this helps clarifies my issue #2 and how to customize the default form to be used on the blog pages.

    Thanks for your patience
    Lyse

    #528701

    Hi!

    use this code for border colors:

    #top .mc4wp-form input[type='text'], #top .mc4wp-form input[type='email'], #top .mc4wp-form select, #top .mc4wp-form textarea {
    border: 2px solid #b9a790 !important
    }
    

    Button background color:

    input[type="submit"] {
    background-color: #191816 !important;
    }
    

    button on hover:

    input[type="submit"]:hover {
    background-color: #cc6600 !important;
    }
    

    Cheers!
    Andy

    • This reply was modified 9 years ago by Andy.
    #528863

    Hi Andy,

    Unfortunately, these changes affect the form I use on the home page (where I use the following: CSS

    #top .mc4wp-form input[type=’text’],#top .mc4wp-form input[type=’email’],#top .mc4wp-form select,#top .mc4wp-form textarea{background:transparent!important;border: 2px solid #ffffff!important; width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}

    So, how do I prevent one from overwriting the other where the same elements are used?

    Thanks
    Lyse

    #528872

    Hi!

    you could add the page-id to my code. For more information about it: https://en.support.wordpress.com/pages/#how-to-find-the-page-id

    Best regards,
    Andy

    #528895

    Hi Andy
    I thought about that, however, one for is for blog pages and the other for a number of pages. So page ids is way too specific. What about the form id? Would that work and if so, how would it work?
    Thanks
    Lyse

    #529205

    Hey!

    you could use post-id instead of page-id for blog pages. Not sure if it work with form-id and maybe you can ask mailchimp about that, as they know their forms best.

    One thing you could try is to give your form element in ALB a unique CSS class by doing this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Andy

    #529510

    Hi Andy
    The post id is to specific. I tried with form-id and that did not work, but good thought to ask MailChimp if that is possible.
    I also tried you suggestion. I get different results not quite right for all of the CSS class. I’ll keep working at it.

    One additional question. I have radio input that I added to my signup form so that subscribers choose which list to be added to. My newsletter is either for customers or wholesalers. I would need help styling the radio options inline. I tried the following in my form:
    <div>
    <p class=”first_form form_element form_element_third”>
    <input type=”text” name=”FNAME” placeholder=”Name*” required />
    </p>
    <p class=”form_element form_element_third”>
    <input type=”email” name=”EMAIL” placeholder=”E-Mail*” required />
    </p>
    <p class=”form_element form_element_third modified_width”>
    <input type=”submit” value=”SUBSCRIBE” class=”button” />
    </p>
    <p class=”first_form form_element form_element_third”>
    Interest as:
    <label class=”radio-inline”>
    <input type=”radio” value=”Customer” name=”MMERGE2″ id=”mce-MMERGE2-0″ required />Customer
    </label>
    <label class=”radio-inline”>
    <input type=”radio” value=”Wholesaler” name=”MMERGE2″ id=”mce-MMERGE2-1″ />Wholesaler
    </label>
    </p>

    </div>

    and added this CSS class:
    .radio-inline {
    display: inline-block;
    }

    yet nothing gets displayed inline. Any idea what I’m doing wrong?

    Thank you for your patience.
    Lyse

    #529524

    Hi!

    please open a new ticket for a new question.

    Try to add an !important into your code.

    Cheers!
    Andy

    #529550

    HI Andy.

    Thank you, adding important worked!

    Lyse

    #529564

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Regards,
    Andy

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘MailChimp Intregration – Button size and alignment’ is closed to new replies.