Styling newsletter form button

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.

30 minutes ago, atfirstblink said:

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.

Try adding to Home > Design > Custom Css

.bright .sqs-block-newsletter .newsletter-form-button {
  background-color: transparent !important;
  color: #fff !important;
  padding-left: 10px !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

14 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

.bright .sqs-block-newsletter .newsletter-form-button {
  background-color: transparent !important;
  color: #fff !important;
  padding-left: 10px !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you so much! Works like a charm 🙂

4 minutes ago, atfirstblink said:

Thank you so much! Works like a charm 🙂

Sorry but its disappeared again. Can you pls check.

5 minutes ago, atfirstblink said:

Sorry but its disappeared again. Can you pls check.

I removed the disclaimer text as I wanted to narrow down the height of the block. Also can you help me remove the padding between its headline and email box?

On 2/15/2022 at 1:10 PM, atfirstblink said:

I removed the disclaimer text as I wanted to narrow down the height of the block. Also can you help me remove the padding between its headline and email box?

Add to Design > Custom CSS

footer.sections .newsletter-form-header-description p {
    margin-bottom: 0;
}
footer.sections .newsletter-form-body>div {
    margin-top: 0px !important;
}

Hi! I'm trying to get my newsletter block to look like? I want the newsletter and button to have a transparent background. Any idea? 

On 12/29/2022 at 10:21 PM, EricGoldberg said:

Hi! I'm trying to get my newsletter block to look like? I want the newsletter and button to have a transparent background. Any idea? 

Can you share link to page where you use newsletter?

Hi! I am trying to get my footer newsletter block form to look like this. I've had no luck mixing codes so far. Please help!

On 2/26/2024 at 2:51 AM, ncast21 said:

Hi! I am trying to get my footer newsletter block form to look like this. I've had no luck mixing codes so far. Please help!

Use this code to Custom CSS box. If it doesn't work, please share link to page where you use newsletter, we can check easier

div.newsletter-block input[name="email"], div.newsletter-block input[name="email"]:focus {
    padding-bottom: 5px !important;
    background-image: url(https://static1.squarespace.com/static/5f9b4271d6441d25af0c6dea/t/5fa9c7f4ea796d34de4950a3/1604962292492/arrow.png);
    background-repeat: no-repeat;
    background-position: right 25px;
    background-size: 30px;
    text-align: left;
    padding-left: 0 !important;
    font-size: 14px !important;
    color: #9c9c9c;
}

Hi! Looking to achieve a newsletter where the title and fields are in line with each other, as well as some other styling tweaks for the fields and button as pictured. Here is my site: https://www.thesis-agency.com/

On 4/19/2024 at 12:49 AM, SurferGyal said:

Hi! Looking to achieve a newsletter where the title and fields are in line with each other, as well as some other styling tweaks for the fields and button as pictured. Here is my site: https://www.thesis-agency.com/

How about mobile? Keep it same as desktop or?