Input fields and contact forms


#1

I’m having some difficulty figuring out how to make a contact form in Hype, I currently have a contact form, and I’m trying to import it into hype and customise it further. I’m also happy to start from scratch, but I’m confused about how to do it.

I played around with the code until I got it to work by putting it into a rectangle in hype:

    <div class="modal-content">
      <div class="modal-body" style="    padding: 15px;
background: linear-gradient(to left bottom,#003b68,#0075ad);">
        <div class="line"></div>
          <form class="contact row" action="../mail/index.php" method="post" id="subForm">
            <div style="margin-top:25px;">
          <div class="form-group col-xs-12 col-sm-8">
            <label for="exampleInputEmail1 fieldName">Full Name</label>
            <input id="fieldName" class="form-control" name="name" type="text" placeholder="Your Name" value="">
          </div>
          <div class="form-group col-xs-12 col-sm-4">
          <label for="exampleInputEmail1 fieldilkduly">Region</label>
          <select id="fieldilkduly" name="region" type="region" class="form-control">
          <option>Cardiff</option>
          <option>Newport</option>
          <option>Swansea</option>
          </select>
          </div>
        </div>


          <div class="form-group col-xs-12 col-sm-6">
            <label for="exampleInputEmail1 fieldEmail">Email address</label>
            <input id="fieldEmail" name="email" type="email" class="form-control" placeholder="you@email.com" value="" required="">
          </div>
          <div class="form-group col-xs-12 col-sm-6">
            <label for="exampleInputEmail1 fieldilkdulj">Phone Number</label>
            <input id="fieldilkdulj" name="phone" type="number" class="form-control" value="" required="">
          </div>

          

         
                       <div class="form-group col-xs-12 col-sm-12">
            <label for="exampleInputEmail1 fieldilkdkuj">Business Information</label>
            <textarea id="fieldilkdult" name="business" type="text" class="form-control" cols="10" rows="10" placeholder="" value=""></textarea>
          </div>



          <div class="form-group">
					<div class="submitbutton col-xs-12 col-sm-12">
						<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
					</div>
				</div>
        </form>
      </div>
    </div>

But here’s my problem, I want to add another field that’s a clickable square button with animations, and I want the info to be passed like the current form does.

I’m inexperienced with forms, so correct me if I’m wrong. Forms need to be inside a , like mine:

<form class="contact row"  action="../mail/index.php" method="post" id="subForm">    </form>

And all of the input fields use ‘name’ to send the input to …/mail/index.php, but they need to be inside the .
What I want to do is have each input field in its own rectangle in hype, so is there a way to have an outer rectangle with the and then rectangles inside with the input fields?


(Jonathan Deutsch) #2

There’s not really any way I can think of to structurally set this up in Hype. You’d need to run JavaScript on the submit click to associate values from inputs to hidden form values.

More promising is the HTML5 has a form attribute for input tags. If you add an id to the form, you can then reference this. Sadly no version of IE/edge supports this. But if you don’t care about those browsers, please see:

https://www.impressivewebs.com/html5-form-attribute/


(Mark Hunte) #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)


(Jonathan Deutsch) #4

@MarkHunte to the JavaScript rescue!