How to add text box within a paragraph or sentence?

  • chli
    Asked on April 8, 2015 at 8: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!

  • mikegultia
    Replied on April 8, 2015 at 11:23 PM

    Hi, chli,

    Please allow me to help you. 

    Is this what you would like to happen?

    How to add text box within a paragraph or sentence? Image 1 Screenshot 100

    If yes, here's what you can do.

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

    How to add text box within a paragraph or sentence? Image 2 Screenshot 111

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

    How to add text box within a paragraph or sentence? Image 3 Screenshot 122

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

    How to add text box within a paragraph or sentence? Image 4 Screenshot 133

    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.

    How to add text box within a paragraph or sentence? Image 5 Screenshot 144

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

    How to add text box within a paragraph or sentence? Image 6 Screenshot 155

    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

    How to add text box within a paragraph or sentence? Image 7 Screenshot 166

    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.

    How to add text box within a paragraph or sentence? Image 8 Screenshot 177

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

    How to add text box within a paragraph or sentence? Image 9 Screenshot 188

    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

  • Ashwin JotForm Support
    Replied on April 9, 2015 at 5: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!