Inserting editable fields into html or rich text

Forms SharePoint 2019
1

Hi!
I was wondering if it is possible to create a paragraph with editable fields on the form. I would like to make a form that has a multiline text and in the text there are fields that the user can fill out. I would like it to look like a paragraph in a letter or a contract. For example:

"Hereby, I [editable text field] (born: [editable date field] [editable text field]) declare that..."

I can see that it is possible to insert values of SharePoint fields into an Html or rich text control, but they are not editable. I can create an Html control and insert an input field in between other text, but how do I grab its value and pass it to a SharePoint field?
Thanks for looking into this.

2

Hello @Janos_Nagy,

Please try out Stack container. This is an example of what can be done using the Stack container:

image
image1112×406 30.4 KB

3

Hi @Margo !
Thanks for the suggestion. I am wondering what the texts are next to the input fields in your example? Are they plain text controls or titles of the inputs?
How can we level the plain text controls with the inputs other than setting padding as suggested here?
Also is each line or sentence in your example another stack container?
Thanks!

4

Hello @Janos_Nagy,

I am sorry for the long wait.

This is a Text control, Text field and Number field inside the Stack container. You need to put all the content inside the Stack container and it will be automatically split into lines.

Use this CSS to align text to the bottom edge of the input:

.fd-form p {
    margin-top: 1rem;
}
5

Hi @Margo,
Thanks for the reply. I have one further question if I may.
If I wanted to decreae the space (margin?, padding?,line-height?...) vertically between grids and/or stacks, or in other words if I wanted to have narrower lines/rows in my form how should I do it? It seems to me that the bootstrap columns have a wide height...
Thanks,
Janos

6

@Janos_Nagy,

All of these can be done using the CSS, but I don't understand what spacing you want to remove.

7

@Margo,
This is the editor: (no padding or custom css or other alteration was applied)

Editor
Editor1491×183 5.58 KB

This is the form in the browser.

Browser
Browser1347×253 13.5 KB

So I would like to have denser text vertically.
Browser2

Thanks.

8

@Janos_Nagy,

Use this CSS to decrease the space between text controls:

.fd-form p {
    margin-bottom: 5px;
}
9

Thank you very much!