How to arrange 3 fields in the same line?

  • werkgalery
    Asked on July 6, 2017 at 2:58 AM

    Mit dem Layout habe ich noch echt Probleme...

    Wie schaffe ich es, den Textblock rechts oben, neben Name und Telefon zu plazieren?

    Ich habe es versucht mit Spalten, ...es verzerrt mir nur das Design.

    Herzlichen Dank und freundliche Grüsse

    Philipp Dürmüller

  • corupta
    Replied on July 6, 2017 at 4:56 AM

    Hi,

    I believe you can do what you want by adding a name, phone, text fields and then clicking on shrink at advanced tab from the properties of each form element.

    However, you might need to change the widths of the element so that text box field could be bigger, and others smaller.

    You can easily change the field size manually as well, just open the Designer and Paste this CSS code, you can change the 50% value with your preferred value : 

    #input_284{

        width:50%;

    }

    You can also see the Field's ID by following this guide : http://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    For a small demo, you can check out the form I shared below, and can clone it, if you want.

    https://form.jotformpro.com/71861545323961

    For help in cloning a form, check out

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    I have also prepared a visual guide.

    Step 1:

    -Create your form.

    -Add a full name field / or short text / or whatever you want

    -Add a phone field

    -Add a text field

    How to arrange 3 fields in the same line? Image 1 Screenshot 90

    Step 2:

    -Result is like this.

    How to arrange 3 fields in the same line? Image 2 Screenshot 101

    Step 3:

    1. Select the name field

    2. Open the options for that field

    3. Click on the advanced tab of the options part.

    4. Click on the shrink to turn it on.

    5. Repeat these steps for the phone and text fields.

    How to arrange 3 fields in the same line? Image 3 Screenshot 112

    Step 4:

    -Result is like this

    How to arrange 3 fields in the same line? Image 4 Screenshot 123

    Step 5:

    1. Click on the name field

    2. Click on the options for that field

    3. Select the advanced tab from the options part

    4. Scroll down and select the Field Details button

    5. Note down the field id's

    6. Repeat these steps for the phone field.

    How to arrange 3 fields in the same line? Image 5 Screenshot 134

    Step 6:

    1. Click on the form designer icon to open up the form designer tool

    2. In the form designer tool, click on css.

    3. Now, you are ready to inject css.

    How to arrange 3 fields in the same line? Image 6 Screenshot 145

    Step 7:

    1. Enter a similar css as me. For example, mine was as following.

    #first_6{

      width: 60px;

    }

    #last_6{

      width: 80px;

      

    }

    #input_4_area{

      width: 30px;

    }

    #input_4_phone{

      width: 60px;

    }

    However, you have to change the id's with your form fields' id's.

    2. Also you can change the widths to your desired values.

    3. Don't forget to click on save

    4. If you also want to increase form width, click to advanced css editor and continue with step 8, else you can skip step 8.

    How to arrange 3 fields in the same line? Image 7 Screenshot 156

    Step 8:

    1. Click the design part

    2. Click the form layout

    3. In the form layout change the form width to your desired value.

    Default is 690, for example for a larger form you can try 800.

    4. Click the SAVE button (on the top left).

    5. Click the button above the save button, to go back to the builder.

    How to arrange 3 fields in the same line? Image 8 Screenshot 167

    Hope this will help you.

     

    Regards.

  • Rose
    Replied on July 6, 2017 at 8:57 AM

    If I understood your question correctly, you would like to see text field, phone field and name field in the same line. 

    If this is the case, the workaround suggested by "corupta" can comply your request.  If that solution does not work either, please do not hesitate to contact us.  It would be good know your Form ID on where you have issues. We would be pleased to assist you for any issue you may have.