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 add text box within a paragraph or sentence?

    Asked by chli on April 08, 2015 at 08:03 PM

    Is there a way to put a text box into an area of fixed text?

    For example: I, __________, parent / guardian of ____________________, authorize _______________ to drive my child....

    Thanks!

    parent thanks
  • Profile Image

    Answered by mikegultia on April 08, 2015 at 11:23 PM

    Hi, chli,

    Please allow me to help you. 

    Is this what you would like to happen?

    If yes, here's what you can do.

    1. Create your form just like the image shown below.

    2. Shrink your text boxes by clicking the Properties button (cog button) and then select "Shrink".

    After shrinking, it should look similar to the image below.

    3. In order for you to position everything, you need to first select every text-field, one by one, then set Label Align from the menu to "Right". Label Align Menu button only appears when you're in the Properties tab. See the image below for details.

    4. After doing that, you need to go to Preferences then go to Form Styles tab and locate the Inject Custom CSS field.

    From there, you would be able to input your CSS codes, but first you need to know the id's of your text box's text-fields and labels.

    You may use this reference in order for you to get those id's, How to find Field IDs Names

    Once you know the id's of your text box label and text box input-field, you will now be able to apply your CSS codes.

    Here's mine, 

    #id_3 {

    position: absolute;

    left:260px;

    }

    #id_5{

    position: absolute;

    left:0px;

    top: 30px;

    }

    #id_4 {

    position: absolute;

    left:260px;

    top: 30px;

    }

    #input_1, #input_3, #input_4, #input_5 {

    border: none;

    box-shadow: 0px 1px 0px 0px;

    }

    #label_1 {

    padding: 1px;

    }

    I have copied this code to the Inject Custom CSS field as shown in the image below.

    After applying those CSS codes, here's what it should look like,

    By the way, those lines are really text boxes, I just removed the text box's border and place a border shadow on the bottom part instead to do the trick.

    I hope I was able to help you. By the way, here's my form-URL, http://form.jotform.me/form/50978847205466 for your reference.

     

    Thank you.

     

    Best, 

     

     

     

    mike

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 09, 2015 at 05:17 AM

    Hello chli,

    There's an easier way to achieve your requirement. Please take a look at our "Narrative Fields" widget which should allow you exactly do the same :  http://widgets.jotform.com/widget/narrative_fields 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!