What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Controlling the justification of my forms on my website

    Asked by sally33 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

    Page URL:
    http://pcachalice.blogspot.com/p/contact-us.html

    My Forms email capture form contact us form email template
  • Profile Image
    JotForm Support

    Answered by jonathan 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

    Answered by sally33 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
    JotForm Support

    Answered by Welvin 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

    Answered by sally33 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

    Answered by Cesar 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

    Answered by sally33 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

    Answered by sally33 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
    JotForm Support

    Answered by Welvin 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