Input fields and contact forms

Tips & Tricks
3

The way I would do this is put each input into it’s own rect.
This way you can shape and design it how ever you want.

Have some simple javascript read the values when your now animated Hype button is clicked.
Then in the same javascript function POST the message.

Here is a slightly updated example from one already on a thread on the forums…
This is the function called by the Hype button.

	hypeDocument.startTimelineNamed('show', hypeDocument.kDirectionForward);

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

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


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

 .done(function() {
 hypeDocument.startTimelineNamed('hide', hypeDocument.kDirectionForward);
 hypeDocument.triggerCustomBehaviorNamed('spinnerStop');
 hypeDocument.getElementById('resultBox').innerHTML = "success" ;
     
})

.fail(function() {
//do anything on failure ...
 hypeDocument.startTimelineNamed('hide', hypeDocument.kDirectionForward);
 hypeDocument.triggerCustomBehaviorNamed('spinnerStop');
 hypeDocument.getElementById('resultBox').innerHTML = "failure";
 
});

}

It uses this PHP code in a php file on the server side.

<?php
    // define variables and set to empty values
    $name = $email = $phone = $message = "";
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        
        $email = test_input($_POST["email"]);
        $name = test_input($_POST["name"]);
        $phone = test_input($_POST["phone"]);
        $region = test_input($_POST["region"]);
        $message = test_input($_POST["message"]);
        
    }
    
    $subject = "New Email Address for Mailing List";
    $headers = "From: $email\n";
    $to = "submit@mac.com";
    $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
Region:$region\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);
    echo "$user";
    
    
    
    
    function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    
    ?>

I added your regions input and kept the id of it the same id ‘fieldilkduly’
so you can see how the connections work in the function. i.e looks for the inputs with a given id.

message.hype.zip (99.9 KB)

6 Likes