Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX IFRAME MAILCHIMP SUBSCRIPTION FORM

Need to add a MailChimp subscription form? This tutorial will show you how to add a MailChimp subscription form on your Wix website using HTML iframe. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/6

THE ELEMENTS

The Page

HTML iframe: #html1 (embed MailChimp Form)

THE CODE

Generating iframe code

1. Go to MailChimp and signup for an account

2. Create A List: Click "Lists" > "Create List"

3. Change List Settings: Click "Settings" > "List name and campaign defaults"

4. Generate Embedded Form: Select "Signup forms" > "Embedded forms"

5. Copy & Paste HTML Code: Copy HTML code generated and paste in Wix HTML iframe

HTML iframe

<!-- 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:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    

// Add your own MailChimp form style //


</style>
<div id="mc_embed_signup">
<form action="YOUR_MAILCHIMP_URL" 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 mailing list</h2>
<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_7a8db39d09274f0cdd0ac7d6f_1eebb53310" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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-->

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP