<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="div-follow"> <h4 class="lightweight jobs-rss"> <i class="fa fa-rss"></i> <a target="_blank" class="invilink" href="/jobfeeds/seventechnology">Jobs RSS Feed</a> </h4> <form class="form-inline form-follow" role="form" action="/follow_client/" method="post" style="display:none;"> <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="pnzWep0xyS0Xgi43LLvncs2jm3bac0Cq"></div> <div class="form-group"> <label class="sr-only" for="follow_email">Email address</label> <input type="email" name="email" class="form-control" id="follow_email" placeholder="Enter your Email" required="required"> <input type="hidden" name="client" required="required" value="u0dht"> </div> <button type="submit" class="btn btn-default btn-follow-submit">Submit & Follow</button> <br><span class="form-follow-error" style="display:none;"></span> </form> <a data-original-title="Get email updates for new jobs at Seven Technology." data-placement="bottom" data-toggle="tooltip" class="btn btn-default btn-follow js-btn-follow" href="#">Follow</a> </div> </div> </div>

$( function() { $( '.div-follow .btn-follow' ).on('click', function(e){ e.preventDefault(); div_follow = $(this).parents().find('.div-follow')[0]; form_follow = $(div_follow).find('.form-follow')[0]; $(this).animate({ 'width':'0', 'padding-left':'toggle', 'padding-right':'toggle' }, function(){ $(this).hide(); $(form_follow).show(); $(form_follow).find('input[type=email]').focus(); } ); }); $('[data-loading-text]').button(); $('[data-loading-text]').on('click', function(){ $(this).button('loading'); }); $('.btn-follow').tooltip(); follow_div = $('.div-follow'); follow_form = $('.form-follow'); form_follow_error = $('.form-follow-error') follow_form.submit(function(e){ $.ajax({ url: follow_form.attr('action'), type: follow_form.attr('method'), data: follow_form.serialize(), dataType: 'json' }).done(function(data){ var resp_str; resp_str = "<span class='follow-notice follow-notice-success'>Thanks! You will receive updates from " + data.company_name + " in your email</span>"; follow_div.html(resp_str); _gaq.push(['_trackEvent', 'Follow', 'success', 'seventechnology']); ga('send', 'event', { eventCategory: 'Follow', eventAction: 'success', eventLabel: 'seventechnology' }); }).fail(function(data){ //debugger; var error_dict = JSON.parse(data.responseText); var resp_str; if (error_dict.email !== undefined){ resp_str = "<span class='follow-notice follow-notice-error'>" + error_dict.email[0] + "</span>"; }else if (error_dict.client_id !== undefined) { resp_str = "<span class='follow-notice follow-notice-error'>" + error_dict.client_id[0] + "</span>"; } form_follow_error.html(resp_str); form_follow_error.show(); }); e.preventDefault(); }); });