Too much space

[paulcj2]

There is too much space between the label and fields on this form, http://www.innerpreneurworks.com/free-access/, such that the fields look like they are associated with the labels below them. What's the best way to fix this?

[Victorinox]

The form is using line breaks inappropiately i.e. to knock the input onto a new line below the label and create space between them.

<div class="mc-field-group"><label for="mce-EMAIL" style="">Email Address <span class="asterisk">*</span>
</label>
<input id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" style="display: block; margin-bottom: 1em;"></div>
<div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span><br>
</label><br>
<input id="mce-FNAME" class="required" type="text" name="FNAME" value=""></div>
<div class="mc-field-group"><label for="mce-LNAME">Last Name <span class="asterisk">*</span><br>
</label><br>
<input id="mce-LNAME" class="required" type="text" name="LNAME" value=""></div>

Remove all the <br> and use the CSS below to target the inputs on this specific form. Setting display to block puts the input on it's own line. the margin-bottom sets the space between the input and the following element (adjust to suit).

#mc-embedded-subscribe-form input { 
    display: block; 
    margin-bottom: 1em;
    }

[paulcj2]

The html is a little different from yours.

<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" /></div>
<div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input id="mce-FNAME" class="required" type="text" name="FNAME" value="" /></div>
<div class="mc-field-group"><label for="mce-LNAME">Last Name <span class="asterisk">*</span>
</label>
<input id="mce-LNAME" class="required" type="text" name="LNAME" value="" /></div>
<div class="mc-field-group input-group">

<strong>Email Format </strong>
<ul>
    <li><input id="mce-EMAILTYPE-0" type="radio" name="EMAILTYPE" value="html" /><label for="mce-EMAILTYPE-0">html</label></li>
    <li><input id="mce-EMAILTYPE-1" type="radio" name="EMAILTYPE" value="text" /><label for="mce-EMAILTYPE-1">text</label></li>
    <li><input id="mce-EMAILTYPE-2" type="radio" name="EMAILTYPE" value="mobile" /><label for="mce-EMAILTYPE-2">mobile</label></li>
</ul>
</div>

Notice that there are no <br /> tags. Please suggest how to deal with all the tags:

<div class="mc-field-group">

and show exactly where to adjust the HTML to add the CSS you suggest.

[ralph.m]

The form you linked to originally looks fine. You could use the same styles for this code as for the online form. What do you have for this so far?

[paulcj2]

Actually, I just installed a new form. The old one was from MailChimp. The new one is from SendPepper. I think this program will work much better.

[ralph.m]

The functionality has no bearing on the styling, though. You can use the same styles to lay out this form assuming you want the same layout.

[paulcj2]

I understand. For now, however, I fund the SendPepper functionality much better. Plus, it's much easier to style. Thanks for your help.

[ralph.m]

I understand. For now, however, I fund the SendPepper functionality much better. Plus, it's much easier to style. Thanks for your help.

OK, so are you OK now, or does the question still stand? I'm not sure which form is which.

[paulcj2]

I'm OK for now. The form from SendPepper is now loaded on this page.
http://www.innerpreneurworks.com/free-access/

[ralph.m]

Cool. Glad you found a solution.