Making forms in Hype (With Example / PHP template)

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

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.

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>

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:

1 Like

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>
1 Like

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.

1 Like

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.

4 Likes

@DBear
A vote for posting the template!

1 Like

Please post the template!!

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)

3 Likes

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?

Thank You @DBear for posting the contact form!

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)

almost there !!!

Thanks a million!

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

giovanni

Hola
Donde puedo cambiar los "email address" y es posible que me envie la informacion a una base de datos mysql?

te puedes cambiar los correos electronicos al dentro del archivo de "PHP".

mandar los detalles a una base de datos mysql, cambiaria el archivo de PHP que agregar a una base de datos mysql.

Necesitaría codigo diferente.

I'm using contactForm-v2 and formElements-v1, but I can't get it to verify that the box is checked before sending.
I also need to be able to re-enter the email and verify that they are correct.

this is what i should get

Can you elaborate on what instead you are hitting perhaps with a sample zip of your .hype project, related files, and any console logs?