Does the new Hype 3.5 make contact forms possible?


(Jonathan Langberg) #1

I went through most of the forums on the variety of ways to create a contact form within Hype and had no luck. The easiest option seems to be to pay for a contact form and embed it, but I don’t want to have to pay a monthly subscription for a simple contact form, and there is no control… And there are other worse but free alternatives like Google Forms, which do not allow for much customization.

What I did with another visual editor on the Mac (Sparkle) is I created one page (contact.html) which had multiple text input fields based on what type of content I wanted, then the submit button would link to another page called “messagesent.php”, which had the following code in an HTML widget:

<div style="width: 100%; min-height: 100%; font-size: 12px; line-height: 1; color: transparent">
<?php

$mailto = "email@email.com";
$subject = "Contact from website";
$message = "Values submitted:";
$header = "From: email@email.com";
foreach ($_POST as $key => $value) {
    if (!is_array($value)) {
       $message .= "\n".$key." : ".$value;
    } else {
       foreach ($_POST[$key] as $itemvalue) {
          $message .= "\n".$key." : ".$itemvalue;
       }
    }
}

mail($mailto, $subject, stripslashes($message), $header);

?>
</div>

I tried to recreate this in Hype, but I had problems, as there doesn’t seem to be a simple text input feature within Hype. Also, it doesn’t allow me to have the “.php” extension. Is it possible to create a contact form that works within Hype and post it? Obviously the hosting service ultimately has to support PHP for it to work (which mine does).

I really need an option from within Hype.

-Jon


#2

A not so elegant, but effective, way to embed a contact form in a Hype project is to use an iFrame. In Hype, this can also be done with an HTML Widget. That way, you can load a php based webpage in the project.


(Mark Hunte) #3

There are plenty of examples on site that show or talk about adding forms.

http://forums.tumult.com/search?q=<input%20type


(Jonathan Langberg) #4

As I mentioned above, I had previously searched many forums and did not find any solutions besides embedding forms. However, I found one that I missed using the link you sent which included symbol input fields. I customized it to have the input fields I would like (see file below), but can anyone convert that into a PHP contact form?

Contact Form 2.hype.zip (18.6 KB)


(Mark Hunte) #5

You just need to give each input an id.

i.e id=“name”

<input type="Name" id="name" placeholder="Name" style="padding-left: 6px; line-height: 24px; font-size: 12px; width: 100%; border: none; font-family: montserrat; color:black;">

Then add an on click action to the Submit button which runs a Hype Function.

In the Hype function you gather the input values, construct your data as you need it and then post to the .php file where ever that is.

Example I just tested this with this Hype function.

var name = hypeDocument.getElementById('name').value;
var email = hypeDocument.getElementById('email').value;
var phone = hypeDocument.getElementById('phone').value;
var message = hypeDocument.getElementById('message').value;
	 
	
	

var obj = new Object();
obj.name = name;
obj.email = email;
obj.phone = phone;
obj.message = message;
var currJsonString = JSON.stringify(obj);

	
writeFile('newPost.txt', currJsonString);
	
function writeFile(currFileName, currJsonString){
$.post("./email.php", { fileName: currFileName, jsonString: currJsonString} )

 .done(function() {
//do anything on success ...
console.log("success");
 hypeDocument.getElementById('resultBox').innerHTML = currJsonString;
     
})

.fail(function() {
//do anything on failure ...
 hypeDocument.getElementById('resultBox').innerHTML = "failure";
     
console.log("failure");
});

}

The info is written to a file on the server by the php file.

<?php

    
    sleep(1);
    
    if (empty($_POST['fileName'])) {
        
    }
    else {
        $fname = $_POST['fileName'];
        $data = $_POST['jsonString'];
        
        $file = fopen('myFiles/'.$fname, 'w');
        fwrite($file, $data);
        fclose($file);
        
    }
 
?>

(Hans-Gerd Claßen) #6

this one is very nice to control the inputs without js just setting attributes. well documented too :slight_smile:


(Jonathan Langberg) #7

I did all of the steps within that hype file I originally sent Contact Form 2.hype.zip (18.5 KB), but I’m not quite sure what to do after that. I am novice for this type of thing… Do I need to create a second “php” document outside of Hype? Does the function that runs within the Hype file automatically link to that php based on what is already in the Hype file?


(Mark Hunte) #8

The thing that I am exampling is how to get your data from the form elements and then pass them in a call to your php file.

The php file I used was outside of the hype resources.
My php file’s code shown in the example then wrote a file out using the data posted to it. But that is not important in the example. The important part is communicating the data to the php file.

By the way you my example requires JQuery . I thought I had included the example project but realise I had not.
Here it is:

Contact.hype.zip (95.4 KB)


(Jonathan Langberg) #9

Do you mind posting a php file that would work with the hype file? Within that PHP, where would you direct it to a specific email?


(Mark Hunte) #10

Ok.

I have changed the example to do an email using php.

Here is the new Hype project. Export it and place on Server.

messagesent.hypetemplate.zip (91.8 KB)

The code in the Project:

	 hypeDocument.getElementById('resultBox').innerHTML = "";	
var name = hypeDocument.getElementById('name').value;
var email = hypeDocument.getElementById('email').value;
var phone = hypeDocument.getElementById('phone').value;
var message = hypeDocument.getElementById('message').value;
	 

var obj = new Object();
var PostName = name;
var PostemailAddr =email;
var Postphone = phone;
var Postmessage = message;
 
	
phpEmailer(PostName, PostemailAddr,Postphone,Postmessage);
	
function phpEmailer(PostName, PostemailAddr,Postphone,Postmessage){

$.post("./email2.php", { name: PostName, email: PostemailAddr,phone: Postphone,message: Postmessage} )

 .done(function() {
 
 hypeDocument.getElementById('resultBox').innerHTML = "success" ;
     
})

.fail(function() {
//do anything on failure ...
 hypeDocument.getElementById('resultBox').innerHTML = "failure";
 
});

}

Along side the html file on the server, place this php file. You will need to change the to email address to the one you want to receive the data to.

( original php code: http://stackoverflow.com/questions/20927980/using-html-and-php-to-send-form-data-to-an-email )

The php script also sends an email confirmation to the user.

email2.php.zip (887 Bytes)

The code in the file:

<?php
    $email = $_POST["email"];
    
    $to = "me@me.com";
    $subject = "New Email Address for Mailing List";
    $headers = "From: $email\n";
    $name = $_POST["name"];
    $phone = $_POST["phone"];
    $message = $_POST["message"];
    $body = "A visitor to your site has sent the following email address to be added to your mailing list.\n
    
    Email Address: $email\n
Name: $name\n
Phone:$phone\n
Message: $message
    ";
      mail($to,$subject,$body,$headers);
    #send confirmation email to users email address
    $user = "$email";
    $usersubject = "Thank You";
    $userheaders = "From: you@youremailaddress.com\n";
    $usermessage = "Thank you for subscribing to our mailing list.";
  
    mail($user,$usersubject,$usermessage,$userheaders);
    ?>

Note This is all new to me also, so any validation on the posting to PHP you should look up and do yourself as it is not really in the scope of this site on how to write and validate php. Also I do not now enough about php, server safety to approach it nor can I confirm if any of the PHP and approach above is safe to use in the real world. I assume it is but you would need to check this your self… :neutral_face:


Howto: Simple Quiz Example
Input fields and contact forms
How To Integrate PHP into Tumult Hype
(Mark Hunte) #11

Version 2 with a spinner.

messagesentV2.hypetemplate.zip (96.2 KB)


I Also found this page on security for PHP which can get you started. :
http://www.w3schools.com/php/php_form_validation.asp

I incorporated it into my email.php file and as far as I can tell it works as advertised .

Putting <script>location.href('http://www.hacked.com')</script> in the message textarea returned in the email :
Message: <script>location.href(‘http://www.hacked.com’)</script>

and <script>alert('hacked')</script>

Returned

Message: &lt;script&gt;alert('hacked')&lt;/script&gt;

Which would have been a problem if returning the data to the webpage.


(Vikrant Arya) #12

@MarkHunte Code is working fine , I am getting mail but it always show result false.Please Help me to figure out , How to solve this problem , Thank You


(Mark Hunte) #13

Can you post examples of what you are using…! i.e the Hype project and the php.


(Vikrant Arya) #14

Thank You MarkHunte,
Its working now,There was some problem in my php file,


(lalopallosa) #15

i didi it and i recibe a mail but the info (name, email etc.) not apear…any help…tnx by the way


(lalopallosa) #16

i did everything but the mail i get is from myhost server (something like bluehost301 or something and also the info (mail, name, etc.) not appear…any help?? tnx 4 the amazing work


(Mark Hunte) #17

I would need to see what you are doing. I.e php file and project


(Gustavo) #18

I did exactly as described and not worked. Not enough to email me … someone help me ?!email.hype.zip (91.8 KB)


(Jonathan Deutsch) #19

You didn’t include the .php file so we can’t reproduce it; the most likely issue is that the path to the PHP file (email2.php) is incorrect. Make sure to place it next to the .html file for the hype document.


(Gustavo) #20

I did so. Maybe you can be my server, I’ll check …