Make Variables include labels inside and appear horizontally (also with submit)

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

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!

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

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

Let us know if you have any other questions.

-mcd

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

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

Hi mc_dominic!

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

YOU GUYS ARE AWESOME!

Cheers,

Pixeland