Making forms in Hype (With Example / PHP template)

Tips & Tricks
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>
1 Like
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.

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

4 Likes
8

@DBear
A vote for posting the template!

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

3 Likes
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)

14

almost there !!!

15

Thanks a million!

16

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

giovanni

17

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

18

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.

19

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

Captura de Pantalla 2021-11-16 a la(s) 11.47.25
Captura de Pantalla 2021-11-16 a la(s) 11.47.25641×712 23.5 KB

20

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

21

First of all I apologize, as I am working with google translate.

What I am trying to do is, that it can be validated that the fields are not empty, that it can compare and validate the email field, and finally that the check is selected.

There is a result field, which only helps me to verify that it is selected.

and since I'm testing it locally, I can't find a link with contact.php

Suscribe.zip (67.7 KB)

22

I think you'll need two basic things for this to work:

  1. You'll probably want to put an ID on the animating checkbox element ("Pasted") itself instead of its parent symbol element. This is because your checkBox() function gets called and puts the "checked" class on that instead. I called this "checkbox" for simplicity.

  2. You'll need verification code in the contactFormSendMail() to look for this. I'm putting this at the top:

    var isChecked = hypeDocument.getElementById('checkbox').classList.contains('checked');

    And then some code below to see if it is checked:

    if(isChecked == false) {
    return;
}

    Like the other blocks, you'll probably want to make a message field and populate it if it isn't checked.

Here's what I put together:

Suscribe.hype.zip (71.0 KB)

23

Thank you very much, I would only be able to compare the email field, so you can validate if it is correct and if they are the same.

thanks for your help

24

You would want to add a clause like:

	if (email != email2) {
		hypeDocument.getElementById('email-status').innerHTML = "Email Does Not Match";
		hypeDocument.getElementById('email2-status').innerHTML = "Email Does Not Match";
		return;
		
	}

See:
Suscribe.hype.zip (71.1 KB)