How to insert Form Fields inside HTML content (to maintain formatting of paper forms)

SELECTED ANSWER

replied on August 15, 2023

I've done this with the Classic Designer (it would be very hard or even impossible to do this with the Modern Designer). Since I see you tagged your post as Version 10, Classic Designer is all you have anyway, so that's a moot point.

Here's an example (tested on Classic Designer Version 11.0.2212.30987).

This example includes a custom HTML element with three paragraphs of text (just using some lorem ipsum for example). This also includes 6 span elements within it, that give it locations for the fields to be moved to and any associated errors to be moved to as well. There are also two single line fields (currency fields specifically in this example) and one checkbox field.

Here's how it looks in the Layout designer:

Here's the actual HTML of that Custom HTML element, with the 6 span elements within it.

1<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Transaction amount: $ <span id="field1_placeholder"></span> Dictum sit amet justo donec enim diam vulputate ut. Quis risus sed vulputate odio ut enim blandit volutpat. Faucibus a pellentesque sit amet porttitor. Massa tincidunt nunc pulvinar sapien et. Sagittis orci a scelerisque purus semper eget.</p><span id="field1_errors"></span>
2 
3<p>Faucibus nisl tincidunt eget nullam non. Nunc sed velit dignissim sodales ut eu sem. Transaction amount: $ <span id="field2_placeholder"></span> Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Nunc lobortis mattis aliquam faucibus purus in massa tempor nec. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Iaculis eu non diam phasellus vestibulum lorem sed.</p><span id="field2_errors"></span>
4 
5<p>Mattis vulputate enim nulla aliquet porttitor lacus. Est placerat in egestas erat imperdiet sed euismod. Checkbox field: <span id="field3_placeholder"></span> Arcu bibendum at varius vel pharetra vel turpis nunc. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Id aliquet risus feugiat in ante metus dictum.</p><span id="field3_errors"></span>

This Javascript is used to move the fields and their errors messages into those 6 span elements of the paragraph:

01$(document).ready(function() {
02   
03  //Move the single line field elements into the paragraph.
04  //Give them new class names we can refer to later.
05  $('.field1_original input').addClass('field1_new').appendTo('#field1_placeholder');
06  $('.field2_original input').addClass('field2_new').appendTo('#field2_placeholder');
07   
08  //On the readonly or archival version of the form, move the 
09  //single line field elements into the paragraph.
10  $('.field1_original .ro').addClass('ro_underline').appendTo('#field1_placeholder');
11  $('.field2_original .ro').addClass('ro_underline').appendTo('#field2_placeholder');
12   
13  //Move the checkbox field elements into the paragraph.
14  //Give them new class names we can refer to later.
15  $('.field3_original .radio-checkbox-fieldset').addClass('field3_new').appendTo('#field3_placeholder');
16   
17  //On the readonly or archival version of the form, move the 
18  //checkbox field elements into the paragraph.
19  $('.field3_original .ro').closest('.cf-field').appendTo('#field3_placeholder');
20   
21  //Hide the left-over components from the original field positions.
22  $('.field1_original').hide();
23  $('.field2_original').hide();
24  $('.field3_original').hide();
25   
26  //Using their new class names, we set-up listeners for after the single line fields
27  //are changed or lose focus, to move any parsley errors to their new locations.
28  //This references the placeholders when looking for parsley-errors-list, because with
29  //single line fields, the parsley-errors-list is appended to the input element.
30  $('.field1_new').blur(moveSingleLineErrors);
31  $('.field1_new').change(moveSingleLineErrors);
32  $('.field2_new').blur(moveSingleLineErrors);
33  $('.field2_new').change(moveSingleLineErrors);
34  function moveSingleLineErrors() {
35    $('#field1_placeholder .parsley-errors-list').appendTo('#field1_errors');
36    $('#field2_placeholder .parsley-errors-list').appendTo('#field2_errors');
37  }
38   
39  //Using their new class names, we set-up listeners for after the checkbox fields
40  //are changed or lose focus, to move any parsley errors to their new locations.
41  //This references the original field when looking for parsley-errors-list, because with
42  //checkbox fields, the parsley-errors-list is not appended to the input element, and
43  //therefore it will be in the original location, not the new location.
44  $('.field3_new input').blur(moveCheckboxErrors);
45  $('.field3_new input').change(moveCheckboxErrors);
46  function moveCheckboxErrors() {
47    $('.field3_original .parsley-errors-list').appendTo('#field3_errors');
48  }
49   
50});

I also included this CSS that impacts the fields after they are moved to their new locations.

1/*Adjust width of the two single line fields.*/
2.field1_new {width: 100px;}
3.field2_new {width: 100px;}
4 
5/*Needed to ensure checkbox fields are inline with paragraph.*/
6.field3_new {display: inline;}
7 
8/*Make readonly version of form fields underlined.*/
9.ro_underline {border-bottom: 0.1rem solid;}

The end result looks like this:

And when error messages are present:

And when the form is populated:

And the readonly/archival version of the form:

2 0

View 7 previous replies

replied on August 15, 2023

Thank you very much, I will get to work immediately to implement this alternative, I will let you know as soon as I can have it made of my progress. But your explanation has been very useful.

0 0

replied on August 15, 2023

You're very welcome.

0 0

replied on August 15, 2023

It has been amazing, now with your help it opens up the possibility of reformatting and redesigning several forms that I had previously made with similar formats. Here I show you how the readjustment of the current form that I am working on is going.

Very thankful!

membershippp-ok.png (33.72 KB)

| Download

1 0

replied on August 15, 2023

I'm so glad you like it and that it helps you. Your form looks great by the way!

1 0

replied on August 15, 2023

Thank you very much for your compliment, I still have several similar fields to implement, the truth is that your contribution came very well to what I am doing. After one has a working solution to a problem, then we can play a bit with CSS to make it more visually appealing, without losing the standards that clients require.

0 0

replied on August 15, 2023

By the way, how can I make the labels of the radio buttons bold in the CSS? I have tried it in several ways but it does not apply to me.

0 0

replied on August 16, 2023

Here's some CSS to make the checkbox or radio button labels bold.

1/*Bold text on all checkbox/radio button labels.*/
2.form-option-label {font-weight: bold!important;}
3 
4/*Bold text on specific checkbox/radio button labels - add 
5the boldCheckbox class to the specific fields.*/
6.boldCheckbox .form-option-label {font-weight: bold!important;}

1 0

replied on August 16, 2023

Thank you, that works perfect!!!

0 0

replied on April 1

Hi Matthew, I hope you are find. Are you have any update of this for Modern Design Form?. I needed it for update the form I apply this before, need to be update to the Modern Design.

Thank you.

0 0

replied on April 1

This method is modifying the actual structure of the fields, which isn't possible in the Modern designer. I would continue to use the Classic Designer for any forms that need this particular kind of functionality.

1 0

replied on August 15, 2023

I know you already have a working solution so stick with that, but I wanted to mention another approach which is to create two separate forms, one for filling out, and one for storage.

The web form will still look like a typical web form, but then I'll create another version of the form that's more like the "paper" layout and use dataset variables in HTML to populate the data.

This doesn't work if you need the form to be printable right after submission, but other than that you can specify that second form with "using current process data" in things like Save to Repository, emailing the form, etc., to get the desired format.

Things like checkboxes and radio buttons get a little more complicated and I may use a mix of HTML and actual fields, but it still works great for striking a balance between getting the desired format while still keeping the user side more web/user friendly.

1 0

replied on August 15, 2023

Somehow I think you read my mind, and what you recommend is very accurate, and it's just what I plan to do so that the form saved on the server (although I plan to store both separately) is as clean as possible. Thank you very much for your recommendation, I think it complements cases like this very well.

0 0

replied on August 15, 2023

You're quite welcome. The thing to keep in mind is that the dataset variables are only updated on submission so they can't be used for "real-time" updates of the web form in the same way as Matthew's solution, but that's not an issue if the second form is only used for document generation not data collection.

I haven't worked with the modern designer much yet since my forms are often too dependent on JavaScript functionality, but this approach should work there too.

1 0

Question

Question

How to insert Form Fields inside HTML content (to maintain formatting of paper forms)

Answer

Replies

Sign in to reply to this post.