Editing an Embedded Sign Up Form with Customization


Editing an Embedded Sign Up Form with Customization

I am trying to edit the embedded code I got from the Sign-up tools to include a group selection of either radio button or check boxes.
I need people to choose between 3 options... example: I am an  ....  option A,  option B, or option C.
Can anyone help with this?


Here is some of the code and the link to the page it's sitting on:  http://ccthofparamount.com/test-cc-signup/

 n   <!--Begin CTCT Sign-Up Form-->
<!-- EFD 1.0.0 [Tue Aug 04 16:53:23 EDT 2015] -->
<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>
       <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;">Would you like to enter and explore the CCTH Community!</h2>
           <p>Enter the form below to gain access to The Country Club Townhomes of Paramount and get the latest news, forms, and contacts.</p>
           <!-- The following code must be included to ensure your sign-up form works properly. -->
           <input data-id="ca:input" name="ca" value="REDACTED" type="hidden">
           <input data-id="list:input" name="list" value="1786791777" type="hidden">
           <input data-id="source:input" name="source" value="EFD" type="hidden">
           <input data-id="required:input" name="required" value="list,email" type="hidden">
           <input data-id="url:input" name="url" value="" type="hidden">
           <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" name="email" value="" maxlength="80" type="text"></p>
           <p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name" class="ctct-form-required">First Name</label> <input data-id="First Name:input" name="first_name" value="" maxlength="50" type="text"></p>
           <p data-id="Last Name:p" ><label data-id="Last Name:label" data-name="last_name" class="ctct-form-required">Last Name</label> <input data-id="Last Name:input" name="last_name" value="" maxlength="50" type="text"></p>
           <p data-id="Country:p" ><label data-id="Country:label" data-name="address_country">Select a country</label></p>
           <p data-id="Street Address:p" ><label data-id="Street Address:label" data-name="address_street">Street</label> <input data-id="Street Address:input" name="address_street" value="" maxlength="50" type="text"><label data-id="Unit Address:label" data-name="address_unit">Unit</label> <input data-id="Unit Address:input" name="address_unit" value="" maxlength="6" type="text"></p>
           <p data-id="City:p" ><label data-id="City:label" data-name="address_city">City</label> <input data-id="City:input" name="address_city" value="" maxlength="50" type="text"></p>
           <p data-id="State/Province:p" ><label data-id="State/Province:label" data-name="address_state">Select a state/province</label></p>
           <p data-id="Zip Code:p" ><label data-id="Zip Code:label" data-name="address_postal_code">Zip Code</label> <input data-id="Zip Code:input" name="address_postal_code" value="" maxlength="50" type="text"></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: Country Club Townhomes of Paramount - CCTH, http://ccthofparamount.com 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>




For the type of customization you're looking for, the answer depends on whether or not you want contacts who would be a member of different groups to be placed in different lists. If each of your groups would be placed in its own list, then this is something that our forms can support by default. In order to use this feature, you would simply go into the Constant Contact UI and edit the form which you're using. While editing the for, you can select multiple lists, which will cause the embed code produced to contain checkboxes for each list.


Once you have the updated embed code with checkboxes, you could make minor edits to the code to allow you to choose how those lists are presented or change the text.


If you're looking to use the options for something other than selecting lists, then it will be important to understand how you would like to use it before I could offer a solution that I know would resolve the problem.


If you have any questions for me, please feel free to ask!



Elijah G.
API Support Engineer

Hi Elijah,


I have successfully embedded a CC form here: http://visitbigskymt.com/request-official-visitor-guide/, however, while the form URL link allows me to add commas and other special characters to the form text fields, I am unable to submit these characters in the same fields via the embedded form.  Do you have any idea how to correct this issue?


Thanks in Advance,


Hi Donna,


After digging into this, it looks like there is a rule on the back-end of the embeddable form that is disallowing commas from being used. I'm planning to connect with the product manager on our side that owns this back-end to see if we can get this in the pipeline for some work. Unfortunately because of where the limitation is, there is not currently a workaround that's possible for the issue.


Hopefully I should have an update this week on what we're able to do about this!



Elijah G.
API Support Engineer
Developer Portal

View API documentation, code samples, get your API key.

Visit Page