Hi Dmaqg,
Thanks for hopping in the forum. I was able to take a look at your site and it seems there’s a height set for input fields in your site’s css. Currently this is set to 16px, which is making the form too short and hiding the text. To fix this, look in the style.css for your theme, and either remove it or change it to another value such as 32px. The css to change looks like this: input[type=”text”] { height: 32px; }
-mcd
Thread Starter
dmaqg
(@dmaqg)
Thank you for your help, that worked. But do you think you can answer one more question? I would like the two forms to have the same style. Specifically, I would like the MailChimp form to follow the style of the Appointment form and have the field label as text inside the form field. (When I added the extra 16px to the field height, it made the other form too high!)
What would the css look like to make that happen? If you could, thank you!!
Hey dmaqg,
Thanks for letting us know that worked. For your follow up question, I have a couple of suggestions. The first is to essentially find the CSS definitions used for your Appointment form, then essentially duplicate those CSS properties for the MailChimp plugin specific CSS classes and IDs in your CSS. If you scroll to the bottom of the plugin’s settings page within WordPress, there’s a cheat sheet with the CSS used for those values.
While moving the field label inside the form field isn’t directly possible, there is an alternate approach here. If you use CSS to make the field labels invisible (using display:none;, for example), that will remove the field labels. Then you can jump into your MailChimp list’s settings within MailChimp itself, and go to Signup forms > General forms. Once in the form builder you can click each of your text fields, and on the right side of the editor under “field settings” you can add text inside the “help text” field, then save. If you then go to the plugin’s settings, then click “Update List” next to the list name, that should cause the plugin to start displaying your entered text within the form fields on your site.
Let us know if you have any other questions.
-Gabe
Just to clarify, dmaqg:
When I mentioned using display:none; or something similar, that could be applied to a new section of CSS added to your site’s CSS indicating how to format .mc_header, which is described at the bottom of the plugin’s settings page.
Feel free to ask us questions!
-Gabe
Thread Starter
dmaqg
(@dmaqg)
Whew! Thank you, that was a very thorough answer! I am almost happy with the result, but can’t seem to get the help text to display within the input field. Its there now right after the input field!
Turns out my theme included all mc_signup styles right in the theme styles, so I can see them all but can’t figure out the one that corresponds with help text. Do you know?
Thanks Gabe!
-Emma
Hi dmaqg,
Thanks for writing back. It seems that mc_gabe might mistyped the wrong field. Instead of adding the text you want in the field to the help text, add it to the default merge tag value field in your list. That should add the text inside the input field.
Thanks!
-mcd
Thread Starter
dmaqg
(@dmaqg)
Oh!!! Thanks for that clarification mc_dominic! I was going to just be ok with it underneath like it was. But I did as you suggested and sure enough, it moved into the field!
That did create another problem though, for some reason the MailChimp signup form doesn’t seem to allow me to add a default merge tag for the email. Probably because the email field is required. I think maybe my client might have to just be ok with the field labels underneath (or the mix I have now) Don’t you? Well, thanks for the clarification, it’s good to know how those things all work!
-Emma
