WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Layout is too dense (12 posts)

  1. XLFR
    Member
    Posted 6 months ago #

    Hi,
    I made a form using Contact Form 7.

    For some reason, it came out very dense, I want
    to make spaces between the headline and the checboxes \ writing space.

    Also, I want to make the writing space shorter, what I need to do in order to change these things?

    You can see it here: http://stronger.co.il/
    Rights sidebar.

    Thank you!

    http://wordpress.org/plugins/contact-form-7/

  2. futurecar
    Member
    Posted 6 months ago #

    You could possibly add something like this to your custom css (I use slim jetpack)

    wpcf7-form p{
    margin: 0 0 20px 0;
    }

    Looked like this when I did it

  3. XLFR
    Member
    Posted 6 months ago #

    Hi,
    Thanks, but it didn't do anything, nothing has changed.

  4. futurecar
    Member
    Posted 6 months ago #

    Sorry about that, I missed the .

    It should read:

    .wpcf7-form p{
    margin: 0 0 20px 0;
    }
  5. XLFR
    Member
    Posted 6 months ago #

    It works, thank you.
    But I thought more about just a small space between every line.

    How it is now:

    HEADLINE
    *Writing space

    How I want it to be:

    HEADLINE

    *Writing space

    Thanks a lot mate!!

  6. futurecar
    Member
    Posted 6 months ago #

    You're welcome! You can try reducing the 20px to a lesser value say 10 px or adjust until it looks right to you.

  7. XLFR
    Member
    Posted 6 months ago #

    It works great, kudos!

    Now, I tried to change the side of the contact form, from right sidebar
    to left, and the lines that the user is supposed to fill in are too
    big which makes it go out of the boundries.

    What should I do to fix it?

    http://stronger.co.il/

  8. futurecar
    Member
    Posted 6 months ago #

    I think in this case, i'd probably wrap a div around it to contain the input fields. It would be good if you posted your form code.

    So for example from looking at your form this is what I would try when editing the form in CF7 (there could be a better way but for now this may be a fix)

    These are the first few elements of your form:

    קבל עוד היום הצעה אטרקטיבית בכל תחום!
    <div class="input-container">
    שם מלא
    the text field

    מספר טלפון
    the text field
    </div>

    Wrap a div like the example above around these first few elements when editing your form in CF7 admin area, then save.

    In your CSS Add:
    .input-container {
    width:80%;
    float:right;}

    Give this a try, hopefully it works.

  9. XLFR
    Member
    Posted 6 months ago #

    Tried it, didn't affect the text field.

    Here is my form code:
    http://pastebin.com/YNDv7R3J

  10. futurecar
    Member
    Posted 6 months ago #

    Thats because the text and inputs were not wrapped in the div as I had suggested above. I have updated the code to show you what I mean. Have a look at line 3 and line 11. So you will need to add that div when editing your form in the CF7 admin. Then make sure you add the CSS and lets see if that works.

    Updated Pastebin

  11. XLFR
    Member
    Posted 6 months ago #

    You can check my site, works great :)

    Thanks mate.

  12. futurecar
    Member
    Posted 6 months ago #

    Excellent, you're welcome!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.