created my own subscription box in animate, how to embed the mail code into the symbols?

So i think  I am on the right track, I am trying to embed my mailchimp code into my animate site, and I decided to build my own text box and button in animate and convert them into symbols. Both text box and button or inside of a bigger symbol so that they stay in a responisive design. however when I tryin and plug in the mail code it just puts the subscription box behind my symbols. Is this because html code doesnt work in animate or am I just really stupid and am doing it all wrong? Ha probably the second part, . Any help would be great!.

Animate CC code

<div id="Stage_Center2_Subscription">

                <div id="Stage_Center2_Subscription_subscribe"></div>

                <div id="Stage_Center2_Subscription_Submittbutton">

                    <div id="Stage_Center2_Subscription_Submittbutton_Submitbutton">

                        <div id="Stage_Center2_Subscription_Submittbutton_Submitbutton_RoundRect2" ></div>

                    </div>

                    <div id="Stage_Center2_Subscription_Submittbutton_text">

                        <div id="Stage_Center2_Subscription_Submittbutton_text_Text">Join</div>

                    </div>

                </div>

                <div id="Stage_Center2_Subscription_Textbox">

                    <div id="Stage_Center2_Subscription_Textbox_textbox">

                        <div id="Stage_Center2_Subscription_Textbox_textbox_RoundRect"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

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://kandied.us3.list-manage.com/subscribe/post?u=4525b320bd81872705 a48ea05&id=4743a970b1" 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_4525b320bd81872705a48ea05_4743a970b1" 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-->