How can I make my email sign-up button separate from the rest of the sign-up?

[Chicha7272]

Hey everyone, I need some help with my email sign-up.

So this is what I have right now:

And this is what I want to achieve:

Ultimately, I want to apply there 4 different changes:

1. Change the text of the section where you write your email from “Email” to “Enter your email…”

2. Make the background of that section white

3. Separate this section from the button

4. Make the corners of these two parts rounder

So, if you know how I can achieve at least anything from what I mentioned above, please let me know.

My store URL is: https://trivlen.com/

The store I made a screenshot of above is: https://funnyfuzzy.co.uk/

[BSS-Commerce]

HI @Chicha7272 ,

1. To make the above changes, please access the theme.liquid file and add the code below (To find this file, on the admin page, select Sale Channel → Online Store → Edit code and search theme.liquid file in the search box).

<script>
 document.querySelector('label[for="NewsletterForm--template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86"]').textContent = "Enter your email"
document.querySelector('#NewsletterForm--template--20103583957316__e593337e-6900-4440-9ea4-abe00307be86').style.backgroundColor = "white"
document.querySelector('#Subscribe').style.display = "none"
var buttonElement = document.createElement('button');
buttonElement.textContent = 'Send'; // Set the button text content
buttonElement.id = 'send-email-btn';

buttonElement.style.width = '100px';
buttonElement.style.cursor = 'pointer';

buttonElement.addEventListener('mouseover', function() {
    buttonElement.style.opacity = '0.6';
});

buttonElement.addEventListener('mouseout', function() {
    buttonElement.style.opacity = '1.0';
});
var fieldElement = document.querySelector(".newsletter-form__field-wrapper.scroll-trigger.animate--slide-in")
fieldElement.appendChild(buttonElement);

document.querySelector('#send-email-btn').style.backgroundColor = "rgb(109, 78, 65)"

document.querySelector('#send-email-btn').style.marginLeft = "10px"
document.querySelector('#send-email-btn').style.color = "white"
document.querySelector('#send-email-btn').style.borderRadius = "4px"

document.querySelector(".newsletter-form__field-wrapper.scroll-trigger.animate--slide-in").style.display = "flex"
</script>

Then you continue to add the following code to the base.css file (Follow the steps above to find the file)

.field:after {
border-radius: 4px !important;
}

Result:


[Chicha7272]

Hey, thanks for taking the time to give me a hand.

The code you provided works but I would like to make some tweaks to it. I will list everything below:

First off, I would like to color the border of the “Enter your email” part in the RGB color: 223, 240, 255.
Then I would like to delete the existing borders and shadows of the “Send” button. So that it doesn’t have any borders/shadows at all
Then, I would like to change what happens when you hover over the “Send” button. Right now it changes the opacity of the button, but I would like it to make the button look bigger (like by adding a new border when somebody hovers over it)
Then, I would like to change the font used in the “Send” button to the one that I use on my website (the one I use is DIN Next Medium)
And finally, I would like to make it look as good on mobile as it looks on desktop. Cause right now it’s a bit messy on mobile.

So ideally, I would like it to look somewhat like this, plus changing hover over, and mobile view:

Please, let me know if it’s a too hard task

[Chicha7272]

Hey man, thanks for taking the time to give me a hand. It’s the second time I writing this text. The first time it became laggy and some reason was deleted. Anyway, so the code you provided does exactly what you made a screenshot of. However, I would like to make a few tweaks to the result. So, since there are like 4-5 tweaks I want to make, I will split them into different replies so that I can give you more likes for this.

[Chicha7272]

First off, I would like to change the border color of the “Entre your email” section. I want it to be RGB: 223,240,255.

[Chicha7272]

Secondly, I would like to completely delete all the shadows and borders of the “Send” button.

[Chicha7272]

Then, I would like to change what happens when somebody hovers over the button. Right now, it changes the opacity of the button, but I want it to make the button a little bit bigger (like if there appeared a new border on it).

[Chicha7272]

Then, I would like to change the font used for the “Send” button to the one that I use on my website. (The one I use is DIN Next Medium)

[Chicha7272]

And finally, I would like it to look as good on mobile as it looks on desktop. Cause right now it’s kinda messy on the mobile