Jump to content

Search the Community

Showing results for tags 'newsletter-block'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I am trying to resize the input boxes for the newsletter form. I added code in the footer section to take the last name out of the form. I am new to this so can you let me know exactly where I will need to add the new code?
  2. Site URL: https://wrasse-buffalo-6zlc.squarespace.com/ Hi i want to make my newsletter sign up form align left in the footer Can anyone help me with this custom code? Additionally I want to make the padding around the box less- in particular below the subscribe and box so there is no so much space. On mobile it makes the box and button on two lines - is there any way to make it smaller on mobile to fit one line?
  3. I am attempting to edit the text colors, background color and sizes of the text entry fields in a newsletter block. I've not been able to pinpoint what the code should target, and a few preliminary attempts did not yield anything. Does anyone have suggestions as to do this in CSS? Specifically I am attempting to decrease the size of the boxes, and alter the text color and background from the default white to grey.
  4. I'm looking to reformat the newsletter block & button in a specific section on my site (ie. not necessarily in the footer).... Photo attached of the design in XD that i'm trying to replicate. I can't work it out for the life of me.
  5. Hi everyone! I'm looking for CSS to adjust my newsletter block in a footer. I would like it to be almost seamless and small. I've attached a couple examples of what sort of design I'm after. First and most preferred option - field for entering an email address is underlined with the text "Join our Newsletter". sign up button is a simple arrow next to the email field. Example with a dark background attached (used for locked screen). Alternatively second option is to make a button called Join our Newsletter and field next to it for entering an email address. Very compact and minimal sizing. Example on the light background attached. I've tried dozens of codes by now but it's still too chunky. Would it be possible to edit newsletter block this much on squarespace?
  6. Site URL: https://lordsuni.squarespace.com/ Site pw: lords I would like to change the button in the newsletter block to look like the screenshot attached. Just so the arrow is seen and not the background button. Pls help. Thank you.
  7. Hello! So, I have a Squarespace website ( ana-uribe.com ) with: A) a Squarespace promotional pop up connected to a Mailchimp audience B) a Squarespace newsletter block in the footer of the website connected with the same Mainchimp audience. C ) several embedded Mailchimp forms connected with the same Mailchimp audience. Is any of this going to cause troubleshooting issues? In Squarespace's user guide, it says: Connect multiple blocks to Mailchimp Connecting multiple forms to a single Mailchimp audience can cause several issues, including dropped form submission data and disconnection from Mailchimp. We recommend using a separate Mailchimp audience for each form or newsletter block on your site when possible. If you choose to connect multiple blocks to a single Mailchimp audience, each block must be absolutely identical. Any discrepancies between type, name, or arrangement of fields between blocks will create errors. To fix issues with multiple blocks connected to a Mailchimp audience: Reset the Mailchimp connection for each block. Check each block to confirm all fields are identical. Reconnect Mailchimp in the Storage tab. Connect multiple Mailchimp accounts While you can only connect one Mailchimp audience per storage area of form blocks or newsletter blocks, you can connect multiple Mailchimp accounts to different forms throughout your site. For example, one newsletter block can connect to an audience in one Mailchimp account, and another newsletter block can connect to an audience in a different Mailchimp account. This doesn't cause conflicts the way connecting to the same audience does because each form storage works independently of other forms. Many thanks 🙂 Dan
  8. I've created a newsletter block on my website and chosen Mailchimp as my storage option and chosen double opt-in. I've disconnected Squarespace for email campaigns. I may be missing a step because as I'm testing this feature, I receive a generic email (non branded like I set up in Mailchimp) asking me to confirm my opt-in to the newsletter. Once I confirm opt-in, I receive a thanks confirmation but nothing is populating in Mailchimp on the back-end (no contact, first name, last name, or email address). Would love help here or to know if others are experiencing this same thing.
  9. Hi, I'm struggling to get my middle footer to look tidy in mobile; Ideally i'd prefer the newsletter sign up to come first, then the collection of logos (Houzz, Declares, SBID, diversity). Currently the logos come first, and fill the whole width on mobile. It would be great to have them sitting in a row of 4, but a 2 x 2 would also work.
  10. https://www.ana-uribe.com password: hello Hi! I am trying to change the newsletter block alignment to "left" in mobile view only. I don't know how to make the alignment "right" in desktop view and "left" in mobile view. Can someone please help? I tried using some custom CSS to make it all align left in mobile view, but I could only get the description text "Sign up for my newsletter" to align "left" To do this I used: Anyway, I need the whole newsletter block to align left in mobile view. Can anyone help? Much appreciated, Dan
  11. Hi, I'm trying to change the Newsletter block submit button style from underline (currently the Primary button style used globally) to an outline or solid rectangle style. The site is 7.1. Thank you for any help!
  12. Hi there, My website: www.eyzhn.co In my footer section (on all pages): (1) I would like to make the footer newsletter form button the same height as the form field elements. When "inspecting" my page I am able to do that by adjusting the padding from 1.2rem to 1rem. However when I add this code to CSS nothing happens. .newsletter-form-button { width: 100% !important; padding: 1rem !important; margin: 0px !important; } (2) I would like to fix the margin above and below the "subscribe" and descriptive text so that it aligns with the lists next to it on the left. Here is my custom footer code for reference. /* Hover and active link colour */ footer a {text-decoration: none !important;} section[data-section-id="63384be20590b6496ef20a8a"] a:hover * {color: #6c988d !important;}#block-yui_3_17_2_1_1668132221218_478394 * {padding: 10;} /* Center lists on mobile */ @media screen and (max-width: 640px) {footer p { text-align: center;}} /* Center newsletter title on mobile */ @media screen and (max-width: 640px) {#block-yui_3_17_2_1_1668132221218_478394 * {text-align: center;}} /* Newsletter form input fields */ .newsletter-form-body {input.newsletter-form-field-element {padding: .8rem !important; border-radius: 200px; text-align: center;}} /* Newsletter field & button width */ .newsletter-form-fields-wrapper.form-fields {width: 100% !important; display: block !important;} .newsletter-form-fields-wrapper.form-fields>* {max-width: 100% !important;} .newsletter-form-field-wrapper {width: 100% !important; max-width: 100% !important;} .newsletter-form-button {width: 100% !important; padding: 1rem !important; margin: 0px !important;} /* Newsletter margins */ .newsletter-form-body>div {margin-top: 0 !important;} .newsletter-form-footnote {display: none;} Thanks!
  13. Hello Squarespace community! Is there a way to change font colour and box colour of the "E-Mail Address is required." field? I'd like to make it more suiting to my website's vibe. Thanks heaps in advance! 🙂
  14. Hi there, I'm trying to get the padding on this grey box to be smaller. Doesn't seem to be a site style, and I've tried lots of different code injections, none of which work, and I can't figure out why... am I missing something really obvious!? It's the bits in red I'd like to reduce the height of. On another note, whilst I'm here, is there a way to make that 'sign up' button narrower!? Whenever I enlarge the text in it, the whole thing enlarges... URL is https://www.janemutiny.com/subscribe Any advice much appreciated, Jane
  15. Site URL: https://boldhumansco.com/ Hi all! I have a newsletter block at my footer and have added a reCAPTCHA checkbox to it. I'd like it to all be in one line rather than being bulky and the reCAPTCHA checkbox being randomly placed. Pretty much, I'd just like everything, including the reCAPTCHA checkbox to be in a single line. I only have the form title ("Subscribe to our newsletter"), an email textfield/input, submit button (Join Us), and a reCAPTCHA checkbox. If you can provide code that would make it all one line, it would be much appreciated! Thanks in advance! If possible, it would be even better if you can provide code that actually hides the reCAPTCHA checkbox until the "Join Us" button is clicked. But if that's not possible, either is fine, this is just preferred! Thanks! The link is : https://boldhumansco.com/ Password: baldisbold
  16. Tearing my hair out over this issue. I have configured my mailing lists appropriately, tested the form on the editor (which did successfully send me an email), but on the live site the block is completely missing. There are no error messages, and in the "storage" tab, it even shows "disconnect" as an option at the bottom, implying it is connected properly. I have no custom CSS or any non-squarespace-editor code whatsoever. Anyone else run into this issue? People who bought from me are successfully showing up in my list, so I know it's at least configured to accept new entries. The screencap below is what I see on the editor, but if you navigate to the live site, you'll see it's just a blank background image.
  17. Site URL: https://www.firstandfirstconsulting.com/ Hey! I am trying to edit my newsletter block in the footer so it is not so huge. I've found how to make the "sign up" button smaller, but I also want to make the email box smaller to be the same size as well. I also want to decrease the amount of space between the button and the email box so that when they stack they arent so far apart. Open to other suggestions on how to format a newsletter block in the footer.
  18. I am using some custom code for the signup button in the footer. For some reason, I can’t get the pink to go all the way to the right and the SUBSCRIBE to be in the center of that pink area. Code below. I can’t find good code anywhere to make this style button! Site PW: test I've attached a screenshot of the design and the current footer. Thanks! /* Detraform's Minimal Newsletter Block*/ .newsletter-block { padding-top: 0 !important; .newsletter-form-wrapper { background-color: transparent; padding: 0 !important; .newsletter-form-body { flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: ; display: flex; padding-bottom: 0; border: 1.5px solid; border-color: #ffffff; .newsletter-form-fields-wrapper { width: ~"calc(75% - 8px)"; margin: 0px; .newsletter-form-field-wrapper { display: block; width: 100%; padding: 0px; } input { font-family: 'Open Sans Condensed'; letter-spacing: 0; font-size: 14px; line-height: 1.4em; padding: 15px 20px; background-color: transparent; @media screen and (max-width: 640px) { padding: 15px 15px; } @media screen and (max-width: 420px) { padding: 17px 0 17px 12px; } display: block; border: none; &::placeholder{ font-family: 'Open Sans Condensed'; font-size: 1.2em; line-height: 1.4em; letter-spacing: 0; color: #ffffff !important; } } @media screen and (max-width: 1350px) { width: ~"calc(70% - 8px)"; } @media screen and (max-width: 1200px) { width: ~"calc(64%)"; } @media screen and (max-width: 1024px) { width: ~"calc(75%)"; } } .newsletter-form-button-wrapper { width: 15%; height: 100%; margin: 0px; padding: 0; margin-top: 0px; vertical-align: middle; button { background-color: #d92c5a !important; border: none !important; vertical-align: top; box-shadow: none !important; padding: 27px; width: 100%; font-family: 'Open Sans Condensed'; font-size: 1.2em; line-height: 1.5em; letter-spacing: 0; text-align: left !important; span { text-align: left !important; text-transform: uppercase; color: #ffffff !important; font-weight: 400; &:hover { opacity: .7; } } @media screen and (max-width: 1024px) { text-align: left; padding-left: 0; padding-right: 10px; } @media screen and (max-width: 640px) { text-align: left; padding-left: 0; padding-right: 0; } } @media screen and (max-width: 1350px) { text-align: left; padding: 0 30px; width: 32%; .newsletter-form-button { padding-right: 0; } } @media screen and (max-width: 1024px) { text-align: left; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 15px; } @media screen and (max-width: 640px) { padding-right: 0px; } } @media screen and (max-width: 1200px) { text-align: right; width: 100%; } } .newsletter-form-footnote { text-align: left; letter-spacing: .0em; } } .newsletter-form-footnote { margin-top: 16px; p { font-family: 'Open Sans Condensed' !important; line-height: 1.25em; opacity: 1; strong { font-weight: 400; color: #ffffff !important; } } } }
  19. Hello! I have a newsletter block in the footer of my website that looks exactly how I want it to on desktop (with some light coding), but when I look at it on mobile it places the "sign up" button below the email form (see pic). How do I get the "sign up" button to stay in line with the email form on mobile? Thank you!
  20. Site URL: https://rose-orb-4xd7.squarespace.com/config/design/custom-css site password '642Rasmus' I've managed to Change "email format error message" on ny newsletter template using the follwing Custom CSS #block-yui_3_17_2_1_1664183031985_2019.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error { font-size: 0px; } #block-yui_3_17_2_1_1664183031985_2019.newsletter-block .newsletter-form-field-wrapper.form-item.field.email.required.error .field-error:before { font-size: 12px; content: 'Forkert email format'; } Now I want to do the same for the "Name is missing required subfields: First Name" error Custom css looks like: #block-yui_3_17_2_1_1664183031985_2019.newsletter-form-name-fieldset.form-item.field.name.required.error .field-error { font-size: 0px; } #block-yui_3_17_2_1_1664183031985_2019..newsletter-form-name-fieldset.form-item.field.name.required.error .field-error:before { font-size: 12px; content: 'Manglende navn'; } Clearly however this doesn't work... What am i doing wrong? /Rasmus
  21. Site URL: https://www.weareimagocollective.com/ Hi! I have this code in to change the size of the email and sign up buttons, but the space between "sign up with your..." email field/button and disclaimer is like double what I want it to be. Here is the code I currently have in: .newsletter-block {padding-top: 0; padding-bottom: 0} .sqs-block-newsletter .newsletter-form-field-element { padding-top: 8px !important; padding-bottom: 8px !important; } button.newsletter-form-button.sqs-system-button { padding-top: 10px !important; padding-bottom: 10px !important; } Website: https://www.weareimagocollective.com/ Thanks!
  22. Hi there! I'm transitioning my site from 7.0 to 7.1 manually and have just learned about the new Post Blog Item Code Injection option in the settings of a Blog. I've used code injection in other areas for other reasons and would like to put this to use to add a newsletter sign ups to the bottom of every Blog Post included in this blog. Has anyone done this and would they be willing to share the code they used? Thank you so much!
  23. super new to this and got stuck on something I am trying to do custom css for the newsletter-form-button in order to get a transparent image displayed instead of the button, but obviously keep the sqs built in functionality .newsletter-form-button { background-color:transparent!important; background-image:url('myimageurl.png'); background-position:center; background-size:contain; background-repeat:no-repeat; } firstly I am not quite sure if the class I am using suffices, however all the styling seems to be working fine apart from the background color removal my question: how do I properly remove the background color and how should I approach the resizing of the button? (it was not working when I tried using this class) I really appreciate the help ❤️
  24. Site URL: http://delucasitalian.com/vip I am launching a VIP club for a client site and we would like to collect phone number as well as email address. Emails will be sent out of the SquareSpace email marketing tool which is why I am trying to use the newsletter block (I'm not sure if you can set up a mailing list out of a standard form?)
  25. Site URL: https://cathrynworrell.com I'm using the Brine template and I've been trying to fix lots of accessibility issues on my site. I've have found (thanks to the SS forum) code to deal with most of it but how can I add form field labels to the newsletter block? I think I may also need alt text for the RECAPTCHA part of the block too. Is it possible to fix this? Thanks.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.