-
AuthorPosts
-
October 29, 2015 at 11:17 pm #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-monthMuch appreciated
LyseOctober 29, 2015 at 11:33 pm #527219Hi
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
LyseOctober 30, 2015 at 4:46 pm #527547Hey!
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!
YigitOctober 30, 2015 at 7:07 pm #527634Hi 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
LyseNovember 2, 2015 at 5:54 pm #528701Hi!
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.
November 2, 2015 at 10:54 pm #528863Hi 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
LyseNovember 2, 2015 at 11:15 pm #528872Hi!
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,
AndyNovember 3, 2015 at 12:16 am #528895Hi 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
LyseNovember 3, 2015 at 1:26 pm #529205Hey!
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,
AndyNovember 3, 2015 at 5:45 pm #529510Hi 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.
LyseNovember 3, 2015 at 5:56 pm #529524Hi!
please open a new ticket for a new question.
Try to add an !important into your code.
Cheers!
AndyNovember 3, 2015 at 6:28 pm #529550HI Andy.
Thank you, adding important worked!
Lyse
November 3, 2015 at 6:41 pm #529564glad 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 -
AuthorPosts
- The topic ‘MailChimp Intregration – Button size and alignment’ is closed to new replies.