d
Topic
kayla Member
Posts:
96
August 13, 2010

Mailing list form in my navbar This post is outdated

My site is at:

http://makeupdeals.myshopify.com/

I'm brand new to Shopify and don't fully understand Liquid yet. The solution can be hard-coded.

I do have a background in html and javascript, but my knowledge is old and rusty. I'm familiar with css, but not terribly experienced with it. But if you tell me things involving any of these 3, I should be able to follow you.

 

What I'm trying to do is have a mailing list form that goes in the right side nav and maintains the same look and feel as the nav. So, "Join Our Mailing List" would be in white with the red background and the form field and button would be in the grey background.

 

My mailing list code currently looks like this (generated from mailchimp)

<!-- Begin MailChimp Signup Form -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
<script type="text/javascript">
// delete this script tag and use a "div.mce_inline_error{ XXX !important}" selector
// or fill this in and it will be inlined when errors are generated
var mc_custom_error_style = '';
</script>
<div id="mc_embed_signup">
<form action="http://themakeupdaily.us1.list-manage.com/subscribe/post?u=39a9c4bdaccfbe10cd1ea0f3c&amp;id=c5bb218eeb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
    <fieldset>
    <legend>Get Daily Makeup Deals</legend>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
        <div id="mce-responses">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>
        <div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn"></div>
    </fieldset>   
    <a href="#" id="mc_embed_close" class="mc_embed_close">Close</a>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
  var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://themakeupdaily.us1.list-manage.com/subscribe/post-json?u=39a9c4bdaccfbe10cd1ea0f3c&id=c5bb218eeb&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                beforeSubmit: function(){
                    mce_jQuery('#mce_tmp_error_msg').remove();
                    mce_jQuery('.datefield','#mc_embed_signup').each(
                        function(){
                            var txt = 'filled';
                            var fields = new Array();
                            var i = 0;
                            mce_jQuery(':text', this).each(
                                function(){
                                    fields[i] = this;
                                    i++;
                                });
                            mce_jQuery(':hidden', this).each(
                                function(){
                                    if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                        this.value = '';
                                    } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                        this.value = '';
                                    } else {
                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                    }
                                });
                        });
                    return mce_validator.form();
                },
                success: mce_success_cb
            };
  mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);

});
function mce_success_cb(resp){
    mce_jQuery('#mce-success-response').hide();
    mce_jQuery('#mce-error-response').hide();
    if (resp.result=="success"){
        mce_jQuery('#mce-'+resp.result+'-response').show();
        mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
        mce_jQuery('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                mce_jQuery('#mce-'+resp.result+'-response').show();
                mce_jQuery('#mce-'+resp.result+'-response').html(msg);           
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
               
                var input_id = '#mc_embed_signup';
                var f = mce_jQuery(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = mce_jQuery(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = mce_jQuery().parent(input_id).get(0);
                }
                if (f){
                    mce_jQuery(f).append(html);
                    mce_jQuery(input_id).focus();
                } else {
                    mce_jQuery('#mce-'+resp.result+'-response').show();
                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            mce_jQuery('#mce-'+resp.result+'-response').show();
            mce_jQuery('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
</script>
<!--End mc_embed_signup-->

i
Replies
Gerhard Shopify Expert www.marketbrain.net
Posts:
348
August 13, 2010

You could use MailChimp's form builder for this and just add the styling.

If you check under your Member List you can get the code from there.

MarketBrain- the leading Shopify reporting system. | http://apps.shopify.com/marketbrain | http://www.marketbrain.net | http://www.twitter.com/rocketdesk | LONDON, UNITED KINGDOM
Gerhard Shopify Expert www.marketbrain.net
Posts:
348
August 13, 2010

Oops! My fault: that is MailChimp code...

If you add IDs to the elements (such as the legend), you can then override the style using inline CSS.

MarketBrain- the leading Shopify reporting system. | http://apps.shopify.com/marketbrain | http://www.marketbrain.net | http://www.twitter.com/rocketdesk | LONDON, UNITED KINGDOM
kayla Member
Posts:
96
August 13, 2010

I kind of have it working. It's not perfect, but I guess it will do for now.

I wish my web skills weren't so utterly rusty.

Onward.

Gerhard Shopify Expert www.marketbrain.net
Posts:
348
August 14, 2010

I'll take a look at the source for you later on during the day. Hopefully I can provide you with the code that you need by tonight. :)

MarketBrain- the leading Shopify reporting system. | http://apps.shopify.com/marketbrain | http://www.marketbrain.net | http://www.twitter.com/rocketdesk | LONDON, UNITED KINGDOM
Gerhard Shopify Expert www.marketbrain.net
Posts:
348
August 14, 2010

Oh, one more thing: your page title / shop name is missing from the page. Important to have that in :P

MarketBrain- the leading Shopify reporting system. | http://apps.shopify.com/marketbrain | http://www.marketbrain.net | http://www.twitter.com/rocketdesk | LONDON, UNITED KINGDOM
kayla Member
Posts:
96
August 14, 2010

Hrmm. I took out the page title/shop name because it's now a graphical image in the header.

 

Am I overlooking something?

 

Thanks, gerhardva!