 |
Welcome To Swish-Designs.co.uk Have a Nice Tuesday
Simple Contact Form with Validation
Learn how to create a simple contact form and how to validate the information provided.
First Of All
The example above is a fully funtional version of the simple contact form with validation but in this version the send function has been disabled so no messages will be sent, however if you do need to contact swish-designs feel free to use the contact link from the menu.
Open swishmax and set your canvas size to 280 x 250 pixels
frame rate to 25 fps.
Step.1
Using the text tool select static text and enter Name, Email and Message pressing the Enter key twice after each word. you should have something like fig.1 below.
Fig.1
Step.2
now select the text tool again this time you need an Input box, place one at the side of where it says Name and one at the side of where it says Email. the one for the message is slightly different using the text tool selct input box and from the drop down select on the text properties select dimensions and add 7 to where it says lines, see fig.2a below.
Fig.2a
now name the boxes the one at the side of Name rename it Name the one at the side of Email rename to Email and the last box rename to Message and place underneath the Message text. see fig.2b below.
Step.3
to make the text boxes look indented use the bezier tool to draw along th bottom and up the right hand side and select line colour #CCCCCC see fig.3 demonstration below.
Fig.3
Step.4
Select the text tool again, this time you need a dynamic text box, name the box info and place just underneath the Message box, now add 2 buttons one called Clear and the other called Send place the buttons to the right of the info box just underneath the message box see fig.4 below
Fig.4
Step.5
now you have everything set up all you need to do is add the following code to Scene_1 all the code is fully comented as to make it easy to understand what piece of code does what action.
onLoad () {// carries the function out once
Name="";//clears the Name box
Email="";//clears the Email box
Message="";//clears the Message box
info="";//clears the info box
}
and add the following code to the reset button
on (press) {// carries the function out when button is clicked
Name="";//clears the Name box
Email="";//clears the Email box
Message="";//clears the Message box
info="";//clears the info box
}
Step.6
Now add the following code to the Submit button, again all the code is fully comented for ease of use and understanding.
on (press) {
//checks if the fields are empty if so shows the error message
if (Name=="" or Email=="" or Message=="") {
info="Error Sending Message"
//checks if the name is more than 2 letters most names are more than 2 letters long
//if not shows the error message;
}
else if (Name.length < 2) {
info="Error Sending Message";
}
//checks if the Email is more than 3 letters most email addresses are more than 3 letters long
//if not shows the error message;
else if (Email.length < 3) {
info="Error Sending Message";
}
//checks that an @ has been entered into the Email Field
//if not shows the error message
else if (Email.indexOf("@") == -1) {
}
//checks that an . has been entered into the Email Field
//if not shows the error message
else if (Email.indexOf(".") == -1) {
}
//checks that the message is at least 10 letters long
//if not shows the error message
else if (Message.length < 10) {
info="Error Sending Message";
}
//if everything has passed the checks it loads the variables
//and sends the message
else{
info="Message Was Sent";
loadVariables("send.php",'POST');
}
}
Step.7
Thats it all for the swishmax side of things save and export your project file, Remember all files must be in the same folder, now for the php file to make the form function again, this will only work 100% if your hosting supports php mail forwarding, if you are unsure contact you hosting company.
add the following code to your favourite text editor and save as send.php
upload everything to your hosting and test it out, dont forget to edit email from, email to and the subject
i hope this tutorial has helped you in some way
Thank you for reading.
