WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Embed form code in conflict with WP css (according to suppor (10 posts)

  1. Suzeabelle
    Member
    Posted 2 years ago #

    I have two issues and support suggested I come to visit the ninjas here for help. I am not using the widget- I'm embedding the signup forms on pages.

    1 When using the Create Embed code area of MC the submit buttons are not appearing. see http://www.activeastrology.com/about page for an example.
    Or screen shot here http://screencast.com/t/xu25Ut11Jg
    Used the superslim form to create the code.

    2. When putting embed code with 3 required fields using Classic Code option it breaks the entire slider code unless I turn off Java script. Meaning page is totally blank , and both sliders are gone.

    If I do turn off JavaScript option, there is no submit button and the Date field I'm using is stacked vertically.

    This is on same site, second slider on home page.
    http://screencast.com/t/7l4ImmhUkre

    Thanks for your help.
    Susan

    http://wordpress.org/extend/plugins/mailchimp/

  2. sjgelb
    Member
    Posted 2 years ago #

    I'm having the same problem as Susan (above) - the submit buttons are not appearing when I try to add the super slim form and/or naked form to my blog page itself (not the sidebar), by using the embed code.

    As an example, for the super slim, I accessed the code in Lists > forms > share it > create html code for small subscribe form. I added it to the HTML part of the page. I then clicked update and then clicked on the "visual" section of the page and the sign-in form look great, including the "subscribe" button. However, when I click to view the page, the "subscribe" button is not there. I repeated the process several times, but no luck. I'm using the U-Design theme.

    MailChimp customer support recommended I reach out to WordPress support for this issue. I'm a newbie at this. Hope you can help.

    Thanks,
    Suzanne

  3. mc_nate
    Member
    Posted 2 years ago #

    Hey there!

    Occasionally we definitely see conflicts with certain classes in WordPress. Essentially, WordPress is looking for the submit button to be named something it's not. When it doesn't find that specific class it's looking for, sometimes it sets the class to "clear" which means no one will be able to see it:

    http://cl.ly/1b0M0Y332U1i3o3Z223d

    There are a couple of workarounds that involve hacking up the HTML and CSS to get WordPress to cooperate, but in this case, I might recommend just going with the WordPress plugin and foregoing the embedded form entirely.

    http://wordpress.org/extend/plugins/mailchimp/

    The address fields getting all crazy has to do with the way WordPress is rendering embedded HTML. Even though they offer the option to input code, they parse things a little strangely instead of just accepting the code as-is. There are plugins to correct this, but it can be totally avoided by using the MailChimp plugin (as that does render correctly).

    Plus, you can use the plugin's shortcode to add it to the body of your page, as well.

    Let us know if we can help with anything else!

    We're more than happy to help!

    Cheers

  4. sjgelb
    Member
    Posted 2 years ago #

    Thank you for the helpful info. I downloaded the mailchimp wordpress plugin you recommended above. When I tried to upload the mailchimp plugin in a .zip format I got an error 404 message saying the page could not be found.

    The instructions for the plugin say to "1. Unzip our archive and upload the entire mailchimp directory to your /wp-content/plugins/ directory." I then unzipped the file which yielded a yellow file called mailchimp. Tried to upload the unzippled file, didn't work. When I opened the folder, it contained multiple files. How can I upload the entire mailchimp directory to my /wp-content/plugins/ directory?

    Thanks very much for your help.
    Suzanne

  5. Suzeabelle
    Member
    Posted 2 years ago #

    Hi guys,
    Susan - the one the started the thread here.
    Using the widget is not what I want to do.
    I want to have the subscribe button on my opening slide AND inline on html pages.
    I know this can be done with other mail list programs because I see it all the time on my competitors site.
    I love mailchimp and would like to keep using it and recommending it to my students.
    I've worked with the widget before (and it has needed a lot of tweaking as well to line up fields correctly) this situation calls for something different.
    Support seemed confident that it could be made to work if I came here and asked you guys. I'm not a coder, but can follow instructions.
    Hoping to get an answer soon- this had delayed anyone from signing up for almost a week now.
    Thanks
    Susan

  6. sjgelb
    Member
    Posted 2 years ago #

    Hi, thanks for your response above. Someone helped install the recommended plugin (http://wordpress.org/extend/plugins/mailchimp), so I no longer have that problem.
    Per your recommendation, I then used the plugin's shortcode to add it to the body of my page. Unfortunately, I still haven't achieved my goal - to place a sign-up button in the text of a page or post. The shortcodes didn't work. On seperate occassions, I placed the first and third shortcode (listed below) in the html section of a post..the only one that appeared in "view" mode was <?php mailchimpSF_signup_form(); ?> However, that shortode generated a "Search" button, not a sign-up button. Am I doing something incorrectly? Please advise.

    The excerpt below is from: http://wordpress.org/extend/plugins/mailchimp/
    "Advanced
    If you have a custom coded sidebar or something else special going on where you can't simply enable the widget through the WordPress GUI, all you need to do is:

    If you are using WordPress v2.8 or higher, you can use the short-code:

    [mailchimpsf_form]
    If you are adding it inside a php code block, pop this in:

    mailchimpSF_signup_form();
    Or, if you are dropping it in between a bunch of HTML, use this:

    <?php mailchimpSF_signup_form(); ?>
    Where ever you want it to show up.

    Note: in some environments you will need to install the Exec_PHP plugin to use that method of display. It can be found here: http://wordpress.org/extend/plugins/exec-php/"

  7. mc_nate
    Member
    Posted 2 years ago #

    Hey Suzeabelle!

    No problem. The "submit" button isn't showing up due to a conflict with certain elements with this site. While the button is still there in the code, it's set to display as "clear" or, essentially, invisible. Using Chrome's Developer Tools, you can see that the submit button is there:

    Screenshot -- http://cl.ly/1s0c3M3t3y1f2g2m0C27

    If we change the div class to anything other than "clear", the submit button pops back up! So, in this screenshot, we've set the class to "mcclear" instead of just "clear":

    Screenshot -- http://cl.ly/1S1h1i3m3B2D0N2m3b3S

    So, once that div class has been adjusted in the code, the submit button should show up, as expected.

    Now, as far as the date field is concerned, WordPress has a quirky way of rendering HTML that's included in a post. In order for things to render exactly like they do, normally, you'll need to use another plugin such as Raw HTML. Unfortunately, this is just a limitation that's in place and we can't necessarily override it from our end of things. :(

    Again, you will need to disable javascript for the embedded form that's added to your page in order to prevent any javascript conflicts. However, the form should still submit correctly. Instead of showing the "success" or "error" messages right there on the page, the subscriber will see a popup with that success message or a page to correct any errors.

    If we can assist with anything else, please don't hesitate to let us know.

    Cheers

  8. mc_nate
    Member
    Posted 2 years ago #

    Hey sjgelb,

    Would you mind adding that first shortcode, [mailchimpsf_form], to your site and sending us a link to have a peek at what's going on? That will definitely give us a better idea of what exactly you're seeing on that end of things. :)

    Give us a shout back!

    Cheers

  9. sjgelb
    Member
    Posted 2 years ago #

    Hi mc-nate,

    Thanks for your email. While waiting for your reply, somehow I intuitively applied the fix your recommended to Suzeabelle - I change the div class to "button" instead of "clear, and the submit button appeared - problem solved.

    As for adding that first shortcode, [mailchimpsf_form], to my site, I just realized that the shortcode was not working because the Mailchimp Setup was not complete. With that taken care of, the shortcode works! ONE FINAL QUESTION: How do I edit the form that is connected to that shortcode (I'm a newbie at this, so if possible, a detailed response would be much appreciated).

    Thanks again,
    Suzanne

  10. mc_nate
    Member
    Posted 2 years ago #

    That's always good news, Suzanne!

    Depending on what you mean by "edit the form that is connected to that shortcode", there are a couple of different options.

    The list that's attached to the shortcode can be edited by going to "Settings" -> "MailChimp Setup" and changing the list dropdown from there. One thing to note is that the plugin only supports one list, site-wide. So that means that any instance of the plugin (shortcode or widget) will be using the same list.

    Now, if you're wanting to adjust how the form actually looks, you can do that from within the "Settings" -> "MailChimp Setup" area, as well. From there, you can change the color of the form's text, background, and border. However, for a little more control, you can always use CSS to change how the form looks, completely!

    The best suggestion I have for that is to get super-comfortable with Chrome's Developer Tools and/or Firebug for Firefox. You can right-click and then use "Inspect Element" to isolate exactly what you want to change and then add the appropriate CSS to your sites stylesheet under "Appearance" -> "Editor" -> "Style.css".

    If we can help with anything else, give us a shout!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic