Nearly ready to launch and trying to work out one little imperfection that we noticed. I’ve added a Constant Contact widget in the footer via embedded code and it works, looks nice except it slightly overflows the screen real estate on smaller devices. I’m probably overlooking something simple at this point and would appreciate anyone’s assistance in spotting the issue.
Hey @jdesign
Just had a quick look - the issue seems to be with the CSS Stylesheet the Constant Contact form is using. Its here at the top of the embed code:
<link rel='stylesheet' type='text/css' href='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'>
That CSS file is setting the minimum width of the form to 350px on all screens, which is causing the overflow issue.
All easily fixed by adding a few lines of CSS for smaller screens. This updated code should do the trick:
<!--Begin CTCT Sign-Up Form-->
<!-- EFD 1.0.0 [Mon Aug 17 22:29:04 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'>
<style>
@media (max-width: 767px) {
.ctct-custom-form {
font: 16px Helvetica Neue,Arial,sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-width:200px;
margin:0 auto;
box-sizing:border-box;
padding: 15px;
}
}
</style>
<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:rgba(0,0,0,0); border-radius:5px;">
<span id="success_message" style="display:none;">
<div class="ctct-thanks">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">
<!-- The following code must be included to ensure your sign-up form works properly. -->
<input data-id="ca:input" type="hidden" name="ca" value="ca90e1b2-3d71-43b9-9666-37cd5df1017c">
<input data-id="list:input" type="hidden" name="list" value="1">
<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"></label> <input data-id="Email Address:input" type="text" name="email" value="Email Address" maxlength="80" class="ctct-placeholder"></p>
<p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name"></label> <input data-id="First Name:input" type="text" name="first_name" value="First Name" maxlength="50" class="ctct-placeholder"></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: Dressed Boutique, 108 S. Woodland Blvd. Suite B, DeLand, Florida, 32720, United States, http://www.dressedboutique.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>
</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-->
Hope that helps 
1 Like
@EvanJones Thanks! I knew it must have been there somewhere but just literally overlooked it.
This also made me realize that if I moved the styling I’d added to the custom CSS in Webflow to the embedded code box that I no longer needed to use !important to make sure a couple of the changes happened.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.