Help with a basic email capture form

by bigmacca

Posted: 10 years ago 9 replies

WEB DESIGN

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

#basic #capture #email #form

bigmacca 10 years ago

Code for mailchimp 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&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> 
<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>

- Thanks
- 1 reply
{{ DiscussionBoard.errors[9519505].message }}
- mikea12 10 years ago
  
  Okay this jsFiddle matches your code better http://jsfiddle.net/vqtkzg3j/5/
  
  [ 1 ] Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[9519817].message }}
  
  bigmacca 10 years ago
  
  Thanks for your help Mike! You are an absolute legend!
  
  Unfortunately I still cant get it to look nice on the page.
  Not sure why... haha
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Coming Soon</title>
  <link href="tools/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="tools/jquery.min.js"></script>
  <script type="text/javascript" src="tools/cufon-yui.js"></script>
  <script type="text/javascript" src="tools/Abraham_Lincoln_400.font.js"></script>
  <script type="text/javascript" src="tools/Inspiration_400.font.js"></script>
  <script type="text/javascript" src="tools/Museo_Slab_100_400-Museo_Slab_700_400.font.js"></script>
  <script type="text/javascript">
  Cufon.replace('.logo h1', {fontFamily: 'Inspiration'});
  Cufon.replace('.logo h2', {fontFamily: 'Museo Slab 100'});
  Cufon.replace('.logo h2 span', {fontFamily: 'Abraham Lincoln'});
  Cufon.replace('p.big_text, p.small_text', {fontFamily: 'Museo Slab 100'});
  Cufon.replace('p.big_text strong, p.small_text strong', {fontFamily: 'Museo Slab 700'});
  </script>
  
  </head>
  <body>
  <div id="transy">
  </div>
  <div id="wrapper">
  <div class="logo"><h1>Barrta</h1><h2><strong class="one"></strong>Achieve More With Less<strong class="two"></strong></h2></div>
  <div class="content">
  <p class="big_text"><strong>we are working on something</strong> very interesting!</p>
  <p class="small_text"><strong>be notified.</strong> we just need your email address.</p>
  <div class="form">
  <div class="field_content">
  
  <input class="field" type="text" />
  <input class="submit" type="button" value="" />
  </div>
  </div>
  <div class="clear"></div>
  <ul class="social">
  <li class="pinterest"><a href="#"></a></li>
  <li class="instagram"><a href="#"></a></li>
  <li class="twitter"><a href="#"></a></li>
  <li class="facebook"><a href="#"></a></li>
  </ul>
  
  </div>
  </div>
  </body>
  </html>
  
  Thanks
  
  {{ DiscussionBoard.errors[9520111].message }}

mikea12

10 years ago

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

{{ DiscussionBoard.errors[9519809].message }}

mikea12 10 years ago

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!
- Thanks
{{ DiscussionBoard.errors[9521992].message }}

bigmacca

10 years ago

Hey Mate,

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

Cheers
Luke

Thanks
1 reply

{{ DiscussionBoard.errors[9522739].message }}

mikea12

10 years ago

Originally Posted by bigmacca

Hey Mate,

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

Cheers
Luke

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>

Thanks
1 reply

{{ DiscussionBoard.errors[9524024].message }}

bigmacca

10 years ago

Awesome mate that works great!
Pretty impressed with JSFiddle! Sam@gmail.com is my first subscriber

hehe

Thanks again for all your help mate, if there is anything i can do for you please let me know!

Thanks
1 reply

{{ DiscussionBoard.errors[9525875].message }}

mikea12

10 years ago

Originally Posted by bigmacca

Awesome mate that works great!
Pretty impressed with JSFiddle! Sam@gmail.com is my first subscriber

hehe

Thanks again for all your help mate, if there is anything i can do for you please let me know!

I am glad to help, I spent a long time learning to code, and I feel like I am in a position to give back, I enjoy being able to help. There were plenty of people along my journey who have helped me, and as I continue I sure hope there will be more.

If you ever need coding or UI help let me know.

Thanks

{{ DiscussionBoard.errors[9527086].message }}

Help with a basic email capture form

Trending Topics

Some interesting stats about brand comms

Fixing a massive traffic drop after rebranding

Meta AI now has Google Search results

Looking at the average screen time and socmed usage

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?