WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
How to center Contact form 7 on Post/Page (8 posts)

  1. deekstar
    Member
    Posted 3 years ago #

    Hello guys,
    Hope you can tell me how to center the contact form in posts and pages. I love the plugin and have it installed on various sites, but I can't ever seem to center the form on a post and page, the form is always on the left of the post or page. I know it will be a simple process to center it, but I don't know how to do this.
    Thanks in advance
    Derek McNeill

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

  2. stvwlf
    Member
    Posted 3 years ago #

    can you post a URL of a page with a form on it?

  3. deekstar
    Member
    Posted 3 years ago #

    Sure thing, thanks for the response, this is one of many sites we run on wordpress, it also where contact form 7 always sits to the left of the post on all our wordpress sites, as you can see this is an important contact form for potential replacement double glazing window enquiries, it would look much better if the contact form was exactly center of the page/post.

    http://omgwindows.co.uk

    It would be great to get a solution on this query

    Thanks again,
    Deekstar

  4. stvwlf
    Member
    Posted 3 years ago #

    Hi

    Using CSS you can assign a width to the form and then center that width in the width of the content area.

    This CSS is specific to the one form on the page you linked to. Each form has a unique ID assigned by Contact Form 7.

    #wpcf7-f1-p39-o1 form {
       width: 360px;
       margin: 0 auto;
    }

    add that to the end of your theme's style.css file

    You will need to find the form ID on each form you want to add this to. The easiest way may be to look in your browser's View Source listing on the page on which you are trying to center the form.

    On http://omgwindows.co.uk for example, view the browser's source page and search for wpcf7-f1-p39-o1 (the ID of the form). That will be different on every site and form. Searching for one we know will let you know what you are looking for when you view the next form's source code. The unique ID used in the CSS will be in a similar location in each Contact Form 7 form. The code in each form will be different. So you can add one CSS block per form. If the form is narrower or wider than the one you linked to you adjust width: 360px in the CSS to the actual width of that form.

  5. deekstar
    Member
    Posted 3 years ago #

    Thanks, I'll give it a try, but the form as it is, is the correct size/proportion for all the websites, pages & posts, this new width setting you suggest will make it look too big, infact to have it centered like this will make it huge! how come there isn't the usual simple <center> tag type solution?or even <div> tags to just center the form. I'm a bit bewildered by this, most other content/objects in wordpress can be centered. I'm not ungrateful for your suggestion, I just assumed there would be a simple centering setting I could use,

    something like;

    #wpcf7-f1-p39-o1 form {
    width: 360px;
    margin: 0 auto;
    position: center;
    }

    Cheers

  6. stvwlf
    Member
    Posted 3 years ago #

    Hi

    I measured your form to come up with the 360 pixels width. That is why I used 360. How is using the form's actual width going to make the form look too big?

    The HTML <center> tag was deprecated about ten years ago.

    The line margin: 0 auto means to center an element (as in, the whole form) within its containing element. The containing element is the width of the column the form is in.

    The reason the forms are all left aligned is unless you declare a different width, the browser assigns an element (the form) the default width of 100% of the width of the element that contains it. You see empty space to the right of the form but the browser sees that empty space as PART of the form, like a wide margin. That is why we have to tell the browser, "no, the form is only 360 pixels wide". We tell it that by setting its width in the CSS.

    Then we tell the browser to center the form by assigning it
    margin: 0 auto Auto means leave equal margin left and right. If the width is left at the default 100%, the form will appear to not center since its already centered in the container if you consider the blank space to the right of the form as part of the form, as the browser does. Only by declaring its width narrower can it be centered to your eyes.

    If you think this is complicated, my first attempt was assigning a float left to the form. That made the text below the form appear right next to the form, at its right. It was going to take 3 sections of CSS to do it that way. The way I gave you is simpler.

    All you have to do is look up the ID of each site's form and paste the few lines of CSS I gave you into each stylesheet. Its not very complicated. If Contact Form 7 let you see the ID it assigns each form you wouldn't even have to look at the View Source. But I can't find anywhere within it's admin screen that shows you the ID its assigned a form. Thus you have to look it up.

    You can edit the stylesheet within WordPress
    Go to dashboard / Appearance and select Edit
    You want to edit style.css

  7. deekstar
    Member
    Posted 3 years ago #

    That was a great answer, I've always wanted to know that margin setting for other websites as well, when I was working the style sheets on them. I'll get to work, sorry I didn't catch what you meant the first answer, I know basic, "how to make a site look pretty" customisation, which is all images and text, the margin bit had to be explained, great stuff, I didn't have a clue <center> had been faded out! you can still use it fine for any ad code or html code in wordpress siedbar widegets, it's good for centering a google ad or banner.
    Thanks again for that help
    Cheers

    update, it owrked a treat cheers again!

  8. stvwlf
    Member
    Posted 3 years ago #

    Hi

    Glad to hear it worked.

    You can still use <center> and it still works. (It is deprecated in HTML5, the upcoming standard, but it still works). For your own sites, you can use it, it works. The main reason is the modern web encourages separating content and styling. That is, <center> tells text HOW to display, just like the old <font> tag. In modern terms that is what the stylesheet is for. HTML specifies WHAT to display, CSS, how it should look,

    On your own sites it doesn't matter that much. But if you are going to learn to do these things, you might as well learn the ways currently considered best. That too will change over time, of course.

    I tried giving you code that would work with any Contact Form 7 form so you didn't have to look up the form ID. But it was getting overwritten by CSS the browser assigned a higher priority. That would require even more CSS to override the overriding CSS. So I felt using the form ID once per form was going to be the simplest way for you.

    A little more about centering:
    CSS has two classes of tags, block and inline.
    Tags like <p>, <div>, <form>, <h2> and the like are considered block tags. They CONTAIN other tags and elements. Its with Block tags you must use margin: 0 auto to center the text, after assigning it a width.

    The block tags contain other content called inline - straight text, tags like <strong>, <img>, <span>. When you assign text-align: center or wrap the <p> in <center> tags, the INTERNAL content of the block containing tag is centered WITHIN the block tag.

    You can't center <p> or <form> with that because they are block tags to begin with. They are centered as I explained before, set a width and use margin: 0 auto.

    Once you understand the principle it's much easier to know how to center things.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic