Contact Form 7
Form is Centered, how to fix? (10 posts)

  1. shoppinggems
    Posted 6 years ago #

    My form is showing up centered on the page and I would like it to be to the left. I thought it might be something to do with the CSS for my site but it also appears centered on another site of mine and I use two different themes on these sites.

    Can anyone help?



  2. leet8845
    Posted 6 years ago #

    Can you use HTML? I use tables to create my forms. Just make a table with padding and you'll have a nice looking form and aligin it left.

  3. shoppinggems
    Posted 6 years ago #

    I don't think so because with the Contact Form 7 it just gives you a code in brackets to insert in your post or page.

  4. bobegods
    Posted 6 years ago #

    Can you send the actual HTML used in your contact form so we can see if it's something in the code?

    Or... You can wrap the entire code in a DIV.

    <DIV align="left">
  5. shoppinggems
    Posted 6 years ago #

    I just tried the DIV code and it didn't work. Is this what you are looking for as far as HTML code for the form?

    <div class="wpcf7" id="wpcf7-f1-p92-o1"><form action="/add-an-event/#wpcf7-f1-p92-o1" method="post" class="wpcf7-form">

    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="1" />
    <input type="hidden" name="_wpcf7_version" value="2.2.1" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p92-o1" />
    <p>Your Name (required)
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span> </p>
    <p>Your Email (required)
    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> </p>
    <p>Event Name:

    <span class="wpcf7-form-control-wrap event-name"><input type="text" name="event-name" value="" size="40" /></span> </p>
    <p>Your Event Details: (Include the name of your event, description, dates)
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"></textarea></span> </p>
    <p>Link to event site:

    <span class="wpcf7-form-control-wrap Linktosite"><input type="text" name="Linktosite" value="http://" size="40" /></span></p>
    <p><input type="submit" value="Send" /> <img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src="http://www.daytripsinnewengland.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form>

  6. bobegods
    Posted 6 years ago #

    When you click on the Contact Form 7 button to edit, is this what you are seeing? (Click the link for an images)


  7. shoppinggems
    Posted 6 years ago #

    Yes, although the DIV code is not there. I put that in the actual post. Should I put it there instead?

  8. bobegods
    Posted 6 years ago #

    Yes, place it like I have it in the image and let me know if that works. If not, there are a few other areas that you can look into. See if this works first.

  9. shoppinggems
    Posted 6 years ago #

  10. bobegods
    Posted 6 years ago #

    Awesome! Glad it worked.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic