Mailchimp error: "Cant' render the widget"

I am trying to use the Mailchimp plugin and get this message:
Ooops, something seems to have gone wrong with rendering the widget

I am using Spirit theme.

  • Nithin

    Hi Alex,

    Hope you are doing good today.

    How to I modify the font appearance, alignment and colour of the name and email fields as well as the button colour?

    Have you figured this out? You'll have to make use of CSS for these changes, you can click on the the settings button which gives you a CSS editor for you make changes to it. If you could be exact about you specifications, like colour, font and alignment. We could help you better.

    [image pos="0"]

    Please let us know if you need any further help. Have a nice day.

    Kind Regards,
    Nithin

  • Alex

    No I haven't figured this out yet and the screen shot you sent actually shows the visual place holder that is on the theme, not a working form. this is not using the Mailchimp plugin, although that is exactly what I want to do and how I want it to look, just using the mail chimp plugin to collect the addresses.

    Thanks for you help and I look forward to hearing back from you soon.

  • Kasia Swiderska

    Hello Alex,

    I copied styles from test form on the main site and added to the MailChimp widget preset:

    .incsub-mailchimp-field-wrap label {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 16px;
        line-height: 1.6em;
        color: rgba(0,0,0,1);
    }
    .incsub-mailchimp-field-wrap input {
    
        padding: 12px 10px;
        box-sizing: border-box;
        font: 16px Open Sans, Arial;
        color: #f68c20;
        background: #fff;
        outline: 0px;
        border: 1px solid #414346;
     margin-top: 5px;
    }
    .incsub-mailchimp-field-wrap input:active, .incsub-mailchimp-field-wrap input:focus {border-color: #f68c20;
    }
    .incsub-mailchimp-form input[type="submit"] {
            background: #414346;
        color: #FFFFFF;
        border-radius: 4px;
        border: 0px;
        border-bottom: 3px solid #ee7513;
        padding: 5px 25px;
        font-size: 24px;
        display: inline-block;
        text-decoration: none;
    
        font: 24px Open Sans, Arial;
    }

    Please note that MailChimp widget has different html output and its in the sidebar, so I wont look exactly the same as this custom form.

    kind regards,
    Kasia

  • Alex

    Hi Kesia

    Apologies for not responding sooner. There has been some issues related to me getting in to the site, which initially I thought was directly related to the code you sent as it happened immediately after testing it out. It turns out this was an unfortunate coincidence. Anyway, that issue has now been resolved by one of the developers.

    I have implemented that code you sent and have managed to alter the appearance of the form elements. I was wondering if you could advise me how to achieve the following:

    - centre align all content within the widget
    - change the size of the input elements
    - align form fields side by side rather than on top of each other (well the First and Last name fields at least)
    - place the Labels inside the input fields. I know how to do this with Gravity forms but not this plugin.

    I look forward to hearing back from you and thanks for your help and assistance.

    Many thanks

    AJ

  • Kasia Swiderska

    Hello AJ,

    Previous code was prepared for the sidebar widget, that is why it had some parts removed (like aligning fields next to each other).

    - centre align all content within the widget

    .widget.incsub-mailchimp-widget {
        text-align: center;
    }

    - change the size of the input elements

    You can change this part of CSS:

    .incsub-mailchimp-field-wrap input  {
     padding: 5px 5px 5px 5px;
    }

    and instead of the 5px put lower value, and this way fields will be smaller.

    - align form fields side by side rather than on top of each other (well the First and Last name fields at least)

    .incsub-mailchimp-field-wrap {
        margin-bottom: 1em;
        width: 31%;
        float: left;
        padding-right: 2%;
    position: relative;
    }

    - place the Labels inside the input fields. I know how to do this with Gravity forms but not this plugin.

    I suspect that gravity form uses a placeholders instead of label and this plugin doesn't use placeholders. You ca check of this will fit your needs but it is only to put labels on top of the fields and they will not behave as placeholders:

    .incsub-mailchimp-field-wrap label {
         position: absolute;
         top: 5px;
         left: 5px;
         }

    and change that part:

    .incsub-mailchimp-field-wrap input  {
     padding: 5px 5px 5px 5px;
    }

    to

    .incsub-mailchimp-field-wrap input  {
     padding: 5px 5px 5px 80px;
    }

    Let me know if you still need any further assistance here

    kind regards,
    Kasia