Styling the newsletter signup / email-list

[FichtMedia]

Hello! Can someone tell me if there is a possibility to style the "Newsletter Signup" which I did place in this RapidWeaver site with inStacks' PulseCMS5 stacks: https://www.weinhaus-hess.com. The stack uses the standard tag {{email-list}} ...

I would like to make this - somehow boring - form more visually appealing (nice CSS-Button and everything a bit bigger) and also want to change the pre-definded texts (see the attached screenshot), for example from "Einschreiben" to "Anmelden". Would changing the styling of the form be possible somehow via manual CSS? To change the text of this form I already looked in the PulseCMS admin settings, but didn't find it. Thanks for any help!

[ezchile]

Hi Matthias,

It is possible to style the form using some CSS and to also change the text of the button just by using CSS overrides. The code below should do it for you.

It's quite a 'hacky' way of doing it (especially changing the text), but it works.

#contact.pulsecore.email-list {
background: #F6E09A;
background: -webkit-gradient(linear, left top, right top, from(#faedc8), to(#F6E09A));
background: -webkit-linear-gradient(top, #faedc8, #F6E09A);
background: -moz-linear-gradient(top, #faedc8, #F6E09A);
background: -o-linear-gradient(top, #faedc8, #F6E09A);
background: -ms-linear-gradient(top, #faedc8, #F6E09A);
background: linear-gradient(top, #faedc8, #F6E09A);
border: 2px solid #F6E09A;
padding: 20px;
width: 100%;
border-radius: 10px;
}

#contact.pulsecore.email-list input#email {
padding: 5px;
}

#contact.pulsecore.email-list button {
padding: 10px 30px;
margin-left: 10px;
background: #2c3a42;
border-radius: 8px;
color: transparent;
position: relative;
}

#contact.pulsecore.email-list button:hover{
background: #556771;
}

#contact.pulsecore.email-list button[name="submit"]::after{
content: 'Anmelden';
color: white;
position: absolute;
width: 100%;
text-align: center;
left: 0;
}

It should basically look like this afterwards.

[FichtMedia]

Thanks so much, @ezchile, that did work really well indeed! Two questions left…:

1. How can I change the placeholder-text of the input field (currently “E-Mail eintragen”) to “E-Mail Adresse eintragen”?
2. The input field and the button don’t seem to be vertically centered, so the button optically appears to be a few pixels further down than the input field. How can I adjust this? I already tried it with margin-settings for the button, but that didn’t work.

[ezchile]

Hi Matthias,
Add:

transform: translate(0,-3px);

To the ‘#contact.pulsecore.email-list button’ style block to vertically align the button better and then tweak as necessary.

I’m afraid that there is no way for CSS to overwrite the placeholder text, you’ll have to locate where it is defined within the RapidWeaver generated source code (I’d search for ’ placeholder=“E-Mail eintragen” ’ and then edit the wording there)

Sadly, I do not own RapidWeaver, so cannot really help more than that though.

[pulsecms]

Great job @FichtMedia - looks much nicer after @ezchile great ideas and implementation.

How can I change the placeholder-text of the input field (currently “E-Mail eintragen”) to “E-Mail Adresse eintragen”?

To change the Text, change the lang in the lang file as here:

yuzoolcode/pulsecms-languages/blob/master/pulse 5/shipping-with/deutsch.php

Line 176

$lang_newsletter_placeholder ='E-Mail eintragen';

Here in your Pulse: admin > inc > lang > deutsch.php

If you think this needs to be changed so it reads better then please make any amends to the above German and we can ship that. Or if it’s just for this project, please change the lang file for this. @Oliver and @instacks have also contributed to that file So would like any direction on it.

[FichtMedia]

@ezchile Thanks so much! The positioning now looks much better.
@pulsecms Thanks, that worked flawlessly. Since I would have to do this after each update to PulseCMS it would be great if this could be directly be changed in the language file. My “translation” is not special for this site or use case, but in my opinion better suited than the current one. Maybe I’m a bit pedantic, but for me “E-Mail eintragen” is not really correct. An “email” for me is the email text-content. But what should be input there is the email address. So my suggestion would be to simply use “E-Mail Adresse” for the placeholder, since this is exactly what should be typed in there. I would also change the button-text from “Einschreiben” to “Anmelden” as the default, but that’s just my personal taste (and can easily be changed with the code provided by ezchile).

[FichtMedia]

@pulsecms As you’re saying by yourself that this “looks much nicer”, maybe you could add this better styling to the newsletter signup by default in some future update…

[Oliver]

So I personally wouldn’t worry so much about the styling and the text, but rather about the fact that you shouldn’t use this e-mail tag in germany.
Keyword -> Double-Opt-In (and additionally the addresses are unencrypted on the server).
Or do you/they contact the users manually if they really want to be added to the list, then I didn’t say anything, but very complex.

The e-mail list certainly has its right to exist, but not in germany, only my opinion.

[FichtMedia]

Thanks @Oliver, you’re right of course. Probably we’ll switch to a double-opt-in solution in the near future.

[pulsecms]

Thanks @FichtMedia for the feedback and glad you have a solution!

We’ll look at making the default German lang file better for all sites

[pulsecms]

Thanks @FichtMedia and @Oliver

In the next version these changes will appear:

• “E-Mail eintragen” to “E-Mail Adresse”
• “Einschreiben” to “Anmelden”

Update German Email copy

Thanks!