Has anyone built forms with custom HTML forms yet?

BenHayat

Guys, have you built any forms or main layout using the new custom HTML forms? If yes, can you share a few screen shots? Preferably if it shows data as well.

Secondly, is it possible to use Bootstrap 4 and it's flexbox layout to build device responsive forms?

Thanks.

T0M

I'm getting into custom forms and pages within main frames and menus in the next days.

Got a custom login form for admin and users.

It was almost easy (when looking back);
just replace the native one with yours but name it the same, place all resources (css, .js etc) in the same folder (just beside the form).. then you will need know/find out which "aw-mapped" fields from the original native form you need to change/add on your custom one. All set.

Took me a bit to fiddle and sort that out.

Next we got a guest registration form (bound to guest reg process with some other specific checkings - like affiliate IDs)

It was done (I'm on 8.2) with "import HTML" inside form editor.

I almost pulled my hair out and wanted to throw that @#€#&! PC out of the window.. as I couldn't get it working. Always a small thing missing ..

In the end it was quite a simple fix:
the custom form template's html file referenced to something like:
/assets/css/file.css

It works fine when changed into (before importing!):
../assets/css/file.css
OR
../yourcustomfolder/assets/CSS/file.css

:roll: :mrgreen:

I now have a login and "special" registration page greeting me with custom bg image, HTML, CSS and .js ..just like this one (wait, I believe it actually is exactly this one):

https://colorlib.com/wp/template/login-form-v3/

So I just hope that same trick will do well with custom pages and frames.

T0M

Well.. i tried and failed. Or let´s say i need to continue failing till it finally works. :mad:

I went per documentation and
-> created a new folder C:/xxx/webapps/myappname/Custom/myfolderforthisshit/product-description
-> put a single html file in /product-description
-> placed all related folders in "product-description" too. Like folder for: css, js, bootstrap (3.xx)..
-> Main frame. Property: Contents: Display HTML page. Imported from /product-description

It shows text content of that html file.. but loading bar is permanently "loading" and the sites menu (native aware) is totally crippled horizontally to the very top of the page (instead of the native vertical menu).
No images are shown. No css styling visible. So i guess .js is also not working.

Then (always did import again and tested):

:arrow: Tried without renaming the ressources paths in pagename.html (they are like: /css/file.css)

:arrow: Tried with renaming the ressources paths in pagename.html to ../css/file.css

:arrow: Tried with renaming the ressources paths in pagename.html to ../Custom/myfolderforthisshit/product-description/css/file.css

:arrow: Tried removing <head> tags. Leaving only the tag and whats inside of <body> </body>

:arrow: Tried removing <head> and <body> leaving only the divs

:arrow: Tried a few more combinations i can´t remember.

If you put in a plain pagename.html without any ressources / links to css, js ..it works as expected.
So something may conflicts with awareim bootstrap, css, js

Anyone has a pointer into the right direction?
(Would love to preserve my brown hair till ma 40's)

Edit/Update:

When using for example:
https://bootsnipp.com/builder
and downloading that vanilla example "Project Name" "Jumbotron" thing.. it kinda works (downloads only a single html file which i then imported as described above)

Edit/Update 2:
Still using bootsnip.com/builder.
When copy/pasting bootsnip HTML code right into Contents -> HTML string. WORKS!
Used bootstrap 3.3.0 and jquery 1.11.1 as ettings as this is at least = or < than aware. (so I'm counting on backward compatibility)

aware_support

One "gotcha" for those using custom forms (I thought it was documented, but now I cannot find where).

If a form refers to resources stored under the web application directory (AwareIM/Tomcat/webapps/AwareIM) they need to be referred to using ../

Let's say that you store some CSS inside AwareIM/Tomcat/webapps/AwareIM/MyCSS folder

So the form includes a reference like this:
<link href="MyCSS/Somefile.css>>

This works when you just display the form. However, when you import such a form into Aware IM you need to replace the above reference with:
<link href="../MyCSS/Somefile.css>>

This only applies to resources stored inside a web application directory. If your references include absolute URL's they need not be changed.

T0M

Ok, that's good information.

If a form or page is stored inside awareim we'd need to reference with:
../folder/file.css

But do we also need to define the depth (or aware will look through for this folder itself)?
means like eg:
../../../folder/file.css

aware_support

You just need to specify one level more than where the form actually is (this is because at run-time the form is running inside an IFRAME)

T0M

Well, sorry for picking that up again..

But it seems whatever i do.. it will not work.

I put the html and ressources inside aware and outside and tried all options;
Edited ressources to
../folder/
../../folder/ and also left default
folder/

tried to "import" and "display HTML string"

The page itself, if opened on a browser displays fine..
But whenever awareim should serve/display the page it will not work.

aware_support

Custom HTML forms work in object forms only and have nothing to do with visual perspectives. Visual perspectives are a different story altogether - they are imported as is and do not use IFRAME. Also note that they are embedded into an existing Aware IM page - so do not use <link>, <body> or <style> elements. They may or may not work. If you need to include CSS styles put them in the Custom/CSS directory as usual or modify startup.html

johntalbott

Circling back .. is anyone successfully using custom forms?