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

    Aligning Headers and Free Text HTML Boxes

    Asked by cgnz on May 26, 2012 at 03:59 AM

    Hi 

    I am trying to create part of a webpage through using HTML Free text  and Headers and then embedding the form.

    The main issue is that the HTML Free text fields are not centered with the Header Fields once rendered. Purely cosmetic but would be keen to see if I could get everything centred. 

    I have attached an image that hopefully can explain the issue. This is after embedding. As you can see the header is aligned to the left hand side of the HTML box but has overhang on the right hand side.

     

    I suppose the question is, is there a way I can centre all of these things.

     

    Apologies for confusuion in advance!

     

    Screenshot
    free text html headers alignment
  • Profile Image
    JotForm Support

    Answered by abajan on May 26, 2012 at 10:11 AM

    Hi

    Your injected CSS contains several errors, some of which may be partly responsible for the misalignment but I'll need to investigate further.

    Below is a formatted copy of your current CSS with my comments (highlighted in red) indicating the errors I found:

    .form-label-top,
    .form-textarea,
    .form-sub-label {
    margin-left: 63px;
    }
    .form-textbox {
    font-family: Verdana;
    font-weight: normal;
    font-color: white; /* There's no such property in CSS. It's "color" */
    background-color: #ffffff  /* Missing semicolon */
    }
    .form-textarea {
    font-family: Verdana;
    font-weight: normal;
    font-color: black;
    text-align: center;
    width: 1000px;
    background-color: #f0f0f0. /* Replace this dot with a semicolon */
    }
    .form-matrix-values .form-textbox {
    width: 180px;
    font-size: 10px;
    background-color: #3b5998;
    font-family: Verdana;
    font-weight: ;bold; /* Remove semicolon before "bold" */
    text-align: center;
    color: #ffffff;
    border-style: none;
    padding-left: 1px;
    padding-right: 1px;
    }
    .form-matrix-column-headers {
    font-size: 10px;
    background-color: #3b5998;
    font-family: Verdana;
    font-weight: bold;
    font-color: black; /* No such property */
    border-style: none;
    }
    .form-matrix-row-headers {
    font-size: 10px;
    background-color: #3b5998;
    font-family: Verdana;
    font-weight: bold;
    font-color: black; /* No such property */
    border-style: none  /* Not advisable to omit semicolon */ 
    }
    .form-header-group {
    background-color: #4c4d4f;
    width: 100%;
    color: white;
    text-align: center /* Missing semicolon */
    }
    .form-matrix-values {
    background: transparent !important;
    }
    .form-matrix-values
    .form-textbox {
    width: 100% !important;
    }
    .form-collapse-table {
    background: none grey;  /* "gray" has wider browser support than "grey" */
    }
    .form-collapse-mid {
    text-shadow: none;
    }
    .form-collapse-table:hover {
    box-shadow: none;
    text-shadow: none;
    background: grey; /* Use "gray" instead */
    }
    .form-submit-button {
    background: #FFA100;
    color: white;
    border-style: outset;
    border-color: #0066A2;
    height: 50px;
    width: 100px;
    font: bold 15px arial, sans-serif; /* "Arial" is preferable to "arial" */
    }
    .form-sub-label {
    color: yellow;
    font-size: 89%; /* Closing brace omitted */
    .form-sub-label {
    margin-left: 63px;
    }

    It's a good idea to use a validator to check your CSS, especially when it's so voluminous. Also, have a look at 15 Surefire Ways to Break Your CSS.

    I'll get back to you when I figure out how to solve the misalignment issue.

    EDIT: I just noticed that the second rule declares the same color (white) for the background and foreground of the element. Is that what you really want?

  • Profile Image
    JotForm Support

    Answered by abajan on May 26, 2012 at 10:59 AM

    Okay, here's what to do. After making the corrections above, replace the current .form-header-group rule with the following:

    .form-header-group {
    background-color: #4C4D4F;
    width: 975px;
    margin-left: 39px;
    color: #FFF;
    text-align: center;
    }
    #cid_92 .form-header-group,
    #cid_95 .form-header-group {
    width: 960px;
    }

    If you would like further assistance with this or any other JotForm related matter, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on May 26, 2012 at 11:49 AM

    Incidentally, I just discovered that the submit button is not being displayed correctly in at least one version of IE (IE8). I haven't found the cause for this but I recommend doing the following:

    1. Load the form into the form builder and right-click anywhere within the submit button element

    2. When the menu pops up, click Show Properties

    3. For Button Style, select Simple Orange, click "Close Settings"

    4. Click the Setup & Embed tab > Preferences > Form Styles

    5. Change the .form-submit-button rule in the injected CSS to the following:

    .form-submit-button {
    height: 50px;
    width: 100px;
    font-size: 15px !important;
    }

    5. Close the Preferences and save the form

  • Profile Image

    Answered by BBBB on July 16, 2013 at 06:41 AM

    lklklklklkklkklk asasasasas asasasasasas asasass

    asasasassa

    sasasasasasasass

    asasasassssasasassss asassasasasas