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 do I properly align/position dependent questions and surrounding items?

    Asked by GlobeTechnical on November 15, 2012 at 08:27 PM

    Hi,

    I'm having a problem with the alignment of the question prompts on my two-column form.

    Specifically, I have a drop-down called 'Title' and when someone chooses 'Other' from the list, a field called 'Title - Other (please specify)' appears next to it (to the right). So far so good.

    The problem is that if anything other than 'Other' is selected (and when the form loads up initially) either the 'First Name' or 'Last Name' field sits where the 'Title - Other (please specify)' would be. This is detrimental to the formatting of the form overall.

    The same issue is present further down the form. I have a question currently labelled 'Context' and when someone chooses 'Corporate', a 'Company Name' field appears next to it. Again, when 'Corporate' is not selected, the 'Phone Number' or 'Email' field occupies the space where the 'Company Name' field would/should be.

    Essentially, I want the form fields to stay exactly where I've put them - at all times - and not to move around at all when various selections are made.

    So far, I've been using a blank html item in between rows as a workaround but this isn't an ideal solution since it introduces unwanted spacing between certain questions and whenever I go to edit the form, the html items re-populate with "Click here to edit...", or something to that effect.

    I'm assuming the answer to all of this will be CSS-related. I'd be grateful for any assistance.

    Please see attached screenshot for reference/illustration.

    Regards,

    Leon

    Screenshot
  • Profile Image
    JotForm Support

    Answered by idarktech on November 15, 2012 at 10:01 PM

    Hi Leon,

    The blank HTML would be of help here to block those fields and then hide them with CSS so they don't consume any spaces.

    Check this sample form: http://www.jotformpro.com/form/23197863145965?

    I used this CSS codes for hiding the 3 blank HTML's.

    #id_21, #id_22, #id_23{

    display:none;

    }

    Generally, what you need to change on this code is the 3 html field ID's. It might be different when you add them to your form. You can get this ID's by using browser's "Inpsect Element" feature.

    Let us know if you need further assistance about this. Thanks!

  • Profile Image

    Answered by GlobeTechnical on November 15, 2012 at 11:43 PM

    @ idarktech

    Many thanks for the quick response.

    I followed your advice and your solution works perfectly in IE9, Chrome and FF. Strangely, IE8 doesn't seem to care too much about the html blockers.

    Hmmm...I was playing around with injecting some CSS into the form earlier - some code I picked up off another forum thread concerning another user. The code I copied in follows:

    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    background:#FFA !important;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA;
    }
    .form-validation-error {
    background-color:#CFC;
    border:1px solid green;
    -moz-box-shadow:0 0 2px green;
    -webkit-box-shadow: 0 0 2px green;
    box-shadow: 0 0 2px green;
    }
    /*To change the background color of the "This field is required" message, please add these: 
    div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }*/

    ...As you can probably tell, I was trying to change the way the 'The is a required field' warnings display. I've since removed this code but I get the feeling that something's wrong. It's as if something I did doesn't want to 'undo'. I'm wondering if there's a way to completely reset the CSS for this form and then inject back in only the code I need?

    Incidentally, since adding the above code to my form, the two drop-down menus display with slightly less width than before. You'll notice that I have some definitions in there currently for cross-browser compatibility when rendering the form items. These definitions were working well for me earlier so it seems that I may have done something daft.

    Any ideas?

    Regards,

    Leon

  • Profile Image
    JotForm Support

    Answered by idarktech on November 16, 2012 at 12:20 AM

    Hi Leon,

    The form seems to be working fine on IE8 base on my test, is the problem the same?

    --

    Upon looking the codes, it seems like the two classes (.form-error-message & .form-error-arrow-inner) does have two properties declared, removing the other declaration should help.

    Yes, I'd suggest to copy the entire CSS codes to any editing tools you have like notepad so you can conveniently remove the unnecessary codes there before injecting it back to your form.

    --

    They are seem to be equal, I don't see any differences. This is how your form looks as of this typing.

  • Profile Image

    Answered by GlobeTechnical on November 16, 2012 at 12:28 PM

    @ idarktech

    I have already removed all references to .form-error-message and .form-error-arrow-inner. The injected CSS for the form currently looks like this:

    .form-all {
    margin: 0 0 0 0; Padding: 0 0 0 0; font-family: Arial, helvetica, sans-serif;
    }
    #id_21, #id_22, #id_23 {
    display:none;
    }
    select {
    width: 205px !important;
    -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/
    -moz-box-sizing: border-box; /*Firefox, other Gecko*/
    box-sizing: border-box; /*Opera/IE 8+*/
    }
    .form-textbox {
    width: 205px !important;
    -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/
    -moz-box-sizing: border-box; /*Firefox, other Gecko*/
    box-sizing: border-box; /*Opera/IE 8+*/
    }
    .form-textarea {
    width: 420px !important;
    -webkit-box-sizing: border-box; /*Safari/Chrome, other WebKit*/
    -moz-box-sizing: border-box; /*Firefox, other Gecko*/
    box-sizing: border-box; /*Opera/IE 8+*/
    }
    #id_1, #id_17 {
    padding: 0 10px 10px 0 !important;
    }
    #id_4, #id_12 {
    padding: 0 10px 10px 0 !important;
    margin-bottom: -2px;
    }
    #id_3, #id_5, #id_7, #id_15, #id_14, #id_20 {
    padding: 0 0 10px 0 !important; margin-bottom: -2px;
    }
    #id_16 {
    padding: 0 0 10px 0 !important;
    }
    #label_16 {
    display: none;
    }
    #input_16 {
    width: 130px !important
    }
    .form-buttons-wrapper {
    padding: 50px 0 0 25px !important;
    }
    .form-label{
    width: 200px !important;
    }
    .form-label-left{
    width:200px !important;
    }
    .form-label-right{
    width:200px !important;
    }

    As I mentioned, the form looks fine when viewed in IE9, FF and Chrome. However, when viewed in IE8 (as part of my webpage), the 'invisible' html blockers seem to be completely ignored and the label text for the fields below the drop-downs seems to wrap when the previous conditions are not met - as can be seen in my original screenshot. The drop-downs also display slightly shorter than they should, despite the CSS code I've added explicitly setting them to 205px.

    Admittedly, when I log into JotForm using IE8 and then use the 'Preview' function to view the form, it looks fine - so perhaps it's something to do with the CSS on my page. My website is not currently live, so I can't provide a link for you to see for yourself (sorry). I don't know if this will help but here's the CSS code for my webpage:

    *
    {
          margin: 0px;
          padding: 0px;
         
    }
    html, body
    {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
    }
    body
    {
          font-size: 0pt;
          font-family: Arial, helvetica, sans-serif;
          color: #423C42;
          background-color: white;
    }
    div
    {
          display: block;
    }
    #container
    {
          margin: 0px auto;
          width:  992px;
          height: auto !important;
          height: 100%;
          min-height: 100%;
          position: relative;
          background-color: white;
    }
    #header
    {
          border-top: 0px solid black;
          padding-top: 24px;
         
    }
    #content
    {
          padding-bottom: 50px;
    }
    #content:after
    {
          content: " ";
          display: block;
          clear: both;
          height: 0;
    }
    #footer
    {
          width: 992px;
          /*border-top: 1px solid #423C42;*/
          height: 50px;
          /*margin: 32px auto 0 auto;*/
          padding: 10px 0;
          /*position: absolute;*/
          bottom: 0px;
          font-size: 12px;
          clear: both;
    }
    /*--------Navigation--------*/
    #nav_arrow
    {
          display: block;
          width: 16px;
          height: 8px;
          background: url(../Images/nav_arrow.gif) no-repeat top left;
          margin-bottom: 30px;
    }
    #nav
    {
          width: 992px;
          margin: 0 auto;
          border-bottom: 1px solid #423C42;
          height: 70px;
    }
    #nav_left
    {
          float: left;
    }
    #nav_right
    {
          float: right;
          margin-top: 10px;
    }
    #logo
    {
          margin-left: 1px;
    }
    img
    {
          border: 0px;
          
    }
    ul
    {
          list-style-type: none;
          margin-left: 1px;
          margin-right: 1px;
          padding: 0px;
    }
    li
    {
          display: inline;
    }
    /* Columns
    -----------------------------------------------------------------------------*/
    .column
    {
          float: left;
          display: inline;
          margin-bottom: 32px;
          overflow: hidden;
    }
    .column.three
    {
          width: 320px;
          margin-right: 10px;
    }
    .column.last
    {
          width: 320px;
          margin-left: 10px;
          margin-right: 0px;
    }
    .column.contact
    {
          width: 486px;
          margin-right: 10px;
    }
    .column.contact2
    {
          width: 486px;
          margin-left: 10px;
          margin-right: 0px;
    }
    /*---------Text Styling--------*/
    h1
    {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 20pt;
          letter-spacing: -1px;
          font-weight: normal;
          text-align: left;
          margin-left: 1px;
    }
    h2
    {
          font-size: 18pt;
          font-weight: normal;
          line-height: 1.1em;
          text-align: left;
          margin-top: 20px;
          margin-left: 1px;
          margin-bottom: 10px;
    }
    p
    {
          font-size: 11pt;
          line-height: 1.35em;
          text-align: left;
          margin-left: 1px;
    }
    .important
    {
          background-color: #ffffde;
          border: thin black ridge;
          font-family: Franklin Gothic Book;
    }
    .nav
    {
          border-left: 20px;
    }

    Are you able to see anything in there that might be causing the problems I'm experiencing? I did try completely removing all CSS code from my page but this made no difference (other than making my page look ugly).

    As a side note, The 'Insert/edit image' and 'Edit HTML Source' functions in this html editor don't seem to work for me at all in any browser (making it difficult for me to add further screenshots and generally format my message to you nicely).

    Apologies for the long message - I'm sure you guys are busy - but any help with the above issues would be greatly appreciated.

    Many thanks.

    Regards,

    Leon

  • Profile Image
    JotForm Support

    Answered by Welvin on November 16, 2012 at 01:30 PM

    Hi Leon,

    Please find my thoughts/answers below with regards to the issues that you have experience with your forms;

    Are you able to see anything in there that might be causing the problems I'm experiencing? I did try completely removing all CSS code from my page but this made no difference (other than making my page look ugly).

    - What method that you have choose when embedding your form? Have you tried our iframe method to see if that helps?

    -What Operating System are you using? This is what your form looks like when viewed on IE8 Windows 7;

    - It would be good if you can provide us a link to your website to where the form is embedded so we can check and possibly locate the problem that causing this not to work on your end.

    ---------------------------------

    As a side note, The 'Insert/edit image' and 'Edit HTML Source' functions in this html editor don't seem to work for me at all in any browser (making it difficult for me to add further screenshots and generally format my message to you nicely).

    - We are sorry about that. When you insert an image, there is sometimes that you can't see it directly on the editor. Just please disregard and go with your other post, after posting your thread, please check if the image was there, if not, please edit or just add the link (will make it easy).

     

    I hope this will solved your problem. Please let us know for results.

    Thank you.

  • Profile Image

    Answered by GlobeTechnical on November 16, 2012 at 02:13 PM

    Hi Welvin,

    1. I tried using the iframe method but this did not resolve the issue. The exact same problems are still present.

    2. I am using mostly Windows 7 with IE9, Chrome & FF and have no problems there. The problem occurs when viewing on XP with IE8.

    3. As I mentioned in my previous post, my website is not live and therefore cannot be viewed from the web - otherwise I would happily provide a link. The only suggestion I can make is for me to provide the website CSS code and the HTML code for the relevant page, as follows:

    CSS

    *
    {
          margin: 0px;
          padding: 0px;
         
    }
    html, body
    {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
    }
    body
    {
          font-size: 0pt;
          font-family: Arial, helvetica, sans-serif;
          color: #423C42;
          background-color: white;
    }
    div
    {
          display: block;
    }
    #container
    {
          margin: 0px auto;
          width:  992px;
          height: auto !important;
          height: 100%;
          min-height: 100%;
          position: relative;
          background-color: white;
    }
    #header
    {
          border-top: 0px solid black;
          padding-top: 24px;
         
    }
    #content
    {
          padding-bottom: 50px;
    }
    #content:after
    {
          content: " ";
          display: block;
          clear: both;
          height: 0;
    }
    #footer
    {
          width: 992px;
          /*border-top: 1px solid #423C42;*/
          height: 50px;
          /*margin: 32px auto 0 auto;*/
          padding: 10px 0;
          /*position: absolute;*/
          bottom: 0px;
          font-size: 12px;
          clear: both;
    }
    /*--------Navigation--------*/
    #nav_arrow
    {
          display: block;
          width: 16px;
          height: 8px;
          background: url(../Images/nav_arrow.gif) no-repeat top left;
          margin-bottom: 30px;
    }
    #nav
    {
          width: 992px;
          margin: 0 auto;
          border-bottom: 1px solid #423C42;
          height: 70px;
    }
    #nav_left
    {
          float: left;
    }
    #nav_right
    {
          float: right;
          margin-top: 10px;
    }
    #logo
    {
          margin-left: 1px;
    }
    img
    {
          border: 0px;
          
    }
    ul
    {
          list-style-type: none;
          margin-left: 1px;
          margin-right: 1px;
          padding: 0px;
    }
    li
    {
          display: inline;
    }
    /* Columns
    -----------------------------------------------------------------------------*/
    .column
    {
          float: left;
          display: inline;
          margin-bottom: 32px;
          overflow: hidden;
    }
    .column.three
    {
          width: 320px;
          margin-right: 10px;
    }
    .column.last
    {
          width: 320px;
          margin-left: 10px;
          margin-right: 0px;
    }
    .column.contact
    {
          width: 486px;
          margin-right: 10px;
    }
    .column.contact2
    {
          width: 486px;
          margin-left: 10px;
          margin-right: 0px;
    }
    /*---------Text Styling--------*/
    h1
    {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 20pt;
          letter-spacing: -1px;
          font-weight: normal;
          text-align: left;
          margin-left: 1px;
    }
    h2
    {
          font-size: 18pt;
          font-weight: normal;
          line-height: 1.1em;
          text-align: left;
          margin-top: 20px;
          margin-left: 1px;
          margin-bottom: 10px;
    }
    p
    {
          font-size: 11pt;
          line-height: 1.35em;
          text-align: left;
          margin-left: 1px;
    }
    .important
    {
          background-color: #ffffde;
          border: thin black ridge;
          font-family: Franklin Gothic Book;
    }
    .nav
    {
          border-left: 20px;
    }

    HTML

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Example Title - Contact Us</title> <link rel="stylesheet" href="Styles/StyleSheet.css" type="text/css" media="screen" /> </head> <body> <div id="container"> @RenderPage("/Shared/_Header.cshtml") <div id="content"> <div class="column contact"> <h2>Contact Form</h2> <iframe allowtransparency="true" src="http://form.jotformeu.com/form/23164070467350" frameborder="0" style="width:100%; height:515px; border:none;" scrolling="no"> </iframe> </div> <div class="column contact2"> <h2>Another Example</h2> <p>This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text. This is some example text.</p> </div> </div> @RenderPage("/Shared/_Footer.cshtml") </div> </body> </html>

    4. The issue with not being able to post a picture here on the forum and not being able to edit the html of my forum post is as follows: I click on the relevant link (either the 'Insert/edit image' button or the 'Edit HTML Source' button) and I get a blank pop-up window with no options available, so I am unable to post a screenshot in the first place.

    Any other ideas?

    Many thanks,

    Leon

  • Profile Image
    JotForm Support

    Answered by Welvin on November 16, 2012 at 02:34 PM

    Hi Leon,

    Your CSS codes won't affect anything on the form if you are embedding it using iframe method. A conflict happen sometimes when you are embedding your form full source codes.

    This is a live test of your form: http://katipunan.biz/jotform/test.html and this is what I see when viewed on Windows XP IE8;

    Please use this site for uploading your image: http://pasteboard.co/ and get the link and just paste it here. 

    Thank you.

     

  • Profile Image

    Answered by GlobeTechnical on November 16, 2012 at 03:25 PM

    Hi Welvin,

    Here's what I see in XP/IE8:

    http://pbrd.co/UKPpmO
    http://pbrd.co/UKPwid

    Regards,

    Leon

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on November 16, 2012 at 03:45 PM

    Hi there, 

    Here is a screenshot of what I see on various browsers.    

    Vista, IE 8.0

    Are you still experiencing the issue?

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on November 16, 2012 at 03:48 PM

    Can you please share the URL where you have embeded the form?

  • Profile Image
    JotForm Support

    Answered by idarktech on November 16, 2012 at 08:01 PM

    Also, In addition to my colleague's, it could be that your IE browser runs on compatibility view which is not default on every IE browser's that is why it displays properly on our side. Simply turn the compability off or remove the site from the compatibility list to view it properly. Here's how:

    Thanks!

  • Profile Image

    Answered by GlobeTechnical on November 17, 2012 at 03:31 AM

    @ idarktech

    Indeed, compatibility was enabled for intranet sites (which is what my site effectively is at this point). The form now displays as it should.

    Thanks for your help guys! Much appreciated.

    Regards,

    Leon

  • Profile Image
    JotForm Support

    Answered by idarktech on November 17, 2012 at 03:37 AM

    That's great!

    Thanks for letting us know.

    Have a happy weekend! =)