WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] White space before form (5 posts)

  1. initialsbr
    Member
    Posted 1 year ago #

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

    http://cegolden.dreamhosters.com/newsletter/

    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?

  2. Jay Hoffmann
    Member
    Posted 1 year ago #

    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.

  3. initialsbr
    Member
    Posted 1 year ago #

    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!

  4. Jay Hoffmann
    Member
    Posted 1 year ago #

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

  5. initialsbr
    Member
    Posted 1 year ago #

    Nice! Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic