Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3396462
Header Sign Up form - Mailpoet
Closed

Comments

  •  2
    Fjura started the conversation

    Hello,


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


    thank you

  •  2,541
    PenciDesign replied

    Hi,

    Yes. You can add the Mailpoet in the header signup form by installing the MailPoet plugin at this link: https://wordpress.org/plugins/mailpoet/ and follow the shortcode document here: https://kb.mailpoet.com/category/120-shortcodes

    Regards,
    PenciDesign.


  •  2
    Fjura replied

    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

  •  2
    Fjura replied

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

  •  2,541
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  2
    Fjura replied

    Hi, thank you, I re-added it. Normally on the subscribe page, it looks like this:

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

    Also may I ask, is it possible to only display on the Homapage?

    Attached files:  2023-06-20 17_25_28-Window.png

  •  2,541
    PenciDesign replied

    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.



  •  2
    Fjura replied

    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.

    Attached files:  after.png
      before.png

  •  2,541
    PenciDesign replied

    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.



  •  2
    Fjura replied

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

  •  2,541
    PenciDesign replied

    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.


  •  2
    Fjura replied

    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.

    Attached files:  77 (2).png
      77 (3).png

  •  2,541
    PenciDesign replied

    Hi,

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

    a {
        text-decoration: underline;
    }

    Regards,
    PenciDesign.




  •  2
    Fjura replied

    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?

  •  2,541
    PenciDesign replied

    Hi,

    Please modify the CSS like the following below:

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

    Regards,
    PenciDesign.



  •  2
    Fjura replied

    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.

  •  2,541
    PenciDesign replied

    Hi,

    Please send me the page URL that contains this widget.

    Regards,
    PenciDesign.


  •  2
  •  2,541
    PenciDesign replied

    Hi,

    Please add the following CSS code to your site:

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

    Regards,
    PenciDesign.



  •  2
    Fjura replied

    thank you! it worked

  •  2
    Fjura replied

    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.  

    Attached files:  1.png
      2.png

  •  2,541
    PenciDesign replied

    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 privately
  •   PenciDesign replied privately
  •   Fjura replied privately
  •   PenciDesign replied privately
  •   Fjura replied privately
  •  2,541
    PenciDesign replied

    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.


  •  2
    Fjura replied

    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

  •  2,541
    PenciDesign replied

    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.


  •  2
    Fjura replied

    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?

  •  2,541
    PenciDesign replied

    Hi,

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

    Please check.

    Regards,
    PenciDesign.


  •  2
    Fjura replied

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

  •  2,541
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  2
    Fjura replied

    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;
    }
    
  •  2,699
    PenciDesign replied

    Hi,

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


    Best Regards,

    PenciDesign

  •  2
    Fjura replied

    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.

    Attached files:  999.png
      999b.png

  •  2,541
    PenciDesign replied

    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.


  •  2
    Fjura replied

    thank you, that seems to have fixed it :)