Are you using a plugin?
Right now you have quite a few input types that you aren’t using and are “hidden” from view but still include line height and line breaks, giving you that whitespace. Right now your form looks like this:
<form method="post" action="http://scripts.dreamhost.com/add_list.cgi">
<input type="hidden" name="list" value="info"><br>
<input type="hidden" name="domain" value="http://cegolden.com"><br>
<input type="hidden" name="url" value=""><br>
<input type="hidden" name="unsuburl" value=""><br>
<input type="hidden" name="alreadyonurl" value=""><br>
<input type="hidden" name="notonurl" value=""><br>
<input type="hidden" name="invalidurl" value=""><br>
<input type="hidden" name="emailconfirmurl" value=""><br>
<input type="hidden" name="emailit" value="1"><br>
Name: <input name="name"><br>
E-mail: <input name="email"><br>
<input type="submit" name="submit" value="Join Our Announcement List"><br>
<input type="submit" name="unsub" value="Unsubscribe"><br>
</form>
Except you are only using the bottom two Name: <input name="name"><br> and E-mail: <input name="email"><br> If you can edit the HTML directly, just delete all of the other input fields and line breaks.
Also, to keep your semantics looking alright, you should wrap the title for each field in <label>, which indicates that it is attached to the input field. You can also remove the and put the spacing in the label tag. So your final code should look like this:
<form method="post" action="http://scripts.dreamhost.com/add_list.cgi">
<label>Name: </label>
<input name="name">
<label>E-mail: </label>
<input name="email" type="email">
<input type="submit" name="submit" value="Join Our Announcement List"><br>
<input type="submit" name="unsub" value="Unsubscribe"><br>
</form>
See if that works.
Huh. I used all of that code because Dreamhost seemed to suggest it was all necessary…
http://wiki.dreamhost.com/Announcement_Mailing_List
In the code you posted, it looks like WordPress appended the
tags at the end of each line—that wasn’t in the code I put in there. I left all the hidden fields but just deleted the line breaks in the html editor and that seemed to solve the problem. Added some inline CSS and took out the name field and input text (which isn’t necessary) and everything looks like I wanted it.
Thanks jhoffm34!
Oh, I see. I guess you need those other input types for the cgi script. But it is good to get into the habit of using <label> tags.
I found http://www.tangledindesign.com/blog/how-to-create-a-contact-form-using-html5-css3-and-php/ to be a pretty thorough tutorial on proper HTML5 forms (just ignore the PHP bit).
