WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Contact Form 7 Formatting (11 posts)

  1. gabevanlelyveld
    Member
    Posted 11 months ago #

    Hi, I'm running into a couple minor issues with my Contact Form 7 forms on my WP website. I looked up how to make a two column form and found this suggestion, which has a look I like. The only issues I'm having are:

    1) There is no border around the email field.
    2) I changed the width throughout the CSS to 100% to make the form responsive, but when I test it out the fields don’t all line up nicely on the left. Some get indented in a bit.

    Any advice is much appreciated, Gabe

    whaleheartproductions.com/contact

  2. gabevanlelyveld
    Member
    Posted 11 months ago #

    Still haven't figured this out yet. Any advice would be greatly appreciated.

    -Thanks

  3. gabevanlelyveld
    Member
    Posted 11 months ago #

    Okay, I figured out the border around the email field issue. I added input[type="email"] to the css. The alignment issue on a smaller screen is still an issue, albeit one I could live with. If anyone has a suggestion I'd be grateful.

    Thanks

  4. bemdesign
    Member
    Posted 11 months ago #

    You need something to clear your floats for your two-columns. This will create the break you need between the two columns and the fields below.

    And you should make your right column also float left. That way when the browser window (or device screen) is small enough, the right column will fall under the left column.

    Hope this helps.

  5. gabevanlelyveld
    Member
    Posted 11 months ago #

    bemdesign,

    That definitely helps, although I'm not a coder and I'm afraid that I don't know how to implement your suggestions. If you have any advice on how I could learn to do this specific task or any suggestions based on my existing css (copied below), I would be very grateful.

    -thanks

    whaleheartproductions.com/contact

    Begin CSS:

    #two-column {
    width: 100%;
    }

    #two-column #left {
    width: 300px;
    float: left;
    }

    #two-column #right {
    width: 250px;
    float: right;
    }

    #two-column p {
    margin-bottom: 12px;
    }

    #two-column input[type="text"], input[type="email"] {
    border: none;
    border: 1px solid #000;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    padding: 5px;
    }

    #two-column #right input[type="text"], #two-column #left input[type="text"], input[type="email"] {
    width: 240px;
    }

    #two-column textarea {
    position: relative;
    padding: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    }

    #two-column input[type="submit"] {
    padding: 8px 18px;
    background: #222;
    color: #fff;
    border: 1px solid #fff;
    float: right;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    #two-column input[type="text"]:focus, #two-column textarea:focus {
    background: #eee;
    }

    #two-column input[type="submit"]:hover {
    background: #fff;
    color: #222;
    border: 1px solid #222;
    }

  6. bemdesign
    Member
    Posted 11 months ago #

    Right after your #right div add a <br /> tag and give it a class called "clear" or what not. In your css, give it the following style:

    .clear{
    clear: both;
    }

    Next change this:

    #two-column #right {
    width: 250px;
    float: right;
    }

    to this:

    #two-column #right {
    width: 250px;
    float: left;
    }

    Save and test.

  7. gabevanlelyveld
    Member
    Posted 11 months ago #

    Thanks again. Okay, I added the following to my cf7 html in the place you suggested:

    <br class=clear>

    Then I added

    .clear{
    clear: both;
    }

    to the CSS somewhere in the middle because I wasn't sure where exactly to put it.

    Next I replaced the final section of CSS as you suggested.

    The right column now lines up on the left in a smaller window, but there are two other new issues. The word 'Subject' doesn't stay attached to the subject field in a smaller window and on full screen (laptop size) the right column is now skinny line below the left column.

    If I get get the word 'Subject to follow the subject field and the two columns to line up horizontally on full screen then I'd be done.

    Any thoughts? Thanks again.

  8. bemdesign
    Member
    Posted 11 months ago #

    Move the <br class="clear" /> to after the closing tag for the <div id="right"> and before the paragraph tags.

    So it should look like this:

    <div id="right">
    ...
    </div>
    <br class="clear" />
    
    <p>...

    Make sense?

  9. gabevanlelyveld
    Member
    Posted 11 months ago #

    YES! You're the greatest! It worked. I can't tell you how happy that makes me. That was the last little fix I was hoping to make.

    Is there some way I can show my appreciation? A tip or something?

    Thanks again, Gabe

  10. bemdesign
    Member
    Posted 11 months ago #

    How about tip the programmer behind Contact Form 7. :-)
    Oh and mark this thread resolved.

  11. gabevanlelyveld
    Member
    Posted 11 months ago #

    Will do. Thanks.

Reply

You must log in to post.

About this Topic