Как да стилизирате този формуляр на mailchimp за мобилни устройства?

Надявам се да си добре!

Току-що добавих формуляр за регистрация към моя уебсайт за моя акаунт в MailChimp. Искам го

a) покажете текстово поле „вашият имейл“ и бутона „абониране“ на един ред b) направете същото на мобилно устройство, но преоразмерете добре c) за предпочитане е да има подложка в долната част, така че да не докосва дъното на DIV е вътре.

Ето го HTML. Уведомете ме, ако имате нужда от нещо друго!:

                        <!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//scottdaviesdesign.us15.list-manage.com/subscribe/post?u=6a0182b1b060f7307996ee031&amp;id=26cb77a478" 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="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email"></div>
                <!--</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_6a0182b1b060f7307996ee031_26cb77a478" tabindex="-1" value=""></div>
                    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="mailchimpbutton"></div>
                    </div>
                </form>
                </div>
                <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
                <!--End mc_embed_signup-->

Правих няколко опита и изобщо не мога да го направя!

Благодаря предварително! Скот


html css mailchimp
person Scott Davies    schedule 02.03.2017    source източник
comment
Направете свои собствени и просто използвайте действията и идентификаторите на формуляра на Mailchimp   -  person scoopzilla    schedule 03.03.2017
comment
Формата, която мога да управлявам, това е нейният стил за мобилни устройства, с който се боря.   -  person Scott Davies    schedule 03.03.2017

Отговори (1)


arrow_upward
0
arrow_downward

Актуализация: https://jsfiddle.net/sqmjstw0/4

Това желание ли искаш? Демо: https://jsfiddle.net/sqmjstw0/ преоразмерете прозореца, за да видите различното.

input[type=email] {
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
}

input[type=submit] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 14px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  .clear {
    display: inline-block;
  }
  .mc-field-group {
    display: inline-block;
  }
}
person noxx    schedule 02.03.2017
comment
Съжалявам за закъснението. Да, това е основно - единствената разлика е, че искам бутонът за абониране да е отляво на полето за вашия имейл адрес. - person Scott Davies; 04.03.2017
comment
Просто променете divs в html кода - вижте актуализирания отговор. - person noxx; 05.03.2017