Hello,
I would like my collector form to be smaller and I can't figure out how to update the HTML to reflect the look I want. I've already made a few small updates (like using placeholder text instead of a label). I've listed the other three changes below and hope someone can help me figure it out. Thanks in advance!
1) I am only putting 2 fields (and the submit button) in the form. I would like all 3 fields to appear across the page horizontally rather than vertically.
2) I would like for the width of the form to be constrained to 500 pixels.
3) Is there any way to change the color of the submit button to Navy Blue #140369?
Here is my current (updated) HTML. Thanks!
<!--Begin CTCT Sign-Up Form-->
<!-- EFD 1.0.0 [Sat Jan 07 21:30:28 EST 2017] -->
<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 Source Sans Pro, sans-serif; font: 1rem Source Sans Pro, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;">
<div style="color:#140466; background-color:#F5F5F5; 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;"></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="2760487c-36f9-4dcf-8711-1400ab6d955f">
<input data-id="list:input" type="hidden" name="list" value="1045683862">
<input data-id="source:input" type="hidden" name="source" value="EFD">
<input data-id="required:input" type="hidden" name="required" value="list,email,first_name">
<input data-id="url:input" type="hidden" name="url" value="">
<p data-id="Email Address
" > <input data-id="Email Address:input" type="text" name="email" placeholder="E-mail" value="" maxlength="80"></p>
<p data-id="First Name" > <input data-id="First Name:input" type="text" name="first_name" placeholder="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: Compass Yoga, 5714 Edmondson Pike, Nashville, Tennessee, 37211, United States, permission to email you. You may unsubscribe via the link found at the bottom of every email. (See our Email Privacy Policy 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-->