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

Question

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=4525b320bd81872705a48ea05&id=4743a970b 1" 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-->

Answer 1

Hi, Kyle-
What's happening is that you're inserting static HTML into the base HTML of your current project.  We treat any third party static HTML as underneath all managed elements.  You can find out whether or not it's being treated as static by hovering over the element in the elements panel:
One thing you can do is to dynamically insert your mailchimp code into a div by changing the html() property of that div using jQuery.  So, something like this:
In compositionReady:
sym.$("myDiv").html("INSERT MY FORM CODE HERE");
Hope that points you in the right direction!
-Elaine