• میل چیمپ در بوت استرپ

میل چیمپ در بوت استرپ

میل چیمپ یک ابزار عالی برای ایمیل مارکتینگ می باشد و از تمامی سیستم های مدیریتی موجود در دنیابی اینترنت پشتیبانی می کند، همچنین فرم های ثبت نام جاسازی شده برای وب سایت شما را پشتیبانی می کند. میل چیمپ یک کد ساده HTML را ارائه می دهد، اما متاسفانه، چارچوب Bootstrap را پشتیبانی نمی کند.

در این مقاله شما خواهید آموخت که چگونه یک فرم ثبت نام Mailchimp را در وب سایت خود جاسازی کنید و سپس به راحتی آن را به یک نشانه بوت استرپ تبدیل کرده و آن را ادغام کنید.

خوب شروع کنیم…

1.در قدم اول شما یک لیست درست کنید.

2.بعد از ساخت لیست خود برروی Signup forms کلیک کنید.

3.مانند تصویر زیر embedded forms انتخاب کنید.

Signup forms

4.در ادامه قسمت Unstyled انتخاب کنید و کدها را کپی کنید.

<!-- Begin MailChimp Signup Form -->



<div id="mc_embed_signup">



<form action="//pishtaz.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&id=fc7b4ce646" 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="indicates-required"><span class="asterisk">*</span> indicates required</div>





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





<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>





<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</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_97f1bc02efa56031b67a2b00f_fc7b4ce646" 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-->

5.پس از وارد کردن کد از میل چیمپ به صفحه HTML خود، کد فرم ممکن است مانند این باشد:

کدهای میل چیمپ شامل بسیاری از کلاس ها و عناصر منسوخ شده است، بنابراین ما فقط باید برخی از ویژگی های فرم (عمل، روش)، برچسب ها، ورودی ها و “anti-spam” div را از فرم Bootstrap خودمان منتقل کنیم (Div که از Viewport پنهان است و حاوی یک ورودی است عنصر)

برای نشان دادن تغییرات لازم، این کد را به دو فرم بوت استرپ تبدیل خواهم کرد،تنها شامل فیلد آدرس ایمیل و همچنین فیلدهای نام و نام خانوادگی است.

6.فرم ثبت نام ساده خبرنامه

خبرنامه




<form>



<div class="input-group">
        <input type="email" class="form-control" required="required">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="fa fa-send"></i></button>
        </span>
    </div>



</form>



پس از کپی کردن کدها از میل چیمپ و بخش ضد هرزنامه، نتیجه خواهد شد:




<form action="//pishtaz.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&id=fc7b4ce646" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">



<div class="input-group">
        <input type="email" value="" name="EMAIL" id="mce-EMAIL" required="required" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="fa fa-send"></i> </button>
        </span>
    </div>





<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>



</form>



7.یک فرم کامل




<form action="//pishtaz.us10.list-manage.com/subscribe/post?u=97f1bc02efa56031b67a2b00f&id=fc7b4ce646" method="post" target="_blank">



<div class="form-group">
        <label for="mce-FNAME">First Name</label>
        <input type="text" class="form-control" name="FNAME" id="mce-FNAME">
    </div>





<div class="form-group">
        <label for="mce-LNAME">Last Name</label>
        <input type="text" class="form-control" name="LNAME" id="mce-LNAME">
    </div>





<div class="form-group">
        <label for="mce-EMAIL">Email Address</label>
        <input type="email" class="form-control" required="required" name="EMAIL" id="mce-EMAIL">
    </div>



    <button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Subscribe</button>



<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_97f1bc02efa56031b67a2b00f_fc7b4ce646" tabindex="-1" value=""></div>



</form>



© کپی رایت 2018 - تمامی حقوق این سایت متعلق به "رایان رسانه ایرسا" است.