lundi 2 mars 2015

HTML mailchimp form display issue in IOS

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&amp;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