Question

我正在创建一个登录页面，我很乐意将提交按钮与MailChimp相关联。不知道如何做到这一点。检查MailChimp并将其嵌入的HTML代码插入到登录页面代码中，然后开始变得混乱。

我喜欢保持着陆页的风格;如何添加MailChimp功能以保持着陆页的样式？

以下是目标网页代码和MailChimp代码。

登陆页面代码：

<!doctype html>
<html>
<head>
<title>Veja Filme Online</title>
<link rel="stylesheet" href="style.css" />
<script src="functions.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript" 
    src="http://admin.brightcove.com/js/BrightcoveExperiences.js">
</script>
<script language="JavaScript" type="text/javascript" 
    src="http://admin.brightcove.com/js/APIModules_all.js">
</script>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name ="keywords" content="" />    
</head>
<body>
<header>
    <div class="shell">
        <div id="header-logo"><a href="#"><img src="images/logo.png"    alt="logo"></a></div>
        <div class="fb-like" data-href="http://facebook.com/leadbrite" data- send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
    </div>
</header>
<section id="content">
    <div class="shell">

        <h2>Movies Direct oferece um software inovador que permite que você assista a <span>Qualquer Filme Online e Seriados Em HD Completos!</span> </br> Assista ao vídeo abaixo para ver nosso software em ação e <span>leve de presente</span> um filminho pra hoje!
        </h2>

        <div id="steps">
            <div id="step1">
                <h3 class="title">Passo #1 <span> Veja O Video </span></h3>

        <a href="https://www.youtube.com/watch?v=Npz5pcBTFB8"><img src="images/veja_filmes_online.png" alt="juntos e misturados filme" width="500" height="286" class="aligncenter size-full wp-image-749" /></a>

            </div>
            <div id="step2">
                <div class="wrap">
                    <h3 class="title">Passo #2</h3>
                    <p>Leve seu Filme<br />
                    <span>GRATUITO!</span></p>
                    <div id="book">
                        <img src="images/trapaca.jpg" alt="" width="186" height="269" />
                    </div>
                    <p><a id="button" class="popup-link" href="#" data-reveal-id="myModal">Quero Meu Filminho>></a></p>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</section>
<footer>
    <div class="shell">
        <p class="legal"><a href="#" target="_blank" >Legal Information</a></p>
    </div>
</footer>


<!-- PopUp -->
<div class="popup-container reveal-modal" id="myModal">
    <div class="popup" id="register_popup">
        <h1>Digite Seu Email</h1>       
        <p>Nós enviaremos seu filme agora mesmo!</p>    
        <form action="#" method="post">
            <div class="row">
                <input type="text" id="email" value="Enter a Valid Email Here..." onblur="if(this.value=='') this.value='Enter a Valid Email Here...';" onfocus="if(this.value=='Enter a Valid Email Here...') this.value='';" >
            </div>  
            <input type="submit" name="" value="Enviar" class="submit" />         
        </form>
        <a class="close-reveal-modal"><img src="images/ico-close.png" /></a>
    </div>



</div>
<!-- END PopUp -->

<!-- Dynamic Like Button -->
<div id="fb-root"></div>
<script type="text/javascript">
    var sUrl = window.location;
    document.getElementById('fb').setAttribute('https://www.facebook.com/pages/Movies-Direct-Veja-Filme-Online/313935295426774?focus_composer=true&ref_type=bookmark', sUrl);
</script>
<!-- END Dynamic Like Button -->

MAILCHIMP CODE

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-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="http://vejafilmeonline.us6.list-manage.com/subscribe/post?u=4caa112c03695d368ee776414&amp;id=052f4c2450" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_4caa112c03695d368ee776414_052f4c2450" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->

如何将MailChimp API添加到HTML代码中

0 个答案: