Mailchimp mailing list forms

1. Go to the code editor and choose News letter > Sign up form page in the drop down at the top.
2. Click the button Load example to open the file dialog.
   * If you want to use the standard MailChimp styling and validation, then select the template mailchimpform1.txt
   * If you want to style the form, use the Infradox XS form validation and post the form without leaving your website, then select mailchimpform2.txt
3. Click Use code at the bottom of the dialog.
4. The default code skeleton has XS tags that will insert the page header and menu and the footer. It will also make sure that any custom CSS and/or Script is loaded. You can change the default code as required.
5. In a new browser window, go to the MailChimp website and create a Sign up form.
   Read the article Create sign up forms and response e-mails on their knowledge base pages for further information.
6. Copy the generated form code.
7. In the code editor in your website, paste the form code that you copied in the previous step where you see the line <!– insert your mail form here –>.
8. Save your code with the Save button at the top of the editor.
9. You can now test your form by going to www.yourwebsite.com/subscribe. (replace www.yourwebsite.com with your own website domain). It is recommended to test the form in a separate window so that you make changes in one window and test the results in another.
10. When you are done testing you can add a link to the form on other pages. For instance in your page footer or in the menu and so on. The link URL that you should use is /subscribe.- without your website name in front of it.

If you stop here, the styling and the form validation is done by the MailChimp functions as you have configured on their servers. When one submits the page, he/she will be taken to a page on the MailChimp website with further instructions. If you want to take care of form validation and feedback yourself, without the user leaving your website, then follow the next steps.

1. From the lines that you just pasted, remove the lines that are above
   <div id=”mc_embed_signup”>
   so that your form code starts with the line
   <div id=”mc_embed_signup”>
2. At the bottom of what you just pasted, remove the line that starts with
   <script type=’text/javascript’
   and any other lines that are underneath it.
3. Make sure that the code contains the div “xs_responsemessages”.
   The Infradox XS script will look for this div and if it exists it will automatically change the behaviour of the form.
4. Save your code.

Adding custom variables to the MailChimp sign up form

MailChimp allows you to add hidden variables to the form data that is posted to their servers when a user signs up for your mailing list. If for example you want the user account id to be included, then you can do so by adding this to the form action URL. This URL is in the form code that you have pasted in the code edtior. It ends with id= followed by a unique id. Add your variables after this id.

For example:

<form action=”//somelist.us8.list-manage.com/subscribe/post?u=37c2257a806ba99ba0b1498a0&id=6a9f808926″

Add the user account id to the data:

<form action=”//somelist.us8.list-manage.com/subscribe/post?u=37c2257a806ba99ba0b1498a0&id=6a9f808926&userid=<?xs session(‘userid’) ?>”

For more information about infradox XS tags and variables, read the article Infradox XS Customisation.

Using Infradox XS tags and functions for localization of the MailChimp form

If you want the text that is used in the form to be displayed in the selected user interface language, then you can use the Infradox functions to achieve this.

For example, replace:

<h2>Subscribe to our mailing list</h2>

with

<h2></h2>

Example code for MailChimp popup

Below is a complete example (for English and French) that you can paste into the code editor. The CSS is included and you can leave it in the file although you may want to consider moving it to the CSS file in the code editor. You’ll have to change the form action URL as described above.

<style>
    #mc_embed_signup {<br />
        background-color:white;<br />
        width:500px;<br />
        height:auto;<br />
        padding:40px;<br />
	    -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);<br />
	    -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);<br />
   	    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);<br />
    }<br />
    #mc_embed_signup h2 {<br />
        font-size:2.00em;<br />
    }<br />
    #mc_embed_signup .mc-field-group {<br />
        clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;<br />
    }<br />
    #mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}<br />
    #mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;font-size:1.00em;border:1px solid #999; }<br />
    #mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}    </p>
<p>    #mc_embed_signup .mc-field-group input.error {border:1px solid red}<br />
    #mc_embed_signup .mc-field-group input.ok {border:1px solid #999}</p>
<p>    div#mce-responses .response {margin:10px 0 10px 0};<br />
    div#mce-success-response {font-size:1.20em;color:green};<br />
    div#mce-error-response {font-size:1.20em;color:red};</p>
</style><!-- post to post-json -->
<!-- add &c=? -->
<!-- post > get -->
<div id="xs_responsemessages" style="display: none;">
<div class="isrequired"></div>
<div class="success"></div>
</div>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="//mywebsitename.us6.list-manage.com/subscribe/post?u=0122fb5ddb&id=ds8sjjwed5" method="get" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<h2></h2>
 
<div class="mc-field-group"><label for="mce-EMAIL"><!--?xs print('1:E-mail address','3:Adresse e-mail') ?--><span class="asterisk">*</span></label>
<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" /></div>
<div id="mce-responses" class="clear">
<div id="mce-error-response" class="response" style="display: none;"></div>
<div id="mce-success-response" class="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;"><input tabindex="-1" name="b_0826fb5ddb_d4559d9ed5" type="text" value="" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" style="padding: 5px; font-size: 1.2em;" name="subscribe" type="button" value="<?xs print('1:Subscribe','3:S'inscrire') ?>" /></div>
</div>
</form></div>

Note that values used in the print tag can not have commas, use &#44; instead, like so:

<!--?xs print('1:For interesting updates from us&amp;#44; simply enter your e-mail address below','3:Pour être informé(e) des dernières mises à jour&amp;#44; veuillez simplement indiquer votre adresse email ci-dessous') ?-->