Incorporating a form in my scene as a widget

1

I have an html form which i want to use as an html widget in a scene but am not sure how to go about adding the css, js and integrating it in my scene. The html form when hosted separately works fine but I do not want an iframe embed in my scene and instead want to incorporate it as an html widget.

Can someone please make a hype document with a dummy scene and show how this is done? I have attached the html formArchive.zip (65.0 KB)

You can see the working form here:

http://52.206.39.77/formsfront/contacttwo.html

Should we also make the submit button in hype so that not only does it execute the script on clicking the submit button but also display an animated thank you message on the screen. We will do the animated message in hype but need to know:

how to implement the css
how to implement the js
how to run the script when the user clicks the submit button

1 Like
2

You don’t really want a HTML widget either because that is basically a iframe.

One way to do it is:

You can put the form/html in a Rectangle. This will then be a div on the page.

In this example thats what I did. I put the css and the country js in the resources as files.

But the formTwo.js I had to put the content into a native Hype function. And load that at Sceneload.

This allowed it to fire at the right time and be able to discover the other js.

The styles would need playing with. I did adjust the widths that you set at 49% and 35% to something that worked against the rectangle width but you should be able to figure that all out and what ever else is in there but there is far to much in there for me to try and figure out at this moment.

The submit button works no problem as far as I can see.

testForm.hype.zip (111.5 KB)

3

Here is a second way.

Each input is put into it’s own rect. I did this to counter some of the style issues and also because it was easier to lay out how I wanted it.

Now doing this we would have an issue ; how do we surround the inputs with the form tags and action property.

I enclosed all the input elements in a div and then using some jQuery I convert the DIV tag of the group to a form tag with all the properties.

This bit of code is placed in the formTwo hype function that runs on load. ( http://stackoverflow.com/a/17895243/261305 )

Now you still have one issue with the style such the background colour for body and the form is always forced to the top.
I did not bother with fixing the body issue or the top margin as I feel you will need to play with that.

But I did place the form/Div/Group in a second group which I new would force the form to go to it’s top instead of the scenes top. Which it did.

Again the submit seems to work ok after doing this.

testFormV2.hype.zip (109.7 KB)

1 Like
4

Thank you MarkHunte
Really useful techniques there that can help us all understand how we can integrate existing html,css,js into hype projects using inner html. Learnt new tricks that really worked well. Still confused with getting the css to work as is. It is quite a lot of work making the css work. If we just add the style.css to the resources folder it does not style the way we expect it to. But a great start to experiment and see what works. Thank you for your time and effort.

One thing that is seriously still an issue is the submit button. We wanted the submit button to be a hype element instead of using html button that triggers the external script. Can we use a hype button element to submit data of the form and also trigger some animated timeline sequences too? The html button is working fine for firing the external script but cannot fire animated sequences that we want to start off once the user presses the submit button. Any ideas?

5

I think I can do this but my problem is I cannot construct a post method that works so far.

I keep getting a response of Script function not found: doGet

Have you removed the google script ?

6

No havent changed the google script. In fact submit is working for me - check the url
http://52.206.39.77/formsfront/contacttwo.html