Help with a basic email capture form

by 9 replies
11
Hey Everybody,

My design and programming skills are non existent, so I’m hoping one of you gurus may be able to point me in the right direction.

Currently my email capture form looks like this...

<div class="field_content">

<input class="field" type="text" />
<input class="submit" type="button" value="" />
</div>

So it does nothing.
I would like to somehow like to link this back to a mailchimp account. Trying to insert one of mail chimps premade forms are not working, wrecks the style of the site.

I would appreciate any help.
Cheers
Luke
#website design #basic #capture #email #form
  • Code for mailchimp form.





    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.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 overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>
    <div id="mc_embed_signup">
    <form action="//barrta.us9.list-manage.com/subscribe/post?u=8160a89f7a2b4a53492d24f93&amp;id=dcba6eebe3 " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </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;"><input type="text" name="b_8160a89f7a2b4a53492d24f93_dcba6eebe3" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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-->
    • [1] reply
  • Try this code.

    What I did was remove mailchimps defualt styles, and added your class to the wrapper. This should play nicely with your CSS if not I think it will be close.

    In case it does not I can improve it, this was just a quick strip and replace, so let me know I would be glad to help further.

    Code:
    <!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" class="field_content">
    <form action="//barrta.us9.list-manage.com/subscribe/post?u=8160a89f7a2b4a53492d24f93&amp;id=dcba6eebe3 " method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" rel="nofollow" target="_blank" novalidate>
        <div class="mc-field-group">
            <label for="mce-EMAIL">Email Address</label>
            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
        </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;">
            <input type="text" name="b_8160a89f7a2b4a53492d24f93_dcba6eebe3" tabindex="-1" value="">
        </div>
        <div class="clear">
            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
        </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  = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
    It will look something like this http://jsfiddle.net/vqtkzg3j/2/ I don't think it matches your markup. Could you possibly copy your form styles, or whole style sheet so I can add it to the fiddle and work on it?
    • [ 1 ] Thanks
  • Hey no problem, I am glad to help. The css is local and I can't see it without knowing your url. It looks like I only need tools/style.css you can just copy the CSS and paste it here Create a new fiddle - JSFiddle in the top right hand box, then hit save. After that copy the url and paste it here.

    You can do the above if you have no interest in sharing your site name. Otherwise you can just tell me the name and I will grab the CSS myself.

    If I can put the CSS with your markup I will be able to make it look proper with mailchimp!
  • Hey Mate,

    Thanks again! This should help.
    Coming Soon
    Index of /barrta.com/tools

    Cheers
    Luke
    • [1] reply
    • Here is an update, it's synced with mailchimp but I am trying to center the input, it'll take a few min of tweaking but I wanted to share the code.

      I also removed the image and used CSS to style the input IMO using an image will add more requests and slow down the page, it's better to use CSS as much as possible.

      Edit fiddle - JSFiddle

      Okay here is an update the form is centered now check it out.

      http://jsfiddle.net/j1x5yyuw/5/

      Okay cool it looks like it's working, I signed up with a dummy email "sam@gmail.com" I probabaly shouldn't have done that lol it sucks for the people with simple emails like that. You can delete that user.

      PS. Please do notice the javascript necessary, there is a link to mc-validate.js in the external resources in the left hand tab, you can add it near the closing </body> tag like this.

      Code:
      <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  = jQuery.noConflict(true);
</script>
      • [1] reply
Join the discussion

Next Topics on Trending Feed