Return to previous page

SignUp Form Design CSS - by poacher - on WordPress WooCommerce support

This topic has 12 replies, 4 voices, and was last updated 6 years, 11 months ago ago by Rose Tyler

poacher

Participant

May 18, 2017 at 07:05

Hello I am not a coder / programmer. Need help in achieving a design version of newsletter sign-up form from your demo. Please see attached link.

I already saw the documents with css code but would like to have this design instead.

Thank you very much.

Please, contact administrator
for this information.

#163385 Copied

11 Answers

Max Mullins

Participant

May 18, 2017 at 09:14

Hello @poacher

1. You may add any custom html code for promopopup using staticblock options and Visual Composer in dashboard->static block. Check this tutorial about how to create newsletter popup: https://8theme.com/demo/docs/royal/index.html#!/0_newsletters.
Please provide us with link to to this template in case yu would like to simply copy and paste some wrapper elements like white cart.
2. Mailchimp form in our demo which is placed within static block for custom html and inserted in newsletter as custom Visual composer column in static block. Let us check the link to provide you with more details.

Regards,
Maksym Mullins

#163410 Copied

poacher

Participant

May 18, 2017 at 10:38

Hi I think you missed out my question. I just need the custom css code to achieve this kind of input field. Please see my link below (Inside private content box)

Please, contact administrator
for this information.

#163428 Copied Theme version: X STORE
Max Mullins

Participant

May 18, 2017 at 11:39
Hello,

PLease try to add following code into the Theme Options > Styling Custom CSS
```
.mc4wp-form .et-mailchimp input[type="submit"] {
    color: white;
    font-size: 10px;
    width: auto;
    background: #e74948!important;
    opacity: 1;
    line-height: 40px;
    height: 40px;
}
.mc4wp-form .et-mailchimp input[type="email"] {
    border: 1px solid rgba(103, 103, 103, 0.19);
    color: black;
    background: white;
}
```
Code of the MailChimp form (MailChimp > Forms) is
```
<div class="et-mailchimp"><p>
	<label>Email address: </label>
	<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>

<p>
	<input type="submit" value="Sign up" />
</p>
</div>
```
Regards,
Max Mullins
#163434 Copied
poacher

Participant

May 18, 2017 at 13:57

Hi appreciate your quick respond.

I did apply your code now. Please see attached image between the demo and mine. We are almost there, please bear with me:

– SIGN UP text from the button is not showing up
– Button in pale pink red not red

Hope you can help. Thanks

Please, contact administrator
for this information.

#163454 Copied Theme version: X Theme
Olga Barlow

Support staff

May 18, 2017 at 14:06
Hello,

Try to remove the previous code and add the following instead of that
```
.mc4wp-form .et-mailchimp input[type="submit"] {
    color: white;
    font-size: 10px;
    width: auto;
    background: #e74948!important;
    opacity: 1;
    line-height: 40px;
    height: 40px;
}
.mc4wp-form .et-mailchimp input[type="email"] {
    border: 1px solid rgba(103, 103, 103, 0.19);
    color: black;
    background: white;
}
```
Code of the MailChimp form (MailChimp > Forms) is
```
<div class="et-mailchimp"><p>
	<label>Email address: </label>
	<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>

<p>
	<input type="submit" value="Sign up" />
</p>
</div>
```
Regards
#163456 Copied
poacher

Participant

May 18, 2017 at 15:43

Hi thank you very much for your help. Really appreciate it. One final thing

the placeholder = “Your email address” is not showing up on my text field.

Please see attached link

Thank you so much.

Please, contact administrator
for this information.

#163474 Copied Theme version: Xtheme
Max Mullins

Participant

May 18, 2017 at 16:35
Hello,

Please add next line of code to change placeholder text:
```
#etheme-popup .mc4wp-form .et-mailchimp input[type="email"]:o-moz-placeholder { 
color: rgba(0, 0, 0, 0.51) ;
}
#etheme-popup .mc4wp-form .et-mailchimp input[type="email"]:-moz-placeholder { 
color: rgba(0, 0, 0, 0.51);
}
-ms-input-placeholder { 
 color: rgba(0, 0, 0, 0.51) ;
}
#etheme-popup .mc4wp-form .et-mailchimp input[type="email"]:o-moz-placeholder -moz-placeholder {color: rgba(0, 0, 0, 0.51);
}
```
Regards,
Maks Mullins
#163493 Copied
poacher

Participant

May 19, 2017 at 02:43

Hi there,

It’s still not working though =( Please see attached screen grab of the code.

Thanks very much.

Please, contact administrator
for this information.

#163529 Copied Theme version: XTheme
Rose Tyler

Support staff

May 19, 2017 at 13:44
Hello,

Please use this code:
```
.mc4wp-form .et-mailchimp input::-webkit-input-placeholder {color:#999;}
.mc4wp-form .et-mailchimp input:-moz-placeholder           {color:#999;}
.mc4wp-form .et-mailchimp input:-ms-input-placeholder      {color:#999;}
```
Regards
#163583 Copied
poacher

Participant

May 19, 2017 at 14:01

Hey IT WORKED!!!! THank you very much. You’re a life saver! Thank you very much.

#163589 Copied

Rose Tyler

Support staff

May 19, 2017 at 14:15

Hello,

You’re welcome!

Regards

#163592 Copied
Viewing 12 results - 1 through 12 (of 12 total)