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

    How can I make my form centered on my website?

    Asked by LeahRiddell on May 02, 2013 at 10:07 AM

    Thanks to jefreylandicho for answering my previous question, now I have the html up. How can I make my form stay centered? On the computer it is center but not on the iPad? I saw forum where CSS was done, but your staff did it to fix it. Can you assist me?

    Much thanks!

    Page URL:
    http://leahriddellphotography.com/contact-2/

    ipad thanks
  • Profile Image

    Answered by jefreylandicho on May 02, 2013 at 10:43 AM

    The form is currently centered on IPad but due to the theme that you use does not support responsive design, it is not showing like it is centered. You will notice a long left to right scroll bar on your IPad screen.

    I would suggest contacting your theme provider if they have plans or have already implemented responsive style in their design. When you theme is fully responsive, the form will automatically adjust based on your web page width and will be centered.

    If you have more questions you would like to ask, please contact us again.

  • Profile Image

    Answered by LeahRiddell on May 02, 2013 at 10:52 AM

    Thanks, I contacted my theme provider. Hopefully they can fix this :)

  • Profile Image

    Answered by LeahRiddell on May 02, 2013 at 11:41 AM

    I heard back from my theme provider. They said the CSS for my form clearly has "nowrap" set. Please adjust that for me and allow it to wrap.

    Thanks

  • Profile Image

    Answered by jefreylandicho on May 02, 2013 at 12:59 PM

    By default, wordpress page already has a wrap that will automatically adjust its content when it supports responsive design. But anyway, since you theme provider suggested to put a wrapper, we can use a DIV tag to add wrap to the script embed tag.

    E.g.

    <div id="responsive_wrap">

    <!--- Insert Embed Code Here -->

    </div>

    then please add this code in your CSS stylesheet

    @media screen and (max-width: 600px) {

    #responsive_wrap { width: 100%; max-width:580px; }

    }

    }

    Once you have done this, please let us know as we require the wrap to be added first to make additional adjustment to your website.

  • Profile Image

    Answered by LeahRiddell on May 02, 2013 at 01:59 PM

    Forgive me but Im not computer savvy, so where in all that data do I put it? I put the wrap data on the page and the media thing in CSS stylesheet. No difference on the iPad :(

  • Profile Image

    Answered by moonzkie on May 02, 2013 at 02:03 PM

    Hi,

    Please refer to this guide to learn on how to inject a CSS to your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Thank you.

  • Profile Image

    Answered by LeahRiddell on May 02, 2013 at 02:13 PM

    I followed the steps to inject CSS to my form, iPad looks the same? I cleared and refreshed everything.

  • Profile Image

    Answered by jefreylandicho on May 02, 2013 at 03:02 PM

    Since you are using Wordpress, click the HTML tab the paste the embed code with the div tag like below

    <div id="responsive_wrap">

    <script type="text/javascript" src="//www.jotform.com/jsform/31134989065258"></script>

    </div>

     

     

     

     

    I checked your website but I am still unable to detect the div tag. The changes would not reflect without the div tag.

    The CSS code I provided must be injected directly to the theme style, usually located in Appearance > Editor > Stylesheet not in the Form Styles.

  • Profile Image

    Answered by LeahRiddell on May 03, 2013 at 11:11 AM

    I followed your instructions, still on the iPad not centered :(

  • Profile Image

    Answered by jefreylandicho on May 03, 2013 at 11:46 AM

    Have you already added this to your WordPress stylesheet as well?

    @media screen and (max-width: 600px) { #responsive_wrap { width: 100%; max-width:580px; } } 

    Please make sure that you add this line of code to the CSS main files.

  • Profile Image

    Answered by LeahRiddell on May 03, 2013 at 11:49 AM

    Yes unfortunately, no changes still

  • Profile Image

    Answered by jefreylandicho on May 03, 2013 at 12:03 PM

    Alright please replace it with 

    @media only screen and (device-width: 768px){{#responsive_wrap{width:100%; max-width:768px;}}

    Then adjust your form width size to 768px

    After making these changes, please clear your browser cache or WordPress cache(if you are using one) then let us know the result again.

  • Profile Image

    Answered by LeahRiddell on May 03, 2013 at 01:25 PM

    I want to thank you for your continue support but sadly its not over with.

    Here's what I see in the style sheet even though I pasted the change and saved.

    ATTENTION:
    THIS FILE IS JUST FOR THE WORDPRESS THEME INFORMATION.
    PLEASE EDIT STYLES/STYLE.CSS TO UPDATE YOUR THEME STYLES IF DYNAMIC STYLING IS TURNED OFF!

    Unfortunately I cannot change in edit CSS, I tried.

  • Profile Image

    Answered by pinoytech on May 03, 2013 at 02:58 PM

    @LeahRiddell,

    Using ipad simulator, your form is working fine. It's in the middle of your website. Please take a look at this:

    Thank you!

  • Profile Image

    Answered by LeahRiddell on May 03, 2013 at 03:00 PM

    Yay Thank you! Thank you! Thank you!

  • Profile Image

    Answered by pinoytech on May 03, 2013 at 03:26 PM

    On behalf of my colleague Jefrey, you are quite welcome! If you need our assistance again, do let us know.

    Have a great day!