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

    Text Field: Changing The Position Of The Text Field

    Asked by perrymanku on July 17, 2013 at 06:15 PM

    I have created a background for a form, how do I add custome fields to it and position them?

     

    Thanks

    Perry

    CSS injected CSS custom CSS
  • Profile Image

    Answered by EliezerN on July 17, 2013 at 06:55 PM

    Thanks for contacting us Perry.

    I guess you are refering to this form http://form.jotform.co/form/31914460194857, right?

    Please refer this guide to learn about Form Field Positioning.

    But I think you will need to apply cutom CSS codes, so please add the fields to your form and follow the steps in the suggested guide, but if that does not help much, please get back to us and tell us where you want to position each field and we will help you with the CSS code.

    It's a pleasure to assist you.

    Thanks.

  • Profile Image

    Answered by perrymanku on July 18, 2013 at 09:17 AM

    Hi thanks for the message.

     

    I need to add custom codes as I want to position the text boxes at a certain place.  Also, why is the submit button at the top and the text box i have added is also at the top

     

    http://www.jotform.com//?formID=31914460194857

  • Profile Image

    Answered by pinoytech on July 18, 2013 at 09:43 AM

    Hi,

    Can you please take a look at this cloned form if this is something you want to achieve?

    http://www.jotformpro.com/form/31983735471967

    Thank you!

  • Profile Image

    Answered by perrymanku on July 23, 2013 at 08:47 AM

    Hello, yes this is what I would like, but I would create forms with a gap at the right to add fields but this is what I would want, please explain how I would do this

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by jonathan on July 23, 2013 at 09:27 AM

    Hi Perry,

    In case you havent' checked yet, you can refer to this guides on how to's

    1. Customize-your-Form-using-Custom-CSS-Codes

    2. How-to-Inject-Custom-CSS-Codes

    In this sample form  http://www.jotformpro.com/form/31983735471967 of our colleague pinoytech, the injected CSS codes are this

       /* Injected CSS Code */

    .form-all {

    background:

    url("http://i1102.photobucket.com/albums/g441/perrymanku/Landing-Pagefinal1_zps7cb66455.jpg") no-repeat;

    height: 612px;

    }

    .form-label-top, .form-label-left, .form-label-right {

    display: none;

    }

    #id_1.form-line.form-line-column {

    position: absolute;

    margin-top: 510px;

    margin-left: 181px;

    }

    #id_2.form-line.form-line-column {

    position: absolute;

    margin-top: 496px;

    margin-left: 354px;

    }

        /* Injected CSS Code */

     

    Hope this help. Inform us if you have further inquiry.

    Thanks.

  • Profile Image

    Answered by perrymanku on July 23, 2013 at 09:43 AM

    Hello,

     

    Thanks for that.  I have now changed the background image and it has gone a little funny

     

    http://www.jotform.com//?formID=31914460194857

     

    The field and submit are still positioned wrong, I would like thenm in the white gap and the background to fit, do i need to resize height and width of the background?

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2013 at 09:57 AM

    I'll tinker with a clone of the form and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2013 at 11:15 AM

    @perrymanku

    Please do the following:

    1. With the form loaded in the form builder, go to the Form Style tab and change the Form Width to 850 (to match the width of the new image)


    2.
    Delete all of the injected CSS

    3. The positions of the text box and submit button are wrong and need to be interchanged. Either click the text box and drag and drag it downward or click the submit button and drag it upward

    4. Shrink the text box and do likewise to the submit button

    5. Inject the following CSS:

    .form-all {
    background: url("http://i1102.photobucket.com/albums/g441/perrymanku/promotion2_zps73356856.jpg") no-repeat;
    height: 850px;
    }

    .form-label-top, .form-label-left, .form-label-right {
    display: none;
    }

    #id_1.form-line.form-line-column {
    position: absolute;
    top: 70px;
    margin-left: 498px;
    }

    #id_2.form-line.form-line-column {
    position: absolute;
    top: 56px;
    margin-left: 671px;
    }

    #input_2 {
    width: 74px;
    }

    (The last rule ensures that the submit button is displayed at the same width in all browsers)

    6. Save the form

    When done, your form should look like this

    Do let us know if you need additional help with this.

    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on July 23, 2013 at 11:19 AM

    Correction: (#3) ... Either click the text box and drag it upward or click the submit button and drag it downward.

  • Profile Image

    Answered by perrymanku on July 23, 2013 at 07:20 PM

    here are my fields but still not alignd

     

    Plese help

  • Profile Image

    Answered by jefreylandicho on July 23, 2013 at 08:52 PM

    Try adding the CSS code below and see if it works.

    Note that for each field you add, you will need to add a css code element for that as the css code provided are set to work on specific field id.

    #id_3.form-line.form-line-column {
    position: absolute;
    top: 130px;
    margin-left: 498px;
    }

    #id_4.form-line.form-line-column {
    position: absolute;
    top: 160px;
    margin-left: 498px;
    }
    #id_2.form-line.form-line-column {
    position: absolute;
    top: 100px;
    margin-left: 498px;
    }
  • Profile Image

    Answered by perrymanku on July 25, 2013 at 05:46 PM

    Hello

     

    I have added this code as you have requested but the form fields are still at top and I am unable to drag them

  • Profile Image

    Answered by jefreylandicho on July 25, 2013 at 05:49 PM

    Please try adding a comma (separator) after each closing tag except for the last one similar below.

    #id_3.form-line.form-line-column { position: absolute; top: 130px; margin-left: 498px; },

    #id_4.form-line.form-line-column { position: absolute; top: 160px; margin-left: 498px; },

    #id_2.form-line.form-line-column { position: absolute; top: 100px; margin-left: 498px; }

  • Profile Image

    Answered by perrymanku on July 25, 2013 at 06:06 PM

    Okay,

     

    i have added two text boxes but how do i get the labels to display first name second name, and have second on smae line as first name

     

    thanks

    Perry

  • Profile Image
    JotForm Support

    Answered by jonathan on July 25, 2013 at 07:18 PM

    Hi Perry, 

    Are you still referring to this form https://www.jotform.com/31914460194857?

    When I view it on my end, it is completely in disarray now

     

    May I suggest you clone the version provide by our colleague Abajan here http://www.jotformpro.com/form/32033903755956 . And just apply your updated modifications to the cloned form.

    Use this guide to clone the form How-to-clone-an-existing-form-from-a-URL

    Hope this help. Please inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by perrymanku on July 25, 2013 at 08:07 PM

    hello,

     

    i have re-created form fields on the form.  when i am in edit mode the first name and last name are underneath each other.  However, when previewing the filedss are not positioned correctly.  How do i get ifrst name nad last name on one line next to each other?

     

    http://www.jotform.com//?formID=32057369835967

     

    Thanks

  • Profile Image

    Answered by perrymanku on July 25, 2013 at 08:22 PM

    how do i create the fields on the above form to look like this

     

  • Profile Image
    JotForm Support

    Answered by tasha_ize on July 25, 2013 at 08:59 PM

    Hi,



    Please have a look at the form that I have cloned (http://form.jotform.co/form/32058431927859? ) and if that is how you would like your fields to look, inject the css below.



    #id_2.form-line.form-line-column {



    top: 160px;

    margin-left: 700px;



    }



     

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on July 26, 2013 at 06:22 AM

    Hi Perry

    In your last reply, it appears you intended to post an image of how the form should look. If this is correct, please use this page to upload the image and then post its link here. In the meantime, I've cloned the latest version of your form and come up with this solution. Is that the sort of look you were aiming for? Incidentally, there's no submit button. Was that intentional?

    We look forward to your reply.

    Thanks

  • Profile Image

    Answered by perrymanku on July 29, 2013 at 09:35 AM

    Hello, this is exactly how i want the form. One question, if i use different images I guess I just need to position the entry fields accordingly?

     

    Also,  do you have an exact height and width for the forms to display correctly on Facebook.  For example without having to scroll up and down.

     

    Thanks

    PErry

  • Profile Image

    Answered by dinesh-it on July 29, 2013 at 10:36 AM

    Hi perry,

    Yes, If you add different image, then you need to re-position the fields accordingly by changing the CSS Code that you added. 

     

    Regarding Width and Height for Facebook Form.

    I am not sure about this, because it seems facebook height and width will change dynamically depends on your device screen.

    So upto my Knowledge. in General.

    width and height should be less then 800px.

    eg:

    width: 780px;

    height: 790px

    Hope this information helps you.

    Let I will do some search regarding this height and width and let you know if I found any thing for you.

    Thank you.

  • Profile Image

    Answered by perrymanku on July 29, 2013 at 04:22 PM

    Thanks,

     

    I have changed the background of the form but the image is not showing up in buld but does in preview.  I realise i need to re-align the fields for the new size.

     

    please advise

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 29, 2013 at 04:46 PM

    In this case you can change the left margins in order to re-align the fields.

    For example:

    .form-all {
    background: url("http://i1102.photobucket.com/albums/g441/perrymanku/FB_FormPage_Test_zps5f0f433c.jpg") no-repeat;
    height: 790px;
    }.form-all input, select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 170px;
    }#id_1 {
    position: absolute;
    top: 120px;
    margin-left: 350px;
    }#id_2 {
    position: absolute;
    top: 120px;
    margin-left: 550px;
    }#label_1, #label_2 {
    display: none;
    }#id_3 {
    position: absolute;
    top: 170px;
    margin-left: 350px;
    }#label_3 {
    display: none;
    }#id_4 {
    position: absolute;
    top: 170px;
    margin-left: 550px;
    } #label_4 {
    display: none;
    }#id_5 {
    position: absolute;
    top: 215px;
    margin-left: 350px;
    } #label_5 {
    display: none;
    }
    #id_6 {
    position: absolute;
    top: 265px;
    margin-left: 350px;
    } #label_6 {
    display: none;
    }

    Thank you.

  • Profile Image

    Answered by perrymanku on July 29, 2013 at 06:20 PM
    How do I make the fields all the same length, eg the drop down boxes same width as the text boxes
    Message sent from Ipad ⭐
  • Profile Image

    Answered by pinoytech on July 29, 2013 at 06:38 PM

    Hi,

    You can use this custom css into your form.

    .form-textbox {

    width: 200px !important;

    }

     .form-dropdown {

    width: 207px !important;

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by perrymanku on July 30, 2013 at 03:30 AM

    Hello,

     

    Thanks for the help. However here is my form now:

     

    http://www.jotform.com//?formID=32093999431968

     

    there is no background image displayed

  • Profile Image

    Answered by jefreylandicho on July 30, 2013 at 04:51 AM

    I have checked your form and can see the background image. Please try clearing your browser cache and you should be able to see it.

  • Profile Image
    JotForm Support

    Answered by abajan on July 30, 2013 at 05:43 AM

    Hi Perry

    Even though the background image doesn't appear in the form builder, it does at the form's URL. Also, I would suggest adding the following rule to the form's injected CSS:

    .form-line-error {
    background: none;
    }

    This would prevent the pink background from being displayed when required fields are left unfilled.

    Thanks

  • Profile Image

    Answered by perrymanku on July 30, 2013 at 07:07 AM

    Thanks I will come back to you should I require further assistance

  • Profile Image

    Answered by perrymanku on July 31, 2013 at 01:35 PM

    I have one more question.

     

    I need to add a check box just above the submit button that is selected by default and says I accept the terms adn conditions (required field).  How can I align the text next to the box and also create a url link on the Terms and conditions bit?

     

    I realise I may have to move the fields up slightly

     

    Please advise

  • Profile Image
    JotForm Support

    Answered by Welvin on July 31, 2013 at 02:08 PM

    Hi Perry,

    Can you please open another thread? This get too long and some questions seem not related anymore to the original question. Please include the form URL to the new thread.

  • Profile Image

    Answered by perrymanku on July 31, 2013 at 03:45 PM

    Hi I have figured out the answer thanks