Making forms in Hype (With Example / PHP template)


#1

Is there a better way to make forms in Hype without html/css, so that they can be animated and link to other scenes.


(Jonathan Deutsch) #2

Not really - there’s plenty of online form builders that don’t require code, however for integrating with Hype you’ll need some amount to call Hype’s APIs.


#3

I want to change the scene to animate a form-submitted page, but I’m having trouble staying on the page after the form submits, as it redirects to mail.php
Here’s my current code:

<form class="contact row" action="mail/index.php" onsubmit="myFunction();" method="POST" id="subForm" style="width:300px;">

<input id="fieldName" class="form-control" name="name" type="text" placeholder="Name" value="">

<input id="fieldEmail" name="email" type="email" class="form-control" placeholder="Email" value="" required="">

    <input id="submit" name="submit" type="submit" value="Send" class="button">

    </form>
    <script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";

    window.myhypedocument.showSceneNamed('new');
}
</script>

    
    <p id="demo"></p>

(Jonathan Deutsch) #4

I believe the only way to submit a form without leaving the page is to use an AJAX call. (Though alternatively if the form was in an iframe you could probably pull other shenanigans with how/what it does on reload). Stack Overflow has some solutions:


(Mark Hunte) #5

The target iframe idea on @jonathan 's link , looks like it works well. Although I am not able to test it fully just yet. It even seems you do not actually need the iframe, just a target name…

<form class="contact row" action="mail/index.php" onsubmit="myFunction();" method="POST" id="subForm" style="width:300px;" target="hiddenFrame">

<input id="fieldName" class="form-control" name="name" type="text" placeholder="Name" value="">

<input id="fieldEmail" name="email" type="email" class="form-control" placeholder="Email" value="" required="">

    <input id="submit" name="submit" type="submit" value="Send" class="button">
<iframe name="hiddenFrame" style="display:none"></iframe>
    </form>
    <script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";

    window.myhypedocument.showSceneNamed('new');
}
</script>

    
    <p id="demo"></p>

(Nick ) #6

I have also used formtools.org to implement a php form into an iFrame in Hype and while somewhat limiting I can have my Hype and Form too.
http://www.formtools.org

With this method you can stay on the same page if you want or create a navigation to move to another page.

http://gressle.com/story/

By the way this is also a great way to data-mine copy from a copywriter or author, and convert it into XML. That in turn can then be used in automated publishing in something like Adobe inDesign or Illustrator.


#7

This is something I did for another Hype user a while back.

It’s a contact form using Hype elements and JS to do some basic validation.

Using AJAX to send the info and an element to record a simple message to show the status.

http://hype-expert.uk/contactForm-v2/contactForm-v2.html

If you want the template file then let me know. I’ll post it here.


#8

@DBear
A vote for posting the template!


(Jonas Johansson) #9

Please post the template!!


#10

Inside this zip file you will find contact.php (add to your resources) and a symbol template (you can import this into any document). The contact.php has two calls to the mail function. The first you need to change “EMAIL ADDRESS” to any email address you want to receive notification to. Basically the script sends a notification to the person who fills in the form and a notification to another address to tell you that someone has posted something using the form.

Goes without saying this needs to be done on a server that can handle php.

contactForm-v2.zip (24.5 KB)


Assist with contact form in Hype
Hype Pro Teaser Page
(Jonas Johansson) #11

AMAZING! THANKS A MILLION! Works like a charm

I have been hacking away at the PHP and the JS to adapt it for other versions of the form but the base is great.

Do you also know how to add a check box? or a drop down?


#12

Thank You @DBear for posting the contact form!


#13

Hi @noonas

Sorry for the delay. Here is a template with some ideas for a checkbox and dropdown.

These are built with Hype and there is a result text area where hopefully you can see how to get the output. I’ll leave it up to you how you can incorporate them into the original form template. Of course if you get stuck then we will be on hand to help you out. :wink:

formElements-v1.zip (31.2 KB)


(Victor) #14

almost there !!!


(Jonas Johansson) #15

Thanks a million!


(giovanni_mapelli1) #16

scuse me Master DBear, how do you enter the address where the email is then sent?
tnx

giovanni