Making forms in Hype (With Example / PHP template)

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)

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)

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

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)

now it does the verification, and returns the error but when correcting, it does not advance in the verification of the next field. it's as if the email and email2 fields were never the same

In the else clause, there's code that blanks out the status fields. Since for each check you want to start fresh, you could probably move that block to the top:

	hypeDocument.getElementById('name-status').innerHTML = "";
	hypeDocument.getElementById('email-status').innerHTML = "";
	hypeDocument.getElementById('email2-status').innerHTML = "";
	hypeDocument.getElementById('phone-status').innerHTML = "";
	hypeDocument.getElementById('results').innerHTML = "";

See:
Suscribe.hype.zip (71.5 KB)

2 Likes

great jonathan, I finally left where the code was, but checking step by step, the answer was there. I have only one strange behavior but nothing serious in the operation of the form. Thank you

1 Like

Where is the information sent from the form? Where are the submission settings in the form?

Information appears to be added to the vars at the top of the contactFormSendMail() function:

vars = "name=" + name + "&email=" + email + "&phone=" + phone;

And then is sent via this line:

req.send(vars);

I'm not sure what you mean by "settings?"

(In any case I didn't really check the submission parts, just the validation as was asked)

I have not finished programming my website yet. but in the example there is a connection to a contact.php file, I'll start with that stage soon anyway.

1 Like

I don’t know why the folks at Hype make it so darn hard to create a contact form. Just give us the defining code and be done with it. It will increase sales because it adds to how Hype can be used in other ways besides straight animations. As I’ve read in the forums, the rational for not making this contact form info more easily available is because Hype is essentially an animation program, not a web page/website creator. But since you can export as HTML5 that means you can use the end result on the internet as an entire website or just a contact/response web page. I know because I did it and create an entire website using only Hype.

Anyway, to the rescue: DBear!!!
So I guess someone is listening after all.
Making forms in Hype (With Example / PHP template) - #9 by noonas

Using his contactForm=v2.zip file as a base, I changed a lot in the wording and came up with code that works for my website.

Yes I said website. I went against the norm, against everyone who says don’t use animation like this for a website, and did it anyway.

I only reference it here to show what can be done in Hype. The entire website has been created using Hype 4. Has 156 scenes and 171 buttons linking to somewhere else on the site. Needless to same it drove me crazy creating this baby. But in the end it’s serving me well. It’s my personal website advertising portfolio.

Enclosed in this zip file (below) is everything I did, including how the end result works out when someone uses my contact form.
(For a test shown below, I sent myself a message using one of my other websites.)

Here’s the contact.php code I finally used:


<?php $address = $_POST['email']; $message1 = 'Senders Name: ' . "\r\n" . $_POST['name'] . "\r\n\r" . "Senders Email: " . "\r\n" . $_POST['email'] . "\r\n\r" . "Senders Message: " . "\r\n" . $_POST['message']; $message2 = "Hi " . $_POST['name'] . "\r\n\r" . "I just received a message from you that was sent to me using my website contact form at: " . $_SERVER['HTTP_REFERER'] . "\r\n\r" . "The message read:" . "\r\n" . $_POST['message'] . "\r\n\r" . "This is an acknowledgment that I received the message and will reply to you shortly. Thanks for sending it."; $headers = "From: donking@thedesignbeacon.com"; //$headers .= "content-type: text/html"; $email = $_POST['email']; if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo "Invalid email format"; } else { echo 'Thank you '. $_POST['name'] . '. I have sent you an acknowledgement that your email has been received.'; mail("donking@thedesignbeacon.com","An email has been sent to you from your Design Beacon website",$message1,$headers); mail($address,"FROM THE DESIGN BEACON - Thank you for sending your message",$message2,$headers); } ?>

And here's what my contact form looks like on my site. The red text will appear if the form isn't filled out correctly. I used code in a contactFormSendMail.js file to create this. It's included in the zip folder at the bottom of this message.

And finally, here are 2 emails files that show what the messages look like to both sender and receiver when the contact form is used using my version of the contact.php file.

Everything I've talked about is in this 10 file zip folder:

contact_form_the_design_beacon.zip (1.1 MB)

Sorry this post was so long, but I wanted to say everything I could.
Hope this helps out with a little more info then has already been given.

Regards,
Don

1 Like

Got a few questions from my above post from last week. So I thought I'd do a more thorough job explaining how everything works. How I used the 3 javescript and 1 php files to create the contact form on my website. It's an easy to understand step-by-step sheet explaining how I did everything from start to finish. Plus I added all the files involved. It's all in this zip folder. In case anyone was still in the dark about anything. Regards, Don

ontact_form_the_design_beacon.zip (1.5 MB)

2 Likes