Text input fields instructions

  • Resolved BK2325

    (@bk2325)


    11 years, 11 months ago

    Hi,
    In order to give the form a cleaner look, I added placeholder text in the email and first name fields (by modifying the plug-in files) following the instructions you gave in another thread on this forum.
    Now the text (Email & First name) appears both above and inside the input field. Questions:

    1. How do I remove the text above each of the two fields?
    2. How do I reduce the spacing between the two fields once the text above the fields has been removed?

    Here is the site I am working on if you want to see what the subscribe form currently looks like:

    http://mandarinhq.com

    Thanks in advance!

    https://ww.wp.xz.cn/plugins/mailchimp/

Viewing 3 replies - 1 through 3 (of 3 total)
  • mc_elliot

    (@mc_elliot)

    11 years, 11 months ago

    Hey BK2325!

    Thanks for swinging by the forum. I totally understand the need to apply those changes to the plugin, and we’re more than happy to help.

    When it comes to hiding the text above those input fields and reducing the amount of space they’d previously occupied, we’ll want to modify the .mc_header class. One option that would allow for the sort of change you’re looking for would be to change its visibility to hidden and its font to xx-small (since the words are technically still there, only hidden). Here’s an example of some code that should work:

    .mc_header {visibility:hidden;
font-size:xx-small;}

    We’ll want to apply those changes directly to your theme’s style.css file. To locate the complete CSS cheatsheet, open your site’s Admin panel, hover over Settings, select MC Setup, and scroll down to the yellow heading that’s marked as CSS Cheat Sheet.

    Let us know if there are any questions! We’ll be happy to help 🙂

    -Elliot

    Thread Starter BK2325

    (@bk2325)

    11 years, 11 months ago

    Thanks a lot for getting back to me so quickly! That snippet of code worked great as far as hiding the text goes.

    The spacing between the subtitle and the email input field as well as the spacing between the email input field and the first name input field, is still much too large. I have tried to figure out how to change the padding between these elements using the CSS cheat sheet but haven’t been successful as you can see here:

    http://mandarinhq.com

    Really appreciate your help!

    BK

    mc_elliot

    (@mc_elliot)

    11 years, 11 months ago

    Hey BK!

    It’s good to hear from you again.

    A good way to reduce the space between those fields would actually be to adjust the margins a bit. For the space in between the input fields, we could use something like the following rule:

    #mc_signup input {margin-top:0;
margin-bottom:0;

    And for the space underneath the subheader, we could use a similar rule, along with a CSS override, like what’s shown below:

    #mc_subheader {margin-bottom:0 !important;}

    You may nevertheless want to play around with it a bit, but let us know if there are any questions, or if this doesn’t quite work for you. We’re always happy to offer advice! 🙂

    -Elliot

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Text input fields instructions’ is closed to new replies.