I am a absolute coding newbie! I have been trying to tailor a horizontal HTML embedded mailchimp signup form into my site http://ift.tt/1C0AGyL but having display issues now. When viewing on my laptop the "Submit" button appears rectangular and flush as I need, but when viewing on IOS on my iPhone or iPad it appears pill shaped and discoloured? I have included the code below, this issue does not happen when using the original embed code however this does not suit my needs. Essentially I was just wanting a basic horizontal form but I'm left unsure now as to what half these code elements are and whether they are essential or not.
I'd really appreciate any help so I can put this to rest.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#optin { margin: 0 auto 2em; overflow: hidden; text-align: center }
#optin input {
background: #fff url(images/input.png) repeat-x bottom;
border: 1px solid #ccc;
float: left;
font-size: 14px;
margin: 0 10px 10px 0;
padding: 8px 10px;
width: 200px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd
}
#optin input.name { background: #fff no-repeat 10px center; padding-left: 10px }
#optin input.email { background: #fff url no-repeat 10px center; padding-left: 10px }
#optin input[type="submit"] {
background: #EFCC37 repeat-x top;
border: 1px solid #FBB03B;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
font-color: #FBB03B
padding: 3px 5px;
text-transform: uppercase;
width: auto
}
#optin input[type="submit"]:hover { color: #002B45 }
#optin span { background: no-repeat center left; float: left; margin-left: 15px; padding-left: 20px }
</style>
<div id="optin">
<form action="//destin8tion.us10.list-manage.com/subscribe/post?u=2353bfca04f21e38583fd2286&id=d34354b942" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" size="30″ value="Email*" name="EMAIL" placeholder="Email" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;">
<input type="text" size="30″ value="First Name*" name="FIRSTNAME" placeholder="Name" class="name" id="mce-FIRSTNAME" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;">
<input type="submit" value="Get It!" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!–End mc_embed_signup–>
Aucun commentaire:
Enregistrer un commentaire