Contact Form Alignment

• 

  timmogu · Member · Feb 11, 2017 at 6:07 am

  • Copy link
  • Add topic to favorites

  Hey,

  so I added a table on my page and inside that table an contact form. Now while editing everything looks like it’s supposed to be. The contact form is aligned to the center, but when I publish it, it is aligned to the left.

  How can I fix that? HTML does not work.

  I would like to align the contact forms on those pages to the center:
  https://earth-unbound.com/longshan-temple-tour/
  https://earth-unbound.com/sun-yat-sen-tour/
  https://earth-unbound.com/tamsui-discovery-tour/
  https://earth-unbound.com/ximen-tour/

  All others should not be changed.

  Thanks in advance.
  Timmo

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Feb 13, 2017 at 4:55 pm

  • Copy link

  Right now your contact form is in a table cell that’s left-aligned:

  <td style="text-align: left;" colspan="2">If you would like to let us now that you will join, please submit your name and email to us. Thanks a lot!
  [contact-form to="(email visible only to moderators and staff)" subject="Longshan Temple"][contact-field label="Name" type="name" required="1" /][contact-field label="Email" type="email" required="1" /][/contact-form]
  If you would like any of our tours arranged at a time of your convenience, please <a href="http://earth-unbound.com/contact/">get in contact with us</a>.</td>

  I would suggest you take the form outside the cell and put it below the table. Putting your form outside the table means it will remain responsive and users will be able to use it easily on smaller mobile devices.

  Based on my testing with Rowling, the form should automatically be centered once it’s outside the table but if it isn’t, just let me know and I can help further with any necessary CSS.

• 

  timmogu · Member · Mar 6, 2017 at 8:11 am

  • Copy link

  Hey,

  sorry I was busy recently and forgot to check. Thanks for your reply!
  As you said I put the contact form out of the table but it is still aligned to the left… how could I fix that?

  Thanks a lot!

• 

  kathrynwp · Staff · Mar 6, 2017 at 3:13 pm

  • Copy link

  This CSS should centre the form on the three pages you listed without a comment field. You can adjust the width as you like.

  #contact-form-460, #contact-form-472, #contact-form-471 {
    margin: 0 auto;
    width: 300px;
  }

  You might want the one with a comment form to be wider, so something like this:

  #contact-form-700 {
    margin: 0 auto;
    width: 500px;
  }

  Let me know how it goes.

• 

  timmogu · Member · Mar 11, 2017 at 4:29 am

  • Copy link

  Thanks a lot. It does what I intended to. :)

• 

  kathrynwp · Staff · Mar 11, 2017 at 4:03 pm

  • Copy link

  Glad to hear it!