Can I create a horizontal form?

  • Profile Image
    and1
    Asked on November 05, 2011 at 05:29 AM

    is it possilbe to creat a horizontal form like the form in the image?

     

  • Profile Image
    abajan
    Answered on November 05, 2011 at 06:50 AM

    Yes, that can be done. Feel free to clone the form at the link but here's how to make a similar form:

    1. From the Quick Tools menu, insert the following: "Address", "Full Name", "E-mail" and two "Phone" fields

    2. While the label of the second phone field is highlighted, type "Mobile"

    3. Right-click the Address field and in the pop-up menu click "Shrink" and do the same for each subsequent field

    4. If even after shrinking the "Mobile" field, it ends up on its own line when viewed in some browsers, increase the form's width until the problem is corrected (about 725 pixels should be enough)

    5. Save the form

  • Profile Image
    and1
    Answered on November 05, 2011 at 09:16 AM

    Thank you for the quick reply.

    I actually didnt place the fields in order on the picture, my mistake.

     

    is it possibe to place the address block on the right hand side and the full name, email and phone numbers grouped to the left? so that it creates a square?

  • Profile Image
    abajan
    Answered on November 05, 2011 at 09:30 AM

    No problem. Just inject the following CSS:

    #id_1 {float:right;}

    The form should now look like this.

  • Profile Image
    haybusaz
    Answered on November 06, 2011 at 01:14 AM

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

    sorry man but this is the best i could do after injecting the code, can you please edit mine so that the address block is on the right and everything else is on the left?

  • Profile Image
    allanftd
    Answered on November 06, 2011 at 02:13 AM

    Hi haybusaz,

    You can actually clone the form created by my colleague Wayne (http://www.jotform.com/form/13082301334) so that you don't need to create it from scratch. I have cloned it for your convenience but don't forget to set up the email notifications if needed. For future reference, please go to this page to learn how to clone a form - http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL.

    Please let us know if you have any other questions or concerns.

    Thanks,

    Allan
    JOTFORM SUPPORT

     

  • Profile Image
    liyam
    Answered on November 06, 2011 at 02:36 AM

    I'm not sure if abajan made a typo, or you have removed the field with the specific ID that's why you could not replicate the solution. 

    On your form, you should use #id_9, instead of #id_1 (unless you have tried deleting the original and replaced it with a new address field set).  Then put the other two fields on the next line. I do believe it should fix your form. 

    You can also try allanfd's solution.  Just replace the two fields after and go again with the steps on shrinking the fields and putting them on the next line.  Or clone this form that I cloned from you and have modified it.

  • Profile Image
    haybusaz
    Answered on November 06, 2011 at 03:15 AM

    Thank you all for your help i have cloned abajans form but there is one more thing i would like to do.

    Is it possible to stretch the first name and last name boxes out? i stretched out the email box but cant do the same with the first name and last name boxes, i would like the first and last names to be of the same size but stretched out to fill up the left hand side of the form.

  • Profile Image
    liyam
    Answered on November 06, 2011 at 03:21 AM

    You can add this to the CSS injection, just below the #id_1 { .... } CSS:

    #first_3, #last_3 {
    width: 153px;
    }

    Feel free to adjust the width to your own preference.

  • Profile Image
    haybusaz
    Answered on November 06, 2011 at 05:04 AM

    Fantastic, thanks again for all your help

  • Profile Image
    allanftd
    Answered on November 06, 2011 at 05:10 AM

    You're welcome, we also thank you for the opportunity to assist you today.

    Let us know if you have any other questions or concerns.

    Allan
    JOTFORM SUPPORT

     

  • Profile Image
    liyam
    Answered on November 06, 2011 at 07:41 AM

    Just one addition before all would work out and be OK for the most common browsers used.  abajan noticed that the width of the email field looks a bit extended on Opera browsers and it breaks the layout of your form. Here's one additional CSS fix that I would like for you to add:

    #input_4 {
    width: 315px;
    }

    Just let us know if you have other questions or concerns.