Skip to content
Public Ticket #25067

Header Sign Up form - Mailpoet

Conversation thread

Fjura replied

Customer Reply

thank you, that seems to have fixed it :)

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-header-signup-form .mailpoet_form .mailpoet_paragraph:nth-child(10) {
  width: 100%;
  margin-bottom: 0;
}

Regards,
PenciDesign.


Fjura replied

Customer Reply

no no, I would like it to load with the bottom text being on one row right away, currently it loads on two rows, and then refreshes to one row, please see attached.

PenciDesign replied

Staff Reply

Hi,

Do you mean you want "Name", "Email" and "Submit" button on 3 different lines? Or something else?

Best Regards,

PenciDesign

Fjura replied

Customer Reply

thank you, I still down know where the issue is, but cant the line breaking be somehow fixed by adjusting the custom CSS that is used for the form? 

.penci-header-signup-form .widget .mailpoet_form input {
    padding: 15px !important;
    background: #fff;
    color: #000;
    border: 0;
}
.penci-header-signup-form .widget .mailpoet_form input.mailpoet_submit {
    background: #000;
    color: #fff;
}
.penci-header-signup-form .mailpoet_form {
    margin-left: -10px;
    margin-right: -10px;
}
.penci-header-signup-form .mailpoet_form .mailpoet_paragraph {
    width: calc(100%/3);
    padding: 0 10px;
    float: left;
}
@media only screen and (max-width: 767px) {
   .penci-header-signup-form .mailpoet_form .mailpoet_paragraph {
        width: 100%;
        float: none;
    }
}
.penci-header-signup-form .mailpoet_form {
  margin-left: -10px;
  margin-right: -30px;
}
.penci-header-signup-form .mailpoet_form .mailpoet_paragraph.last {
    width: 100%;
}
.penci-header-signup-form a {
    text-decoration: underline;
}

PenciDesign Supporter replied

Staff Reply

Hi,

I've reverted all the settings to the previous section, please clear all the caches and check again.

Regards,
PenciDesign.


Fjura replied

Customer Reply

Please revert those changes, they are causing more issue and did not fix the main problem. 

PenciDesign Supporter replied

Staff Reply

Hi,

I've re-configured the pagespeed optimization settings for your site.

Please check.

Regards,
PenciDesign.


Fjura replied

Customer Reply

Hello,

but this doesnt seem like a WP Rocket issue, the problem is still there even if you disable it:

https://www.lenivakucharka.sk/?nowprocket

Cant the issue be somewhere in the CSS that was used to customize the looks of the form?

PenciDesign Supporter replied

Staff Reply

Hi,

I am not aware of the exact issue, but if you wish to use WP-Rocket to optimize your site, I recommend reaching out to their support team. They can assist you in configuring your site to improve the CLS score.


Regards,
PenciDesign.


Fjura replied

Customer Reply

Hi,

sadly I cant use the Soledad speed optimization, it breaks too many things on my website, to a point where I would need to change parameters in my wp config file, which could then create even more problems. Do you know what causes the issue if its something in WP Rocket? Maybe I could then write to their support to fix it.

thank you

PenciDesign Supporter replied

Staff Reply

Hi,

I've checked your site, you're currently using the page optimization from the WP-Rocket.

I recommend you should turn off these features of WP-Rocket, use the cache features only, and follow the Soledad Page Speed optimization guide at this link: https://soledad.pencidesign.net/soledad-document/#speed-optimization

Regards,
PenciDesign.


PenciDesign Supporter replied

Staff Reply

Hi,

For this case, please send me your WordPress admin account in a PRIVATE reply.
I'll log in and try to help you config.

Regards,
PenciDesign.



Fjura replied

Customer Reply

May I ask, O noticed my CLS is very bad on the homepage where the form is and I found out that its because the form loads and changes a bit after a second, could this be fixed so it loads correctly right away? Please see the screenshots, you can seee that the black text first loads in two rows, then changes to one in a second.  

Fjura replied

Customer Reply

thank you! it worked

PenciDesign Supporter replied

Staff Reply

Hi,

Please add the following CSS code to your site:

.penci-header-signup-form .mailpoet_form {
  margin-left: -15px;
  margin-right: -50px;
}

Regards,
PenciDesign.



PenciDesign Supporter replied

Staff Reply

Hi,

Please send me the page URL that contains this widget.

Regards,
PenciDesign.


Fjura replied

Customer Reply

Thank you, and may I ask about the form not being centered issue? Screenshots are in the previous reply

Currently the whole form is not 100% centered, please see screenshot, would it be possible to center it fully? The header seems centered, but the form below then seems to have more space on the right side.

PenciDesign Supporter replied

Staff Reply

Hi,

Please modify the CSS like the following below:

.penci-header-signup-form a {
    text-decoration: underline;
}

Regards,
PenciDesign.



Fjura replied

Customer Reply

Hi, but that affects everything on the website, isnt it possible to only affect the text hyperlink that is placed on that Header Sign Up Form?

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

a {
    text-decoration: underline;
}

Regards,
PenciDesign.




Fjura replied

Customer Reply

that is awesome, thank you very much! May I ask you just for a small detail change? Would it be possible to have the text hyperlink underlined all the time (not just on hover) + change its text color on hover to white? Also currently the whole form is not 100% centered, please see screenshot, would it be possible to center it fully? The header seems centered, but the form below then seems to have more space on the right side.

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Logo & Header → Header SignUp Form → turn on the "Display Header Sign-Up Form only on Homepage" option.

Regards,
PenciDesign.


Fjura replied

Customer Reply

Thank you very much for the fix, may I ask you, is it possible to have this displayed only on the Homepage?

PenciDesign Supporter replied

Staff Reply

Hi,

Please modify the CSS like the following below:

.penci-header-signup-form .widget .mailpoet_form input {
    padding: 15px !important;
    background: #fff;
    color: #000;
    border: 0;
}
.penci-header-signup-form .widget .mailpoet_form input.mailpoet_submit {
    background: #000;
    color: #fff;
}
.penci-header-signup-form .mailpoet_form {
    margin-left: -10px;
    margin-right: -10px;
}
.penci-header-signup-form .mailpoet_form .mailpoet_paragraph {
    width: calc(100%/3);
    padding: 0 10px;
    float: left;
}
@media only screen and (max-width: 767px) {
   .penci-header-signup-form .mailpoet_form .mailpoet_paragraph {
        width: 100%;
        float: none;
    }
}
.penci-header-signup-form .mailpoet_form .mailpoet_paragraph.last {
    width: 100%;
}

Regards,
PenciDesign.



Fjura replied

Customer Reply

Thank you, that looks much better, but the problem is that it also changed the appearance of the other MailPoet form on:

https://www.lenivakucharka.sk/odber/

Please see before and after screenshots.

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.widget .mailpoet_form input {
    padding: 15px !important;
    background: #fff;
    color: #000;
    border: 0;
}
.widget .mailpoet_form input.mailpoet_submit {
    background: #000;
    color: #fff;
}
.mailpoet_form {
    margin-left: -10px;
    margin-right: -10px;
}
.mailpoet_form .mailpoet_paragraph {
    width: calc(100%/3);
    padding: 0 10px;
    float: left;
}
@media only screen and (max-width: 767px) {
    .mailpoet_form .mailpoet_paragraph {
        width: 100%;
        float: none;
    }
}
.mailpoet_form .mailpoet_paragraph.last {
    width: 100%;
}

Regards,
PenciDesign.



PenciDesign Supporter replied

Staff Reply

Hi,

Please add this to your site, I'll check and send you a custom CSS code.

Regards,
PenciDesign.


Fjura replied

Customer Reply

I made it work, but it looks awful, but thank you for the help

Fjura replied

Customer Reply

ah ok, you mean like adding just a text widget to the Header Signup Form field and adding a shortcode like [mailpoet_form id="1"] ? I tried this, but it doesnt work, just shows an orange line on the hp

Fjura started the conversation

Conversation Start

Hello,

may I ask, is it possible to add Mailpoet form to Header Sign Up form?

thank you

Want to join this conversation or access attachments? Sign in first.