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
Create an email list to store subscriber information (e.g. email address). Go to MailChimp.com then select "List" and "Create List".
Select "Settings" then "List name and campaign defaults". Customize your list with opt-in, GDPR, sender email, welcome messages and notifications.
Visitors will be able to signup for your newsletters and subscriptions on your Wix website. Subscriber information will be sent to your MailChimp list.
Create an email list to store subscriber information (e.g. email address). Go to MailChimp.com then select "List" and "Create List".
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.