How to arrange 3 fields in the same line?

  • Profile Image
    werkgalery
    Asked on July 06, 2017 at 02: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

  • Profile Image
    corupta
    Answered on July 06, 2017 at 04: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

    Step 2:

    -Result is like this.

    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.

    Step 4:

    -Result is like this

    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.

    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.

    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.

    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.

    Hope this will help you.

     

    Regards.

  • Profile Image
    Rose
    Answered on July 06, 2017 at 08: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.