Controlling the justification of my forms on my website

  • Profile Image
    sally33
    Asked on January 23, 2014 at 06:12 PM

    Hello!

    Boy do I love your website ~ terrific stuff!

    I've quickly made two forms for my site (which I've built on Blogger)

    BUT I'm having trouble justifying my forms.

    1. my email capture form, I would like to have on the left side of my page, but it puts itself in the center. (I've tried adding html code around yours but didn't work)

    2. my contact us form: used your very cool template with the air-mail striped envelope.  This puts itself on the LEFT side of my page, and I want it CENTERED!  (the irony!)

     

    Can you please help?!

    thank you sincerely,

    Sally Nurney

  • Profile Image
    jonathan
    Answered on January 23, 2014 at 07:35 PM

    Hi Sally,

    I am able to see what meant on the #2 Contact us form. You can move the form close the center alignment by modifying the .body, html CSS code part in the form injected CSS codes.

    Modify the CSS code to like this

    /* Injected CSS Code */

    body, html{

    background:transparent !important;

    display: inline-block;

    margin: 0px 200px 0px !important;

    }

    It should move the entire form close to center, you can edit the number 200px to further do the adjustment. I tested it on this form http://form.jotform.me/form/40227519429456? and it works.

    Refer to this guide also on how to -Inject-Custom-CSS-Codes

    --

    For the e-mail capture form, add a CSS code like this.

    body, html{

    float: left !important;

    }

    It should move the form the left aligment.

     

    Hope this help. Inform us if you need further help.

    Thanks.

     

     

  • Profile Image
    sally33
    Answered on January 23, 2014 at 07:40 PM

    Sorry for the autoresponder here ~ I'll check out your response in a moment.

    ok ~ i've checked this out, and I don't know enough about CSS.  I added in your code suggestion, which did a Great Job of moving the entry fields over to the center, but NOT the field labels NOR the background graphic of the envelope.  How to make this global change?

    THANKS for any help!

  • Profile Image
    Welvin
    Answered on January 24, 2014 at 03:50 AM

    Hi,

    I've fixed the form alignment on your contact us page: http://www.pcachalice.com/p/contact-us.html. Kindly check again.

    Please create a new thread for the issue about your Email Capture form: http://www.jotform.us/form/40226984524154. Start here: Contact JotForm Support

    Thanks

  • Profile Image
    sally33
    Answered on January 25, 2014 at 08:05 PM

    This looks great and THANK YOU for fixing the form ~ I'd love to understand how you changed the code.

    BUT this does NOT work AT ALL on my mobile version of the site... It is off the page (check it out on your own smart phone or wifi device.)

    If this can't be remedied, then I'd rather have it left justified to work on mobile devices.

    THANKS sincerely,

    Sally

  • Profile Image
    Cesar
    Answered on January 25, 2014 at 08:44 PM

    I have added the following code to make the margin responsive to mobile devices:

    @media only screen and (max-device-width: 550px){
    .form-all {
    margin: 0px;
    }

    Do try the update on a mobile device.  
    Kindly let us know if you need further assistance. Thank you. 

  • Profile Image
    sally33
    Answered on January 25, 2014 at 09:12 PM

    You guys are relentlessly cool!  Thanks for working on this ~ the form is still looking weird for me on my iTouch... it is too big (goes off the side of the screen) and the paper is not centered in the envelope (THIS I can live with, believe me.)

    THANK YOU!!!

  • Profile Image
    sally33
    Answered on January 29, 2014 at 02:03 PM

    Hey Fella's!

    I'm writing because I DO need further assistance ~ please advised regarding my last post - the form is too big on the iTouch (and thus presumably on any iPhone). 

    Do I simply reduce the 550px on the changes you quote having made?

     

    thank you!

    sincerely

  • Profile Image
    Welvin
    Answered on January 29, 2014 at 04:02 PM

    It happens that the current form template you are using only works best with computer. I've added a custom mobile CSS query to the form. Kindly check again.

    Thanks