Question

Forms design Look & Feel

Forms Version 9

Updated September 28, 2015

asked on September 22, 2015 • Show version history

hi to all

i need sugession how i can design the same paper forms look & feel with laserfiche Forms.

i am attaching paper forms sample.

Thank you.

sample forms.jpg (335.92 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on September 27, 2015

Hey Mazahir,

I took a try at this and came up with the following image. Email me at barkern@protrans.com if you want me to send you the XML. Otherwise, good luck!

Cheers,

Nate

1 0

Replies

replied on September 22, 2015

Hey Mazahir,

You'll want to use a combination of CSS and Javascript to get the form to look like your paper form. Not sure it's possible to make the form look 100% the same, but you can definitely make it look pretty close. The one area you may have issues with is the 'Substitute Decision Maker (SDM) Consent' - To get the fields to align properly and fit within the text, you'll want to use the code found (Here). Other than that, you can place the Name, Signature, and Date fields in line by using CSS to align them properly. An example would look like

`1`	`#q1, #q2, #q3` `{display: inline-block;` `width:` `33%;` `vertical-align:` `top;}`

Replace the #q1 with your field numbers. This should get you started in the right direction.

Nate

0 0

replied on September 22, 2015

That'll take lots of CSS. Make sure you test whatever you come up with across browsers.

I've done similar forms before and they can be difficult to maintain. If the end users can do the input on just a straight form with little to no CSS, you can create the final form with all the formatting. That makes it a little easier to maintain.

0 0

replied on September 25, 2015

hello Sheila

is it possible to share some Sample example which you already done it ? i will get some idea.

Thank You

0 0

replied on September 26, 2015

Hi, Mazahir.

Feel free to email me at sheila@ecofilecorp.com. I'll have to get authorization from one of my clients to share their form since they paid for its development.

In looking at your form, it shouldn't be too difficult to replicate. If you use what Nate said above, and use a float and some other CSS, you should be able to recreate this form. The float would be used for the top section, along with a double-lined border. And it looks like the rest could be done with sections and Nate's suggestion of Custom HTML controls and moving fields into them (courtesy of Michael Mathys).

The forms I've had to replicate had several sections that were divided both vertically and horizontally on each form, so became much more complicated in terms of CSS.

I'm not an expert on the use of CSS, but between Google and my vague memories of doing some of this in a previous life, I was able to muddle through and create fairly close replicas of the clients' paper forms.

- Sheila

0 0

SELECTED ANSWER

replied on September 27, 2015

Hey Mazahir,

I took a try at this and came up with the following image. Email me at barkern@protrans.com if you want me to send you the XML. Otherwise, good luck!

Cheers,

Nate

1 0

replied on September 28, 2015

hello Nate Barker

i sent you a email & waiting for your kind reply.

Thank You.

0 0

You are not allowed to follow up in this post.

Question

Question

Forms design Look & Feel

Answer

Replies

Sign in to reply to this post.