1 Reply Latest reply on Sep 27, 2016 1:47 PM by PrabhakarKumar

    Constant Contact Sign up form Embed

    charlesg83966505 Level 1

      Hello,

       

      I am trying to embed a Constant Contact Sign-Up form. Unfortunately when I paste the code into a Muse page, the code is appearing in a text box rather than the generated sign-up form.

       

      For example this code works on the site:

       

      <iframe width="560" height="315" src="https://www.youtube.com/embed/QizxrkNt6Dg" frameborder="0" allowfullscreen></iframe>

       

      Thank you for your help!

       

      Here is the site: Home http://o2d0.businesscatalyst.com/index.htmland here is the Constant Contact code:

       

      <!--Begin CTCT Sign-Up Form-->

      <!-- EFD 1.0.0 [Tue Sep 27 15:34:52 EDT 2016] -->

      <link rel='stylesheet' type='text/css' href='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'>

      <div class="ctct-embed-signup" style="font: 16px Helvetica Neue, Arial, sans-serif; font: 1rem Helvetica Neue, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;">

         <div style="color:#5b5b5b; background-color:#e8e8e8; border-radius:5px;">

             <span id="success_message" style="display:none;">

                 <div style="text-align:center;">Thanks for signing up!</div>

             </span>

             <form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">

                 <h2 style="margin:0;">Sign up to stay in touch!</h2>

                 <p></p>

                 <!-- The following code must be included to ensure your sign-up form works properly. -->

                 <input data-id="ca:input" type="hidden" name="ca" value="07a1406e-6a45-426a-9221-2add7f98fd28">

                 <input data-id="list:input" type="hidden" name="list" value="1140238518">

                 <input data-id="source:input" type="hidden" name="source" value="EFD">

                 <input data-id="required:input" type="hidden" name="required" value="list,email">

                 <input data-id="url:input" type="hidden" name="url" value="">

                 <p data-id="Email Address:p" ><label data-id="Email Address:label" data-name="email" class="ctct-form-required">Email Address</label> <input data-id="Email Address:input" type="text" name="email" value="" maxlength="80"></p>

                 <p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name">First Name</label> <input data-id="First Name:input" type="text" name="first_name" value="" maxlength="50"></p>

                 <button type="submit" class="Button ctct-button Button--block Button-secondary" data-enabled="enabled">Sign Up</button>

              <div><p class="ctct-form-footer">By submitting this form, you are granting: DOWL, 4041 B Street, Anchorage, Alaska, 99503, United States,  permission to email you. You may unsubscribe via the link found at the bottom of every email.  (See our <a href="http://www.constantcontact.com/legal/privacy-statement" target="_blank">Email Privacy Policy</a> for details.) Emails are serviced by Constant Contact.</p></div>

             </form>

         </div>

      </div>

      <script type='text/javascript'>

         var localizedErrMap = {};

         localizedErrMap['required'] = 'This field is required.';

         localizedErrMap['ca'] = 'An unexpected error occurred while attempting to send email.';

         localizedErrMap['email'] = 'Please enter your email address in name@email.com format.';

         localizedErrMap['birthday'] = 'Please enter birthday in MM/DD format.';

         localizedErrMap['anniversary'] = 'Please enter anniversary in MM/DD/YYYY format.';

         localizedErrMap['custom_date'] = 'Please enter this date in MM/DD/YYYY format.';

         localizedErrMap['list'] = 'Please select at least one email list.';

         localizedErrMap['generic'] = 'This field is invalid.';

         localizedErrMap['shared'] = 'Sorry, we could not complete your sign-up. Please contact us to resolve this.';

         localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';

        localizedErrMap['state_province'] = 'Select a state/province';

         localizedErrMap['selectcountry'] = 'Select a country';

         var postURL = 'https://visitor2.constantcontact.com/api/signup';

      </script>

      <script type='text/javascript' src='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form.js'></script>

      <!--End CTCT Sign-Up Form-->

        • 1. Re: Constant Contact Sign up form Embed
          PrabhakarKumar Adobe Employee

          Hi Charles,

           

          I checked the codes provide, I am sure it will work with Muse.

          Now,

           

          "<iframe width="560" height="315" src="https://www.youtube.com/embed/QizxrkNt6Dg" frameborder="0" allowfullscreen></iframe>"

          This code is working as this is plain HTML.

           

          The code which you provided for the form is a mix of CSS, HTML and Java Script, so you need to follow the basic structure of HTML.

          When we write HTML the css if linked  externally it should be in head section of the code.

          so open Muse and add the css code in the head section

          Go to Muse , go to your page property and paste the css head code in the metadata tab.

          css.gif

           

          Now paste the rest of the code in the Insert HTML tab.

          html.gif

           

          Preview the page, it will work.

           

          Code which needs to be in head section:

           

          <link rel='stylesheet' type='text/css' href='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'>

           

          Code which needs to be in Insert HTML Box:

           

          <div class="ctct-embed-signup" style="font: 16px Helvetica Neue, Arial, sans-serif; font: 1rem Helvetica Neue, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;">

             <div style="color:#5b5b5b; background-color:#e8e8e8; border-radius:5px;">

                 <span id="success_message" style="display:none;">

                     <div style="text-align:center;">Thanks for signing up!</div>

                 </span>

                 <form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">

                     <h2 style="margin:0;">Sign up to stay in touch!</h2>

                     <p></p>

                     <!-- The following code must be included to ensure your sign-up form works properly. -->

                     <input data-id="ca:input" type="hidden" name="ca" value="07a1406e-6a45-426a-9221-2add7f98fd28">

                     <input data-id="list:input" type="hidden" name="list" value="1140238518">

                     <input data-id="source:input" type="hidden" name="source" value="EFD">

                     <input data-id="required:input" type="hidden" name="required" value="list,email">

                     <input data-id="url:input" type="hidden" name="url" value="">

                     <p data-id="Email Address:p" ><label data-id="Email Address:label" data-name="email" class="ctct-form-required">Email Address</label> <input data-id="Email Address:input" type="text" name="email" value="" maxlength="80"></p>

                     <p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name">First Name</label> <input data-id="First Name:input" type="text" name="first_name" value="" maxlength="50"></p>

                     <button type="submit" class="Button ctct-button Button--block Button-secondary" data-enabled="enabled">Sign Up</button>

                  <div><p class="ctct-form-footer">By submitting this form, you are granting: DOWL, 4041 B Street, Anchorage, Alaska, 99503, United States,  permission to email you. You may unsubscribe via the link found at the bottom of every email.  (See our <a href="http://www.constantcontact.com/legal/privacy-statement" target="_blank">Email Privacy Policy</a> for details.) Emails are serviced by Constant Contact.</p></div>

                 </form>

             </div>

          </div>

          <script type='text/javascript'>

             var localizedErrMap = {};

             localizedErrMap['required'] = 'This field is required.';

             localizedErrMap['ca'] = 'An unexpected error occurred while attempting to send email.';

             localizedErrMap['email'] = 'Please enter your email address in name@email.com format.';

             localizedErrMap['birthday'] = 'Please enter birthday in MM/DD format.';

             localizedErrMap['anniversary'] = 'Please enter anniversary in MM/DD/YYYY format.';

             localizedErrMap['custom_date'] = 'Please enter this date in MM/DD/YYYY format.';

             localizedErrMap['list'] = 'Please select at least one email list.';

             localizedErrMap['generic'] = 'This field is invalid.';

             localizedErrMap['shared'] = 'Sorry, we could not complete your sign-up. Please contact us to resolve this.';

             localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';

            localizedErrMap['state_province'] = 'Select a state/province';

             localizedErrMap['selectcountry'] = 'Select a country';

             var postURL = 'https://visitor2.constantcontact.com/api/signup';

          </script>

          <script type='text/javascript' src='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form.js'></script>

           

           

           

           

          Hope this will work!

           

          Thanks

          Prabhakar Kumar