Jump to content

Code to make newsletter signup inline

Recommended Posts

Can you share your website URL?

I can see that this might work for desktop, but it won't work for mobile like that, the text would be far too long to fit inline on a mobile screen unless the font was tiny.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Thanks!

Can you tell me what you've already done to the newsletter form to make the elements not stack? What custom coding have you added?

Typically if you have a newsletter form you can easily have the 3 fields side-by-side, but they look like they are stacking because that element is being restricted in width by the other newsletter elements (title/description/button/disclaimer) that are displaying on either side. 

What is your desired position of all of the elements on desktop? Could you very roughly sketch them out?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
20 minutes ago, Ziggy said:

Playing around in chrome developer tools, I managed to put the inputs side-by-side, but they then make the description and disclaimer very squashed:

image.thumb.png.a15b7c03779ea59cb19375789213bcaf.png

Here is what I have been using: 

///Newsletter Block Formatting

.newsletter-block .newsletter-form-field-element {

 font-family: "apres" !important; 

 font-weight: 200;

 font-size: 12.5px;

 letter-spacing: 0.9px;

 text-transform: none;

 border-radius: 0px !important;

 background: transparent !important;

 border-top: 0px !important;

 border-left: 0px !important;

 border-right: 0px !important;

 border-bottom: solid 2px #FFFFFF !important;

}

.newsletter-block .newsletter-form-header-title {

 font-size: 60px;

 line-height: 60px;

 letter-spacing: 2px;

 font-family: 'Futura' !important;

 text-align: center;

 text-transform: none;

}

.newsletter-form-field-element::-webkit-input-placeholder {

 color: #000 !important;

}

.newsletter-form-button { 

 background: #000 !important;

 padding: 11px 30px 14px 30px !important;

 border-radius: 2px !important;

 border-color: #FBD40C !important;

 text-transform: uppercase;

 font-size: 25px !important;

 font-family: OstrichSans-Medium!important; 

 font-weight: 900 !important;

 letter-spacing: 1.5em; 

 color: #fff !important;

}

@media only screen and (max-width: 640px) {

 .Footer .newsletter-form-field-element {

  background: none !important;

  border-top: 0px !important;

  border-left: 0px !important;

  border-right: 0px !important;

  border-radius: 0px !important;

  border-bottom: solid 2px #FFFFFF !important; 
  

 }

}

//----------//

 .newsletter-block .newsletter-form-wrapper {
    padding: 0;
    background: none;
  }
  @media only screen and (min-width:820px) {
    .newsletter-block .newsletter-form {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
    }
    .newsletter-block .newsletter-form-header {
      flex: 2;
      -webkit-flex: 2;
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p {
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-description p {
      margin: 10px 0 0;
    }
    .newsletter-block .newsletter-form-header-title {
      font-size: 25px;
      margin-bottom: 0;
    }
    .newsletter-block .newsletter-form-body {
      flex: 3;
      -webkit-flex: 3;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
    }
    .newsletter-block .newsletter-form-fields-wrapper {
      flex: 2;
      -webkit-flex: 2;
    }
    .newsletter-block .newsletter-form-field-wrapper {
      width: 95%;
    }
}

 

------ Also attached is what another drawing of what I would like it to look like. How you have it is good. 

@Ziggy

image.png.d5eec0c7e037fb1aa0899e226c02d022.png 1,799×568 pixels.png

Link to comment

Firstly, I would suggest that you remove the newsletter description and disclaimer text and put that text into text blocks as that will simplify things. Can you do that and let me know when that's done?

Can you make sure the newsletter for is set to Float, make the newsletter block as wide as possible and temporarily remove everything in the Custom CSS below the //----------//?

I can then hopefully get you any CSS you might still need to get the look right.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
8 minutes ago, MommyHadALittleOne said:

Thank you so so so so so so much!!!!!!!!!!!!! I had to do some work things so I couldn't respond but that worked AMAZINGGGG

@Ziggy

Not a problem, really glad that helped! If you get a chance can you mark my post as the solution to your question, and give me a thumbs up? Thanks!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.