[Support request] How to made changes on Home Page

[Youssef]

Hi Fernando ,

Hope all going well.
Many thanks for the links 🙂 Yeah i have created an account on mailchimp
On the footer i can manage 5 widgets
Inside the widget the Main idea is to grab Mailchimp code and paste it in a regular text widget.

Sincerely i do not know which part of the code to insert.
Could you help please ?

Regards
Youssef

[Youssef]

Hello Fernando and Team support

I am using :
– Generate press Version: 3.1.3
– GP Premium Version: 2.1.2
– Template : prime

Appearance > customize > layout > footer > Footer Widgets > I chosse 4
Now when i

Appearance > Widgets> Footerwidget 1 > I have added the headline “suscribe now ”
I click to add a block
I choose code 🙂
what should I type ; I m realy …. not finding the right word

By reading topics on Generate press forum this code is the one that i want
https://generatepress.com/forums/topic/help-adjusting-email-newsletter/

when i pass it , it appears the same

.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”],
.mc4wp-form-fields input[type=”submit”] {
border-radius: 50px;
}
.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”] {
background-color: #fff;
}

.mc4wp-form-fields {
padding: 8px;
display: flex;
max-width: 600px;
margin: 10px auto;

}
.mc4wp-form-fields input[type=”email”] {
flex: 1;
border: 0;
}

@media(max-width: 500px) {
.mc4wp-form-fields {
flex-wrap: wrap;
}
.mc4wp-form-fields input[type=”submit”] {
flex: 1;
}
.mc4wp-form-fields {
border-radius: 30px;
}
}

Means that there is something i’am missing
any help most welcome 🙂

I am not a developer nor a coder but just someone who is trying to make his site successful
I rely on your kind support to achieve my own challenge

Many thanks in advance
Youssef

[Youssef]

By searching on google and reading topics
I have to add HTML code , 🙂
That’s fine but Mailchaimp code is not so beauty

Could you help me to modifiy the mailchimp code and have something beautiful
similar as described on this topic
Please i do not know where to make changes

Topic : https://generatepress.com/forums/topic/help-adjusting-email-newsletter/

Code I want to implement :

.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”],
.mc4wp-form-fields input[type=”submit”] {
border-radius: 50px;
}
.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”] {
background-color: #fff;
}

.mc4wp-form-fields {
padding: 8px;
display: flex;
max-width: 600px;
margin: 10px auto;

}
.mc4wp-form-fields input[type=”email”] {
flex: 1;
border: 0;
}

@media(max-width: 500px) {
.mc4wp-form-fields {
flex-wrap: wrap;
}
.mc4wp-form-fields input[type=”submit”] {
flex: 1;
}
.mc4wp-form-fields {
border-radius: 30px;
}
}

MailChimp Code :

<!– Begin Mailchimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-071822.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

<form action=”https://.us17.list-manage.com/subscribe/post?u=782dea04db6aee96106a0a400&id=0ccce1d2ab&f_id=00e64be0f0&#8243; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>

<h2>Subscribe</h2>

<span class=”asterisk”>*</span> indicates required

<label for=”mce-EMAIL”>Email Address <span class=”asterisk”>*</span>
</label>
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL” required>
<span id=”mce-EMAIL-HELPERTEXT” class=”helper_text”></span>

<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>

<input type=”text” name=”b_782dea04db6aee96106a0a400_0ccce1d2ab” tabindex=”-1″ value=””>

<input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>
<p class=”brandingLogo”></p>

</form>

<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;fnames[3]=’ADDRESS’;ftypes[3]=’address’;fnames[4]=’PHONE’;ftypes[4]=’phone’;fnames[5]=’BIRTHDAY’;ftypes[5]=’birthday’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>

[Fernando]

I see. For reference, can you provide the link to the site in question? Can you also point us to the specific location where you’ve added the form?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Youssef]

Hello Fernando

Thank you so much for your assistance, I am struggling to meet my own challenge.
well the hope is to have :

What I have right now is :

Could you please correct my code , to have something beautiful as https://i.ibb.co/k2B75Bj/loi.png

Code HTML , which is inside footer Widget 1

<p><!– Begin MailChimp Signup Form –></p>

<form action=”https://youssefinc.us17.list-manage.com/subscribe/post?u=782dea04db6aee96106a0a400&id=0ccce1d2ab&f_id=00e64be0f0&#8243; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank”>
<p> <input type=”email” size=”30″ value=”Enter your email” name=”EMAIL” class=”required email” id=”mce-EMAIL” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”></p>

<p></p>

<input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>

<p></p></form>

<p><!–End mc_embed_signup–></p>

Code CSS : From a topic on forum generatepress , it’s recommended to use plugin : simplecss
I have put the below code

.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”],
.mc4wp-form-fields input[type=”submit”] {
border-radius: 50px;
}
.mc4wp-form-fields,
.mc4wp-form-fields input[type=”email”] {
background-color: #fff;
}

.mc4wp-form-fields {
padding: 8px;
display: flex;
max-width: 600px;
margin: 10px auto;

}
.mc4wp-form-fields input[type=”email”] {
flex: 1;
border: 0;
}

@media(max-width: 500px) {
.mc4wp-form-fields {
flex-wrap: wrap;
}
.mc4wp-form-fields input[type=”submit”] {
flex: 1;
}
.mc4wp-form-fields {
border-radius: 30px;
}
}

[Youssef]

[Fernando]

I’m not seeing the screenshot. To clarify, is this the form you’re referring to?: https://share.getcloudapp.com/ApuDPkAO

If so, try adding this in Appearance > Customize > Additional CSS:

.site-footer form#mc-embedded-subscribe-form {
    display: flex;
}

.site-footer div#optin {
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
    padding: 5px;
}

.site-footer div#optin p {
    margin-bottom: 0;
}

.site-footer div#optin input[type="email"] {
    background-color:transparent;
    color: #000;
    border: none;
}

.site-footer div#optin input[type="submit"] {
    background-color: #ff0000;
    color: #fff;
    border-radius: 20px;
}

If not, please provide the link to the page where we can see the form.

[Youssef]

Hello Fernando

You rock !!
On desktop it’s appear so fine
but on mobile not
how cn we adjust it please ?

Regards
YOussef

[David]

Change this CSS:

.site-footer div#optin p {
    margin-bottom: 0;
}

to:

.site-footer div#optin p {
    margin-bottom: 0;
    flex: 1;
}

[Youssef]

Hello David

nope 🙁 not work

regards
Youssef

[Youssef]

this is the code that i have

.site-footer form#mc-embedded-subscribe-form {
display: flex;
}

.site-footer div#optin {
border-radius: 20px;
background-color: #fff;
overflow: hidden;
padding: 5px;
}

.site-footer div#optin p {
margin-bottom: 0;
flex: 1;
}

.site-footer div#optin input[type=”email”] {
background-color:transparent;
color: #000;
border: none;
}

.site-footer div#optin input[type=”submit”] {
background-color: #e9772e;
color: #fff;
border-radius: 20px;
}

[David]

Try this instead:

#optin form {
    display: flex;
    padding: 4px 10px 4px 15px;
    background-color: #fff;
    border-radius: 30px;
}
#optin form * {
    margin-bottom: 0;
}
#optin form input.email {
    background-color: transparent;
    border: 0;
}
#optin form input.button {
    border-radius: 30px;
}
#optin form .clear {
    margin-left: auto;
}
@media(max-width: 500px) {
    #optin form {
        flex-wrap: wrap;
    }
    #optin form p, #optin form .clear {
        flex: 1 0 100%;
    }
    #optin form input.email,
    #optin form input.button {
        width: 100%;
        text-align: center;
    }
    #optin form input.button {
        border-radius: 0 0 30px 30px;
    }
}

[Youssef]

Thank you i will try and update

[David]

Let us know 🙂

[Youssef]

Hello ,
things are not easy to do
as I am neither a coder nor a developer, I have done a complete reset of my entire site.
I start from the beginning, I rely on this site: https://beaverhero.com/prime-template-generatepress/
I will not throw away the sponge
I’ll box with this code until I have my e-commerce online
if you have any tips, anything that can help me to modify the template premium 🙂
I am interested, my goal is traced I want to succeed
thank you for any support
With this code the news letter is so big

#optin form {
display: flex;
padding: 4px 10px 4px 15px;
background-color: #fff;
border-radius: 30px;
}
#optin form * {
margin-bottom: 0;
}
#optin form input.email {
background-color: transparent;
border: 0;
}
#optin form input.button {
border-radius: 30px;
}
#optin form .clear {
margin-left: auto;
}

@media(max-width: 500px) {
#optin form {
flex-wrap: wrap;
}
#optin form p, #optin form .clear {
flex: 1 0 100%;
}
#optin form input.email,
#optin form input.button {
width: 100%;
text-align: center;
}
#optin form input.button {
border-radius: 0 0 30px 30px;
}
}

[Author]

Posts