Mail Chimp Custom Form

Question

Я новичок в этом, я пытаюсь создать пользовательскую форму для регистрации шимпанзе.

Я хочу, чтобы это выглядело как этот http://imgur.com/YbwSzA2

Я начал кодирования формы

#mce-FNAME { 
 
\t margin: 10px; 
 
\t float: left; 
 
\t width: 50%; 
 
} 
 
#mce-LNAME { 
 
\t margin: 10px; 
 
\t float: left; 
 
\t width: 50%; 
 
} 
 
#mce-email { 
 
\t float: left; 
 
\t margin: 10px; 
 
\t width: 80%; 
 
} 
 

 
#mc_embed_signup .button { 
 
\t width:20%; 
 
\t float:left; 
 
}

<!-- Begin MailChimp Signup Form --> 
 
<div id="mc_embed_signup"> 
 
<form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&amp;id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
 
    <div id="mc_embed_signup_scroll"> 
 
\t <h2>Subscribe to our newsletter</h2> 
 
<div class="indicates-required"><span class="asterisk"></span></div> 
 
<div class="mc-field-group"> 
 
\t <label for="mce-FNAME">First Name <span class="asterisk"></span> 
 
</label> 
 
\t <input type="text" value="" name="FNAME" class="required" id="mce-FNAME"> 
 
</div> 
 
<div class="mc-field-group"> 
 
\t <label for="mce-LNAME">Last Name <span class="asterisk"></span> 
 
</label> 
 
\t <input type="text" value="" name="LNAME" class="required" id="mce-LNAME"> 
 
</div> 
 
<div class="mc-field-group"> 
 
\t <label for="mce-EMAIL">Email Address <span class="asterisk"></span> 
 
</label> 
 
\t <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
 
</div> 
 
\t <div id="mce-responses" class="clear"> 
 
\t \t <div class="response" id="mce-error-response" style="display:none"></div> 
 
\t \t <div class="response" id="mce-success-response" style="display:none"></div> 
 
\t </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;"><input type="text" name="b_f3759cd613780ba95cc76028b_0f3ca35b8b" 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-->

Если у кого есть какие-либо предложения или изменения, что было бы здорово.

Answer 1

Получил свободу изменять свой код и селекторы, если у вас есть какие-либо вопросы, не стесняйтесь спрашивать, но это очень понятно.

PS: Советы, классы используют для укладки CSS и резервных идентификаторы JavaScript

.input { 
    margin: 10px 0; 
    float: left; 
    width: 100%; 
    line-height: 25px; 
    border: 4px solid #000; 
    border-radius: 10px; 
} 

.input:focus, 
.button:focus { 
    outline: none; 
} 
.button { 
    margin-top: 34px; 
    display: block; 
    width: 100%; 
    background: transparent; 
    border: 4px solid #000; 
    padding: 4px; 
    height: 35px; 
    font-size: 15px; 
    border-radius: 10px; 
    outline: none; 
    -webkit-transition: all 0.35s ease; 
    -moz-transition: all 0.35s ease; 
    -o-transition: all 0.35s ease; 
    transition: all 0.35s ease; 
} 

.button:hover { 
    cursor: pointer; 
    background: #000; 
    color: #fff; 
} 

.mc_embed_signup { 
    width: 100%; 
    max-width: 580px; 
} 

.mc-field-group label { 
    display: block; 
    font-size: 22px; 
} 

.row { 
    display: block; 
    float: left; 
    width: 100%; 
} 

.col-lg-6, 
.col-lg-8, 
.col-lg-4 { 
    float: left; 
    padding: 12px; 
    box-sizing: border-box; 
} 

.col-lg-6 { 
    width: 50%; 
} 

.col-lg-8 { 
    width: 80%; 
} 

.col-lg-4 { 
    width: 20%; 
} 


<div id="mc_embed_signup" class="mc_embed_signup"> 
    <form action="//kayakinguk.us8.list-manage.com/subscribe/post?u=f3759cd613780ba95cc76028b&amp;id=0f3ca35b8b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
     <div id="mc_embed_signup_scroll"> 

      <h2>Subscribe to our newsletter</h2> 

      <div class="row"> 
       <div class="mc-field-group col-lg-6"> 
        <label for="mce-FNAME">First Name:<span class="asterisk"></span></label> 
        <input type="text" value="" name="FNAME" class="input required" id="mce-FNAME"> 
       </div> 
       <div class="mc-field-group col-lg-6"> 
        <label for="mce-LNAME">Last Name:<span class="asterisk"></span></label> 
        <input type="text" value="" name="LNAME" class="input required" id="mce-LNAME"> 
       </div> 
      </div><!--row--> 


      <div class="row"> 

       <div class="mc-field-group col-lg-8"> 
        <label class="label" for="mce-EMAIL">Email Address<span class="asterisk"></span></label> 
        <input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL"> 
       </div> 

       <div class="col-lg-4"> 
        <input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button"> 
       </div> 

      </div><!--row--> 


      <div class="row" class="hidden"> 
       <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> 
       <div style="position: absolute; left: -5000px;"> 
        <input type="text" name="b_f3759cd613780ba95cc76028b_0f3ca35b8b" tabindex="-1" value=""> 
       </div> 
      </div><!--row--> 



     </div><!--mc_embed_signup_scroll--> 
    </form> 
</div><!--mc_embed_signup--> 

Результат:

Good Luck, Michel