I have this code on my WordPress site for a MailChimp optin, but for some reason the border all of a sudden disappeared, can you please see what I may be missing?
<div style="border-style: solid thin #FFFFFF">
<p style="float:left; padding: 0px 5px 0px 0px;"><img src="http://www.xxxx.com/wp-content/uploads/2017/06/photo.jpg" style="width:115px; height:auto;" class="border"></p>
<p><text
</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//xxxxxxx.us14.list-manage.com/subscribe/post?u=2b24d9a7eb0e64eed113ca92c&id=6444b29c17" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_2b24d9a7eb0e64eed113ca92c_6444b29c17" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
Border style does not accept color, nor "thin" as a value.
You want to use "border" in the context you're attempting to:
<div style="border: solid thin #FFFFFF">
hello
</div>
https://jsfiddle.net/4tm3d1jm/
Your div element might be overridden by other styles applying borders (or border: none) to all div elements in your document, though.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style?v=control
Use:
<div style= 'border: 2px solid #fff'>
Instead of your div
I hope that:
#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
Is between style tags
<style>#mc_embed_signup{background:#FFFFFF; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}</style>
If not, it won't work. Styles have to be applied in a css file, or between tags.
Additionally I want you to remember about css hierarchy (CSS Selector Hierarchy?)
Related
This code currently displays the email field and the submit button on two lines. How can I have it display on one line with enough space for an email address with no box around submit.
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://spatialinc.us4.list-manage.com/subscribe/post?u=13c45188f9b54797f1d223963&id=2fb248a1eb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just add some CSS to do what you ask to your style:
#mc_embed_signup_scroll{display:flex;}
Example:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
#mc_embed_signup_scroll {
display: flex;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://spatialinc.us4.list-manage.com/subscribe/post?u=13c45188f9b54797f1d223963&id=2fb248a1eb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
So I've been trying to implement a Mailchimp form onto my site so people can subscribe to the email newsletter. I am using Wordpress and trying to implement this via a Custom HTML Widget in my footer.
width:100%; wasn't working for me, but it will let me use it with a pixel value. Of course I want to be able to use 100% width and not have to use a pixel value. The only way I was able to use a % value is when I added position:absolute; but then the button only moves to be about 60% of whatever width I use. I am really stuck and just want the email input and the subscribe button to be at 100% width. Anyone have any suggestions for me? I feel like it's a simple fix but I have spent hours on it so far.
Here's what it looks like:
Here's the current code:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{ width:80%;
position:absolute;
clear:left;
font:14px Helvetica,Arial,sans-serif; }
#mc-embedded-subscribe {
width:100%;
position:absolute;
background-color: #94a6bf !important; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Parent div also define full width. this works for me. try this.
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
div#mc_embed_signup_scroll {
width: 100%;
}
input#mce-EMAIL {
width: 100%;
margin: 10px 0px;
}#mc-embedded-subscribe {
width: 100%;
background-color: #94a6bf !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
use style attribute on the button (style="width:100%;")
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:100%;"></div>
</div>
</form>
</div>
I'm looking to get this email subscribe form from MailChimp to appear all on one single horizontal line. Here is how it appears now:
I'd like for the wording to display how it currently is, and have the input field for email and the Subscribe button all on the same line.
Here is the code I am currently using:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#546C7C; clear:left; font:14px Helvetica,Arial,sans-serif; width:300px; color: #fff;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//Gaylebrickman.us15.list-manage.com/subscribe/post?u=48a6b6c222ef150a6559c63df&id=bf44114a3d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">For Mindfulness Events and Tips</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48a6b6c222ef150a6559c63df_bf44114a3d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just add the following CSS to your <style> tag:
#mc_embed_signup input.email,
#mc_embed_signup input.button {
display: inline-block;
}
The external stylesheet sets the display property to block for both of these elements, so this will override it and put them on the same line.
You only have to shift <div id="mc_embed_signup_scroll"> to below <label for="mce-EMAIL">For Mindfulness Events and Tips</label>.
And then you have to add this anywhere in the code:
<style>
#mc_embed_signup_scroll {display: inline}
</style>
I've created a div (greenpromobox) which an email form sits in.
There is a chunk of padding to the right, bottom and left of the div and I can't workout how to reduce it to slim down the div?
I believe it maybe in one of the pre-built Bootstrap styles.
Live example: http://185.123.96.102/~kidsdrum/moneynest.co.uk/
HTML
<div class="greenpromobox">
<div class="h2extrapadding hidden-xs hidden-sm"></div> <h2 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> quickly gain control over your finances</h2>
<p class="text-center">
<br>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&id=299de51b4e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/hand-drawn-arrow.png" id="handarrow" class="hidden-xs hidden-sm" alt="arrow"><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address" required autofocus>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_299de51b4e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Start Class Now" name="subscribe" id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just before the div with id #mc_embed_signup you have this code
<p class="text-center">
<br>
<!-- Begin MailChimp Signup Form -->
</p>
Which basically does nothing, but adds empty space. As I see you reduced this space by doing things like
#mc_embed_signup input.email {
position: relative;
top: -35px;
}
and
.btn-lg {
position: relative;
top: -37px;
}
And this is why you have "padding" at the bottom. It's not padding, it's the space where buttons located. So:
Remove html code we don't need (or display: none it, whatever)
Remove css I've placed here
Put normal bottom padding you want
The problem came from your CSS.
First, remove the width:70%; into your CSS File
After you can add this :
width:auto;
padding:0 15px 15px 15px;
display:table;
The result must be like this :
CSS
.greenpromobox {
display: table;
padding: 15px;
background-color: green;
padding-top: 1px;
margin-top: 25px;
width: auto;
border-radius: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Hope this answer will help you :)
Richie
I'm trying to style the superslim Mailchimp form to go onto our homepage. I've created a new div to wrap it all in, and copied and pasted the code in and currently it appears below:
<div class="mailChimp">
****Copied Code****
<form action="blahblahblah" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email Address" required>
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded- subscribe" class="button">
</div>
Then in my CSS:
#mailChimp{
max-width:245px;
margin-left: 55px
}
#mce-EMAIL{
margin-bottom: 5px;
margin-top: 5px;
width: 95%
}
#mc-embedded-subscribe {
margin-bottom: 5px;
margin-top: 5px;
}
Now, this seems to have the correct IDs attached as it appears correctly in Dreamweaver. However, when I upload the files to the server then none of the CSS styling is applied.
None of the css is applying, which is frustrating! Even the div ID mailChimp isn't. I can't even find it in the inspected element.
Am I selecting the ID's incorrectly?
The main confusion comes from the fact that It appears correctly in Dreamweaver which is reading from the style sheet, but not when I upload both files live.
'mailChimp' is a class, so it starts with a . in the css not a #:
.mailChimp{
max-width:245px;
margin-left: 55px;
}
The margin-left had not been closed with a ;. Also, in mce-email, you have not closed the width tab with a ;.
In your css, you have '#mc-embedded-subscribe' but in the HTML is it written with a big gap between embedded- and subscribe.