WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
[resolved] Make Variables include labels inside and appear horizontally (also with submit) (7 posts)

  1. Tamas Ratkai
    Member
    Posted 6 months ago #

    Hello!

    I'm trying to make my Mailchimp signup form displayed horizontally. So far I made till a point makeing changes in the CSS but after it I just can't solve to make it look nice.

    CSS here

    I would like to have the variable labels inside the input fields to.

    Sample here

    I tried already some examples that I found on the forum but sadly no luck.

    I now left the css as it is after install so you can check it out.

    Domain:

    http://test.peplastkft.hu

    Please help!

    Thx!

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

  2. mc_dominic
    MailChimp Support Rep
    Posted 6 months ago #

    Hi Pixeland,

    Thanks for hopping in the forum! Let's tackle adding the text in the input fields first. To do that you would first need to hide the field labels, then enter in a default value for the field in your MailChimp list settings.

    Your existing css seems to align the fields, so you can keep that, but add this css your style.css to hide the field labels:

    #mc_signup label {
    	display: none;
    }

    To add the text to the fields, follow this guide on adding a default value in your MailChimp lists, this default value will display as text in your field.

    Also there are a few modifications I would suggest making to the css you’re adding.

    The first is setting a width for the input fields. This will make them take up a percentage of the space in the form.

    #mc_signup_form .mc_input{
      width: 22%;
      float:left;
      padding:1.0em;
    }

    Next set a smaller size for the signup button and reomve the margin added to the top.
    After these changes the form should appear similar to your screenshot. Just make sure to add the css to the bottom of your style.css file.

    input#mc_signup_submit{
      width: 25%;
      margin-top: 0;
      text-align: center;
      float: left;
    }

    Thanks

    -mcd

  3. Tamas Ratkai
    Member
    Posted 6 months ago #

    Hi MCD! Thanks for the quick support!

    This is how my CSS looks now. I added the default names also, but yet I don't know where it suppose to change something. In the tutorial it was only mentioned how to use it in a campaign.

    But maybe I missed something.

    The signup form by the way started to look like on the image, yet I got stuck again. I really need to learn CSS on a higher level. :)

    Could you please check it out?

    #mc_signup {
      width: 100%;
    }
    
    #mc_signup label {
    	display: none;
    }
    
    #mc_signup_form .mc_input{
      width: 22%;
      float: left;
      padding: 1.0em;
    }
    
    .mc_merge_var {
      overflow: visible;
      float: left;
      padding: 1.0em;
    }
    
    #mc-indicates-required {
      display: none;
    }
    
    input#mc_signup_submit{
      width: 22%;
      margin-top: 0;
      text-align: center;
      float: left;
    }

    Thanyks for your help!

  4. mc_dominic
    MailChimp Support Rep
    Posted 6 months ago #

    Hi Pixieland,

    Just to clarify, when you add the default values, they should appear in the input fields as placeholder text. If it's not displaying, you might want to go to the settings in the plugin and click update list. This should update the plugin and bring over those values.

    Looking at your code, it seems that this css is causing the blocks to appear small.

    .mc_merge_var {
      overflow: visible;
      float: left;
      padding: 1.0em;
    }

    If you remove that code, the input fields should fill up the space. You might want to check out these resources on styling forms with css. They can be really helpful.

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms

    http://www.sitepoint.com/style-web-forms-css/

    Let us know if you have any other questions.

    -mcd

  5. Tamas Ratkai
    Member
    Posted 6 months ago #

    Hi mc_dominic!

    Awsome it worked! Just what I needed! My only problem is that now only the email default text is not showing up.

    Check WordPress but I cant give a default value to the EMAIL form.

    Could you help me how I can fix that?

    Cheers,

    Pixeland

  6. mc_dominic
    MailChimp Support Rep
    Posted 6 months ago #

    Hi Pixeland!

    I'm glad that worked! In MailChimp, the email field doesn't have a default merge value. So it wouldn't be transferred as a placeholder in input fields. But you can change a bit of code in the plugin so that it uses the Label in MailChimp as the placeholder text. This would work for all fields including the email field.

    Here are the steps to change the code:
    -In wp-admin, go to Plugins > Editor > MailChimp > mailchimp_widget.php.
    -Locate this line of code:
    <input type="text" size="18" placeholder="'.esc_html($var['default']).'" name="'.esc_attr($opt).'" id="'.esc_attr($opt).'" class="mc_input"/>';
    -Change $var['default'] to $var['name'].

    This will begin using your field label as what appears in the placeholder attribute for your input fields. But I would warn you that if you update the plugin, these changes might not stay, so you might need to reedit it after updating.

    Let us know if you have any other questions.

    -mcd

  7. Tamas Ratkai
    Member
    Posted 6 months ago #

    Hi mc_dominic!

    Thanks for your support! I managed to make the changes as I wanted!

    YOU GUYS ARE AWESOME!

    Cheers,

    Pixeland

Reply

You must log in to post.

About this Plugin

About this Topic