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

    How to arrange 3 fields in the same line?

    Asked by werkgalery 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

    Answered by corupta 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
    JotForm Support

    Answered by Rose 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.