Support » How-To and Troubleshooting » [Resolved] White space before form

[Resolved] White space before form

  • Hi.

    I’m working on a site redesign and I’ve included a mailing list sign-up form. In the past, using the same code, things have looked fine. But this time, there’s a big white space between the text and the form…


    I assume it has something to do with the lines of code in the form but don’t know how to fix it. Any suggestions?

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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>

    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>

    See if that works.

    Huh. I used all of that code because Dreamhost seemed to suggest it was all necessary…


    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).

    Nice! Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] White space before form’ is closed to new replies.