Adding dropdowns inside text

Hi

I am trying to create an employment contract using the form builder where I have a couple of sections with dropdowns within the text. Here's an example:

but I need to find a way to incorporate the same dropdowns and possibly a date picker into my form text I am not sure how to do that so I could use some help :) 

Thanks

Simona

Hello Simona,

We have a narrative widget but this only supports textbox field https://widgets.jotform.com/widget/narrative_fields

If you want it to be a dropdown field, my suggestion would be to get the source code of your form so you can position the fields anywhere on your paragraphs by moving the dropdown codes. If you need assistance with this, just let us know.

Hi EltonCris

I am not really good with coding so I could use some help. Let me know how to provide you with access to my form so you can assist me on this. 

Thanks

Simona

We can also use custom CSS to move the dropdown fields to a specific position. I have checked your form and it seems you're using the narrative widget.

Please give me sometime in editing a cloned version of your form. I will get back to you as soon as possible.

Kindly check my cloned form at this link:https://form.jotform.com/91413812341953

Here is the CSS code I have used:

#input_16{
width: 80px !important;
    position: absolute;
    margin-top: -383px;
    margin-left: 80px;
}
#input_17{
width: 80px!important;
position: absolute;
margin-top: -446px;
margin-left: 180px;
}
#lite_mode_12{
position: absolute;

margin-top: -510px;

margin-left: 390px;

height: 10px;
}
#input_12_pick{
position: absolute;
margin-top: -510px !important;
margin-left: 390px !important;
height: 10px;
}
#lite_mode_9{

position: absolute;

margin-top: -320px;

margin-left: 370px;

height: 10px;
}
#input_9_pick{
position: absolute;
    margin-top: -320px !important;
    margin-left: 370px !important;
    height: 10px;


}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Let us know if this fits your requirements.

Hi 

That's exactly what I am looking after for all of the empty fields within the form. I am just not sure how to replicate the process across all sections as it requires some changes to the CSS I guess...

Okay, let me finish up the cloned form for you. I'll get back to you as soon as I have updated the changes.

I have finished editing my cloned form, kindly check this link:https://form.jotform.com/91413812341953

Here is the complete CSS I have used:

#input_16{
width: 80px !important;
    position: absolute;
    margin-top: -383px;
    margin-left: 80px;
}
#input_17{
width: 80px!important;
position: absolute;
margin-top: -446px;
margin-left: 180px;
}
#lite_mode_12{
position: absolute;

margin-top: -510px;

margin-left: 390px;

height: 10px;
}
#input_12_pick{
position: absolute;
margin-top: -510px !important;
margin-left: 390px !important;
height: 10px;
}
#lite_mode_9{

position: absolute;

margin-top: -320px;

margin-left: 370px;

height: 10px;
}
#input_9_pick{
position: absolute;
    margin-top: -320px !important;
    margin-left: 370px !important;
    height: 10px;


}
#input_18{
width:80px !important;
position: absolute;
margin-top: -270px;
margin-left: 200px;
}
#input_19{
width:80px !important;
position: absolute;
margin-top: -333px;
margin-left: 404px;
}
#input_20{
width:80px !important;
position: absolute;
margin-top: -375px;
}
#input_22{

width: 80px !important;

position: absolute;

margin-top: -150px;

margin-left: 230px;
}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

You may clone my form by following this guide:https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Please give it a try and let us know if you need further assistance.

Hi that's great but when I delete the dropdowns which I put as a guide to you, the coding you've done disappears. How do I sort this out?

To clarify, are you trying to remove the labels of your dropdown?

You may replace the CSS I have given with these updated CSS.

#label_16,#label_17,#label_12,#label_18,#label_19,#label_20,#label_22{
display: none;
}
#id_8{
margin-bottom: -170px;
}
#cid_13{
margin-bottom: -100px;
}
#input_16 {
    width: 80px !important;
    position: absolute;
    margin-top: -148px;
    margin-left: 80px;
}
#input_17 {
    width: 80px !important;
    position: absolute;
    margin-left: 180px;
    margin-top: -182px;
}
#lite_mode_12 {
    position: absolute;
    margin-top: -235px;
    margin-left: 390px;
    height: 10px;
}
#input_12_pick {
    position: absolute;
    margin-top: -235px !important;
    margin-left: 390px !important;
    height: 10px;
}
#lite_mode_9 {
    position: absolute;
    margin-top: -90px;
    margin-left: 390px;
    height: 10px;
}
#input_9_pick {
    position: absolute;
    margin-top: -90px !important;
    margin-left: 390px !important;
    height: 10px;
}
#input_20 {

    width: 80px !important;
    position: absolute;
    margin-top: -195px;
 

}
#input_18 {

    width: 80px !important;
    position: absolute;
    margin-top: -145px;
    margin-left: 200px;

}
#input_19 {

    width: 80px !important;
    position: absolute;
    margin-top: -179px;
    margin-left: 404px;

}
#input_22 {

    width: 80px !important;
    position: absolute;
    margin-top: -125px;
    margin-left: 230px;

}

Please give it a try and let us know how it goes.

Hi 

I am trying to remove all of these labels:

Can you please try to replace the old CSS with the new CSS code I have shared?

#label_16,#label_17,#label_12,#label_18,#label_19,#label_20,#label_22{
display: none;
}
#id_8{
margin-bottom: -170px;
}
#cid_13{
margin-bottom: -100px;
}
#input_16 {
    width: 80px !important;
    position: absolute;
    margin-top: -148px;
    margin-left: 80px;
}
#input_17 {
    width: 80px !important;
    position: absolute;
    margin-left: 180px;
    margin-top: -182px;
}
#lite_mode_12 {
    position: absolute;
    margin-top: -235px;
    margin-left: 390px;
    height: 10px;
}
#input_12_pick {
    position: absolute;
    margin-top: -235px !important;
    margin-left: 390px !important;
    height: 10px;
}
#lite_mode_9 {
    position: absolute;
    margin-top: -90px;
    margin-left: 390px;
    height: 10px;
}
#input_9_pick {
    position: absolute;
    margin-top: -90px !important;
    margin-left: 390px !important;
    height: 10px;
}
#input_20 {

    width: 80px !important;
    position: absolute;
    margin-top: -195px;
 

}
#input_18 {

    width: 80px !important;
    position: absolute;
    margin-top: -145px;
    margin-left: 200px;

}
#input_19 {

    width: 80px !important;
    position: absolute;
    margin-top: -179px;
    margin-left: 404px;

}
#input_22 {

    width: 80px !important;
    position: absolute;
    margin-top: -125px;
    margin-left: 230px;

}

It should remove the labels and align the dropdown field correctly.

Please give it a try and let us know how it goes.

It looks like this now: 

Kindly add this CSS to remove the label and align the fields.

#label_9{

display:none;

}

Please give it a try and let us know how it goes.

Hi 

It works now. I need to replicate all of this into another similar form. Could you let me know how you set up the coding and what elements you added to be able to do it myself.

I think you definitely need a widget for this because people like me who don't know how to code, can't add dropdowns within a text... Or just add an additional feature to the narrative fields widget? I can see that many people have looked for this back from 2015 so we would all be really grateful if you could put this into your plans. 

You may get the field ID by following this guide:https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

May we know if this is the form https://www.jotformeu.com/form/91412728081353 you want to make the changes?

Let me try to get the custom CSS. I'll get back to you as soon as possible.

Yes, that's the other form I need to make the changes to. 

Thanks

Simona

Kindly add these custom CSS in your form.

#label_7,#label_8,#label_9,#sublabel_litemode,#label_10{
display:none;
}
#lite_mode_7{
position: absolute;
margin-top: -266px;
width: 80px !important;
margin-left: 379px;
}

#input_7_pick{

position: absolute;
margin-top: -266px !important;
margin-left: 379px !important;
}
#input_8{
width: 70px !important;

position: absolute;

margin-top: -317px;

margin-left: 80px;
}
#input_9{
width: 70px !important;

position: absolute;

margin-top: -353px;

margin-left: 180px;
}

#lite_mode_10{
width: 70px !important;
position: absolute;
margin-top: -413px;
margin-left: 370px;
}

#input_10_pick{

position: absolute;

margin-top: -413px !important;

margin-left: 370px !important;

}
#id_11{
margin-top: -180px;


}


#label_13,#label_12,#label_16{
display:none;
}
#input_13{
width: 80px !important;
position: absolute;
margin-top: -240px;
margin-left: 195px;
}
#input_12{
margin-top: -278px;
width: 80px !important;
position: absolute;
margin-left: 400px;
}
#input_16{
margin-top: -295px;
width: 80px !important;
position: absolute;
margin-left: 10px;
}
#id_14{
margin-top: -100px;
}
#label_15{
display:none;
}
#input_15{
width: 80px !important;
position: absolute;
margin-top: -120px;
margin-left: 232px;
}

Please give it a try and let us know if you need further assistance.

I have found a way to successfully reposition what was not put in place, except for the last dropdown: 

If you could put this in place too, the form will be ready for use.

Many thanks for your exceptional assistance!

There's also one sublable "Date" that's between text but I can't remove it. If you could remove it for me please. Many thanks

Hello,

When I'm checking your form, the field seems to be already in place:

Have you managed to resolve this?

I didn't notice the position of the elements changes when put in preview mode so I have put back your original CSS and it looks okay. 

Thanks for your help! 

I have moved your question to a new thread to assist you better.

Kindly follow this link https://www.jotform.com/answers/1841412

That's because I changed it to not include narration in the submission but I actually want the report to look exactly like the form with all of its text but with the answers within the text. The form is an employment contract so the idea is that when it's completed by employees, the report looks like a completed employment contract and no text is missed.

I have had to change the "text" element with "checklist" because when I am adding text only it doesn't appear on the pdf form, probably because it doesn't require an answer. However, the pdf now shows "CHECKED" everywhere a checklist is ticked- it would be great if it didn't do that. Is there a way to choose a text element and to make it visible on the report?

When I click on the option to include narration in the submissions, the text appears, however, the answers stay below the text as shown on the image I sent earlier.

I also tried to remove (third empty field) but I can't find the label, maybe it's below some text. 

I can't really make any changes to the pdf because the report will not be received by me but by a client of ours and they don't have access to the backend in order to edit how the pdf looks like. Currently, no idea why, the pdf is missing the client's logo- I have tried adding it without success. Is there a way that I can design how I want the pdf to look like and when my client is completing the form later, all pdfs look like how I designed them? 

The best way to solve this problem is to take advantage of our "PDF Editor" to edit your PDF document template. Here are the steps you need to follow:

#1. Load your form's PDF document in PDF Editor.

#2. Add a "text" field in form and add the desired content of narrative fields.

#3. You can then add your form field value in the text field content to display it in inline with other content. 

Please check the screenshot below:

Hope this helps.

Do try it out and get back to us if you have any questions.