newsletter form styling

Hello,

I have recently replaced the Mailchimp plugin with MailPoet because Mailchimp no longer suited our needs. I tried to apply the theme’s styling to the MailPoet form by selecting the option to inherit the theme’s styles.

While the email input field correctly inherits the theme’s styling, the submit button (“Sign up”) does not.
On the top is woodmart inheritet style of form, below is my attempt to copy the style.

Additionally, when I try to manually edit the submit button inside the MailPoet form editor, I encounter the following error:
“This block has encountered an error and cannot be previewed.” So it was imposible to edit manualy..

I also tried modifying the code a little bit myself, but I accidentally removed the border around the email input field, and I don’t know how to bring it back.

Could you please help me fix this, or guide me on how to properly style the submit button to match the theme?

Thank you very much for your support!

Hello,

After checking your site, I noticed that the form currently displayed in the footer is still the Mailchimp plugin form, not MailPoet.

See Screenshot for clarification: https://ibb.co/HLtKtVHx

If you want to use the MailPoet plugin form use this form on your site and share the WordPress login details so I can further check on your site and give you a possible solution.

Best Regards,

Hi, yes, I’ve hidden the MailPoet form due to visits on my website — sorry about that! I was hoping the issue could be resolved without needing to display the MailPoet form publicly, and by copying the style from Mailchimp.

Link is in private

Update: Sorry I just realized I forgot login detalils. Link provided in private.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global. Change the code as per your requirement.

/* Fix the email input field styling */
#mailpoet_form_2 input[type="email"] {
    padding: 12px 20px !important;
    font-size: 14px !important;
    color: #333;
    background-color: #e8e2e2 !important;
    border: 1px solid #e1e1e1;
    border-radius: 6px !important;
}

/* Style the submit button properly */
#mailpoet_form_2 input[type="submit"] {
    background-color: #016450 !important; 
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    text-transform: uppercase;
    font-weight: 600;
    border: none !important;
}

/* Submit button hover effect */
#mailpoet_form_2 input[type="submit"]:hover {
    background-color: #00ffc1 !important; 
}

Best Regards,

new info provided privately

Hello,

You have missed anything in the private area. If you have any questions, feel free to contact us.

Best Regards,

Hi,

Thank you so much for the code!

I tried to fix some things on my own, but eventually gave up.
I could probably handle the colors and font sizes myself, but the more I work on this, the more I realize that some parts are beyond my current understanding.

The MailPoet form here has some strange margins, especially around the submit button on the right side. Also, there seem to be unknown margins causing a large gap between the email input field and the submit button, even though I set the spacing to 10px.

I keep checking in Inspect, but I notice that the Mailchimp form is flexible and adapts to the space it’s in — whereas my MailPoet version behaves like a fixed block. It’s looks different on one page, but when I place it in the footer inside an Elementor container, it completely breaks the layout and doesn’t resemble the Mailchimp form at all.

I’ve already added CSS to prevent the submit button from jumping into a new line inside Elementor containers — but still, I don’t know more than that…

Could you please make it look exactly like the Mailchimp version — flexible and responsive — so that when I place it in the Elementor footer, it appears just like the original? In future, I can maybe change the position of the form with Elementor, an I want to make sure it won’t break because it’s fixed.

You don’t need to change any of the colors — only the dimensions, paddings, margins, and spacing.

Thanks again so much!

Best regards,

Hello,

Please add this code to the Theme Settings > Custom CSS > Global. Change the code as per your requirement.

#mailpoet_form_2 {
  width: 100%;
  max-width: 100%;
}

#mailpoet_form_2 .mailpoet_paragraph {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  gap: 10px;
  margin: 0 !important;
}

#mailpoet_form_2 input[type="email"] {
  font-size: 13px !important;
  background-color: #e8e2e2 !important;
}

#mailpoet_form_2 input[type="submit"] {
  height: 42px !important;
  background-color: #016450 !important;
  color: #ffffff !important;
}

#mailpoet_form_2 input[type="submit"]:hover {
  background-color: #00ffc1 !important;
}

Replace all your previous #mailpoet_form_2 CSS with this.

Best Regards,

It’s not working. I’m again on the begining. Plus you entirely deleted my codes on global css. I had codes there for other things….

Please give me back my codes

Hello,

I’m sorry to hear about the inconvenience. Just to clarify, I didn’t delete the custom CSS on your site — I only provided new CSS code to replace the previous one.

Try to add custom css code in Theme Settings > Custom > Custom CSS for mobile.

#mailpoet_form_2 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  #mailpoet_form_2 .mailpoet_paragraph {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
  }

  #mailpoet_form_2 input[type="email"],
  #mailpoet_form_2 input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

On mobile,

Ensures the form stacks vertically on mobile
Avoids pushing the form off-screen
Keep the input and submit button 100% wide.

For the desktop, use this custom css code.

#mailpoet_form_2 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#mailpoet_form_2 .mailpoet_paragraph {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

#mailpoet_form_2 input[type="email"] {
  flex: 1 1 auto;
  width: 100%;
  padding: 12px 15px !important;
  font-size: 13px !important;
  background-color: #e8e2e2 !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  height: 42px !important;
  margin: 0 !important;
}

#mailpoet_form_2 input[type="submit"] {
  flex-shrink: 0;
  width: auto;
  white-space: nowrap;
  padding: 12px 20px !important;
  height: 42px !important;
}

Result:

On the desktop, the input and button are side by side with spacing.

Best Regards,

Hi Aizaz,

This is already looking much better and I feel like I’m on the right track to make the form visually identical to the Mailchimp version. Thank you for your help so far!

I just need a bit more assistance to finalize everything:
The submit button continuously has some margins that create extra spacing between it and the email input field. I tried the following code:

margin: 0 !important;
margin-left: 0 !important;

Unfortunately, it’s not working – the margin is still present on both the input field and the button. Is there any additional CSS code I can use to fix this spacing?

Also, I don’t want the form to look different on mobile. I want it to be identical to the desktop version, with the email input field longer than the submit button, just like in Mailchimp.
—

I have a question regarding the disappearance of the Global CSS. When I opened the WordPress Customizer yesterday, the entire Global CSS tab was empty. I’m certain I didn’t delete anything manually.

Could you please tell me where this Global CSS code is stored physically in the files or database? I couldn’t find it in the styles.css file of the WoodMart theme or its child theme. I would really appreciate it if you could point me to the file path or database location, so I can try to restore it manually from a backup.

Thank you in advance for your support and understanding!

Best regards,

One more thing… I sent you a link with forms that are not placed inside an Elementor container. However, if you scroll down, on your phone, to the newsletter section, you’ll see that the same Mailchimp form is also displayed in a single row even in the mobile view. That’s exactly what I’m trying to achieve with the MailPoet form too. This is how it looks right now, without your codes in mobile CSS

Hello,

01. Please use the previous custom css in the desktop area and for the gap use this code.

#mailpoet_form_2 .mailpoet_paragraph {
  gap: 0 !important;
} 

For the mobile, try to use this custom css code for mobile only.

#mailpoet_form_2 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto !important;
}

#mailpoet_form_2 .mailpoet_paragraph {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
}

#mailpoet_form_2 input[type="email"] {
  flex: 1 1 auto;
  padding: 12px 15px !important;
  height: 42px !important;
}

#mailpoet_form_2 input[type="submit"] {
  flex: 0 0 120px; /* Fixed width for button */
  padding: 12px 15px !important;
  font-size: 13px !important
}

02. The Global CSS from the Theme Settings is stored in the database, not in theme files. It’s saved in the database. You can restore it from a database backup by locating it.

Best Regards,

Hi Aizaz,

I was forced to recreate a new MailPoet form from scratch. MailPoet automatically adds margins around the form columns that cannot be fixed by simply removing gap. After several hours of searching, I found margins on right click, inspect. The solution was to remove those margins using this code:

.mailpoet_form_column {
margin: 0 !important;
}

Now, could you please help me achieve the appropriate width for the email input field on mobile view? I tried to do it myself, but using width: 247px !important; doesn’t work. The desktop version looks fine.

Thank you!

P.S. I have to remove form due to website visits, I’m sending you the link to the form in a private message.

Hello,

To ensure the email input field in your MailPoet form has an appropriate width on mobile, Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.

.mailpoet_form_column input[type="email"] {
    max-width: 247px !important;
  }

Best Regards,

Hello,

Unfortenately, it’s not working. It only removes the gap.

Hello,

Could you kindly share screenshots highlighting the specific area where you want to achieve the appropriate width. This will help me better understand your concern and guide you more effectively.

Best Regards,

Hello Aizaz,

This issue has been resolved.You can close this topic. I would kindly ask you to delete this picture, please.

Thank you for your help.

Best regards.

Hello,

You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts