WordPress.org

Forums

Fast Secure Contact Form
[resolved] Contact Form Centered (17 posts)

  1. selmaporobic
    Member
    Posted 1 year ago #

    Dear all,

    I have no skill with HTML/Wordpress whatsoever, but I managed to make a contact form for my new website anyway. I want my contact form to be aligned left. However, my contact form is centered (not the text, but the entire form), even though I double checked all settings and they are all set to 'align left'. Is there something I'm missing here?

    Thank you all so much for your time. Have a great day!

    https://wordpress.org/plugins/si-contact-form/

  2. staceyk
    Member
    Posted 1 year ago #

    I actually want mine centered and it stays aligned to the left! At one point it was aligned center then somehow became left centered and now won't budge.

  3. jockoe
    Member
    Posted 1 year ago #

    @staceyk

    Add this under the tab STYLES; to the width of the FORM DIV (the first box)

    margin-left: auto; margin-right: auto;

  4. jockoe
    Member
    Posted 1 year ago #

    @selmaporobic

    Do you have a link to your form?

    Look for the code I just gave to Stacey. If you see it, delete it.

  5. staceyk
    Member
    Posted 1 year ago #

    Funny thing is, on the dashboard it centers it. On the actual page, it's still on the left!

    My site is currently locally hosted but will be put up on a dev site soon...and production shortly after that. If I have to change the alignment after it is live I can.

  6. jockoe
    Member
    Posted 1 year ago #

    Do you use a caching plugin? If so... try deleting the cache and see if that fixes it.

  7. staceyk
    Member
    Posted 1 year ago #

    I didn't at the time and I don't have one active currently.

    Site is now live:

    http://www.houndsofgrace.org

    Contact Us is where I am using the form.

  8. jockoe
    Member
    Posted 1 year ago #

    Did you try adding the code on your live site? I'm able to center your form with those margins using Inspect element in Chrome. I dunno why it wouldn't have worked while it was being developed locally, but it's worth a try. (I also changed the width to 250px)

  9. staceyk
    Member
    Posted 1 year ago #

    The code is there:

    I have tried:

    width: margin-left: auto; margin-right: auto; max-width: 250px;

    and

    margin-left: auto; margin-right: auto; max-width: 250px;

    and
    width: 99%; margin-left: auto; margin-right: auto; max-width: 250px;

    all to no avail on the live site.

  10. jockoe
    Member
    Posted 1 year ago #

    That is really odd. Have you checked to see if there is a plugin conflict? De-activate all of your other plugins, except FSCF, and see if your form moves into the center.

  11. jockoe
    Member
    Posted 1 year ago #

    Under the 'Styles' tab, where it says: Select the method of delivering the form style: What stylesheet are you using?

  12. selmaporobic
    Member
    Posted 1 year ago #

    @staceyk @jockoe Thank you both so much for replying! Didn't even expect anyone would reply. I'm sorry for my late response! Been out of the country for a couple of weeks.

    I've tried all the options you two gave me, but it's still centered. I'm probably doing something wrong! My form: http://posemedia.nl/contact/

    Thanks!

  13. selmaporobic
    Member
    Posted 1 year ago #

    @jockoe I'm using the 'Internal Style Sheet CSS' by the way.

  14. mbrsolution
    Member
    Posted 1 year ago #

    Hi selmaporobic, I had a look at your URL above. For some reason you have the following.

    element.style {
        max-width: 555px;
        width: 99%;
    }

    The width above is set to 99% if you change that to let say 9% it will fix your contact form as per your request. I am just curious about the element.style where is that coming from? Anyhow making that change will align your form to the left.

    Kind regards

  15. selmaporobic
    Member
    Posted 1 year ago #

    @mbrsolution Thank you! That actually helped :D! Only problem now is that the 'submit' button is still centered... I don't know how to change that.

  16. mbrsolution
    Member
    Posted 1 year ago #

    Hi selmaporobic, on the following code.....

    <div id="fscf_submit_div3" style="padding-left:146px; float:left; clear:left; text-align:left; padding-top:15px;">
    <input id="fscf_submit3" type="submit" value="Neem contact op" style="cursor:pointer; margin:left; color:#ffffff; background-color:#ff5a00">

    Change the style="padding-left:146px to something smaller like 14px or so.

    Let me know if this helps you.

    Kind regards

  17. selmaporobic
    Member
    Posted 1 year ago #

    @mbrsolution This helped! Thank you so much for your help!

    Thanks to everybody who helped!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Fast Secure Contact Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic