0

The submit button on my mailchimp sign-up form looks like this on a computer:

Desired button look

Which is what I want. However, it looks like this one a mobile device:

Undesired button look

This is all I could find on the topic, but when I tried adding that css snippet to my code it didn't work.

Here's the code for the embedded form:

    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
 #mc_embed_signup{background:#F7F7F7; 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="//melbournetranspersonalcounselling.us13.list-manage.com/subscribe/post?u=1f8cb29351b8590d963ade17b&amp;id=5c7aecb295" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="mc-field-group">
 <input type="text" value="" placeholder="First Name" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
 <input type="email" value="" placeholder="Email Address" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
 <div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
 </div>    <!-- 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_1f8cb29351b8590d963ade17b_5c7aecb295" tabindex="-1" value=""></div>
    <div class="show"><input type="submit" value="Yes please!" style="background:#47C0B0" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

Hoping someone can help, thanks!

Community
  • 1
  • 1
Auður
  • 11
  • 1

1 Answers1

6

You need to add:

-webkit-appearance: none

property for your button and style it as you wish

Check here for other non-webkit browsers.

Alex Belov
  • 61
  • 4
  • Thanks for that: could you tell me where I should add that in the code? I tried a few different spots but it didn't have any effect. – Auður Jul 11 '16 at 11:09
  • you need to find class or id of your button and apply css property for it. for example: .button {-webkit-appearance: none;} – Alex Belov Aug 27 '16 at 15:55
  • Thanks! but to my knowledge I don't have the ability to do that (am using Wix). I was hoping there's a way to achieve this by altering the code that I included above - do you know if that's possible? – Auður Aug 30 '16 at 09:20