Contact Form

[proj]

A while ago I purchased a website template which included a contact form, and a PHP script to process the form. I cannot find the contact form so I'm trying to figure out how to code it on my own, or find a similar one to put in it's place.

 

The PHP file is located here: http://warp.nazwa.pl/dc/innovation/php/contact/sendMessage.php

 

The form itself is on this page: http://warp.nazwa.pl/dc/innovation/contact.html

 

Here is the code from the JScript file.

 

// alias to jQuery library, function noConflict release control of the $ variable 
// to whichever library first implemented it
var $j = jQuery.noConflict();
// if true the send button is blocked
var g_blockSendButton = false;

/***************************************
    SETUP CONTACT FORM
****************************************/

function setupInputControls()
{
    // change border color wehen controls take focus
    $j(".commonInput, .commonTextarea, .contactInputHuman").focus(
        function()
        {
            $j(this).css("border", "1px solid #3399cc");
        }
    );
    
    // restore border color wehen controls lost focus
    $j(".commonInput, .commonTextarea, .contactInputHuman").blur(
        function()
        {
            $j(this).css("border", "1px solid #ccc");
            $j(this).css("border-right", "1px solid #eee");
            $j(this).css("border-bottom", "1px solid #eee");
        }
    );
    
    // when input name lost focus, validate the value
    $j("#inputName").blur(
        function()
        {
            if($j(this).val() != "")
            {
                $j("#contactNameErrorMsg").css("visibility", "hidden"); 
            } else
            {
                $j(this).css("border", "1px solid #FF0000");
                $j("#contactNameErrorMsg").html(" Please enter your name").css("visibility", "visible");            
            }
        }
    );
    
    // when input email lost focus validate the value 
    $j("#inputEmail").blur(
        function()
        {
            
            if($j(this).val() != "")
            {
                // create regular expression object
                var regExp = new RegExp(/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9]([-a-z0-9_]?[a-z0-9])*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z]{2})|([1]?\d{1,2}|2[0-4]{1}\d{1}|25[0-5]{1})(\.([1]?\d{1,2}|2[0-4]{1}\d{1}|25[0-5]{1})){3})(:[0-9]{1,5})?$/i);
                // check email address, if result is null the email string dont match to pattern
                var resultExp = regExp.exec($j(this).val());
                if(resultExp == null) 
                {
                    $j(this).css("border", "1px solid #FF0000");
                    $j("#contactEmailErrorMsg").html(" Sorry, but this email address is incorrect").css("visibility", "visible");
                } else
                {
                    $j("#contactEmailErrorMsg").css("visibility", "hidden");
                }
                
            } else
            {
                $j(this).css("border", "1px solid #FF0000");
                $j("#contactEmailErrorMsg").html(" Please enter your email address").css("visibility", "visible"); 
            }
        }
    );
    
    // when input subject lost focus validate the value 
    $j("#inputSubject").blur(
        function()
        {
            if($j(this).val() != "")
            {
                $j("#contactSubjectErrorMsg").css("visibility", "hidden"); 
            } else
            {
                $j(this).css("border", "1px solid #FF0000");
                $j("#contactSubjectErrorMsg").html(" You forgot to specify a subject").css("visibility", "visible");            
            }
        }
    );    

    // when input message lost focus validate the value 
    $j("#inputMessage").blur(
        function()
        {
            if($j(this).val() != "")
            {
                $j("#contactMessageErrorMsg").css("visibility", "hidden"); 
            } else
            {
                $j(this).css("border", "1px solid #FF0000");
                $j("#contactMessageErrorMsg").html(" Please enter your message").css("visibility", "visible");            
            }
        }
    );
    
    // when input human lost focus validate the value 
    $j("#inputHuman").blur(
        function()
        {
            if(parseInt($j(this).val(), 10) == 4)
            {
                $j("#contactHumanErrorMsg").css("visibility", "hidden"); 
            } else
            {
                $j(this).css("border", "1px solid #FF0000");
                $j("#contactHumanErrorMsg").html(" You really don't know?").css("visibility", "visible");            
            }
        }
    );         
    
} // end of function setupInputControl
    
function setupSendButton()
{
    $j("#contactSendButton").click(
        function()
        {
            // prevent multiple send call by user
            if(true == g_blockSendButton)
            {
                return;
            }
            
            g_blockSendButton = true;
            // get all data from contact form and save it in local variables
            var inputName = $j("#inputName").val();
            var inputEmail = $j("#inputEmail").val();
            var inputSubject = $j("#inputSubject").val();
            var inputMessage = $j("#inputMessage").val();
            var inputHuman = $j("#inputHuman").val();
           
            // create regular expression object
            var regExp = new RegExp(/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9]([-a-z0-9_]?[a-z0-9])*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z]{2})|([1]?\d{1,2}|2[0-4]{1}\d{1}|25[0-5]{1})(\.([1]?\d{1,2}|2[0-4]{1}\d{1}|25[0-5]{1})){3})(:[0-9]{1,5})?$/i);
            // check email address, if result is null the email string dont match to pattern
            var resultExp = regExp.exec(inputEmail);
            // check user answer, resultHuman = true if ok, false if answer is bad
            var resultHuman = parseInt(inputHuman, 10) == 4;
            // check the error by logical sum
            var error = (resultHuman != true) || (resultExp == null) || (inputName == "") || (inputEmail == "") ||
                (inputSubject == "") || (inputMessage == "");

            // if there was an error we must display some informotion and mark
            // input cotrol with wrong data    
            if(error)
            {                
                $j("#contactNameErrorMsg").css("visibility", "hidden");
                $j("#contactEmailErrorMsg").css("visibility", "hidden");
                $j("#contactSubjectErrorMsg").css("visibility", "hidden");
                $j("#contactMessageErrorMsg").css("visibility", "hidden");
                $j("#contactHumanErrorMsg").css("visibility", "hidden");
                $j("#contactErrorPanel").slideUp(300);
                
                // errors processing
                if(inputName == "")
                {
                    $j("#inputName").css("border", "1px solid #FF0000");
                    $j("#contactNameErrorMsg").html(" Please enter your name").css("visibility", "visible");
                }
                if(inputEmail == "")
                {
                    $j("#inputEmail").css("border", "1px solid #FF0000");
                    $j("#contactEmailErrorMsg").html(" Please enter your email adress").css("visibility", "visible"); 
                } else                
                if(resultExp == null) 
                {
                    $j("#inputEmail").css("border", "1px solid #FF0000");
                    $j("#contactEmailErrorMsg").html(" Sorry, but this email address is incorrect").css("visibility", "visible");
                }
                if(inputSubject == "")
                {
                    $j("#inputSubject").css("border", "1px solid #FF0000");
                    $j("#contactSubjectErrorMsg").html(" You forgot to specify a subject").css("visibility", "visible"); 
                }
                if(inputMessage == "")
                {
                    $j("#inputMessage").css("border", "1px solid #FF0000");
                    $j("#contactMessageErrorMsg").html(" Please enter your message").css("visibility", "visible");
                }
                if(resultHuman != true)
                {
                    $j("#inputHuman").css("border", "1px solid #FF0000");
                    $j("#contactHumanErrorMsg").html(" You really don't know?").css("visibility", "visible"); 
                }
                // unblock send button
                g_blockSendButton = false;                
            } else // if no error, if all data is set correctly
            {
                // let's define function called after ajax successfull call 
                function phpCallback(data)
                {   
                    // if success        
                    if(data == "ok")
                    {   
                        $j("#contactErrorPanel").text("");            
                        $j("#contactErrorPanel").css("background-color", "#ccFFcc");
                        $j("#contactErrorPanel").append("Your email was sent.");
                        $j("#contactErrorPanel").css("border", "1px solid #339933");
                        $j("#contactErrorPanel").slideDown(300, function(){  g_blockSendButton = false;});
                        
                        $j("#inputName").val("");
                        $j("#inputEmail").val("");
                        $j("#inputSubject").val("");
                        $j("#inputMessage").val("");
                        $j("#inputHuman").val(""); 
                    } else // if error/problem during email sending in php script
                    {
                        $j("#contactErrorPanel").text("");
                        $j("#contactErrorPanel").css("background-color", "#FFcccc");
                        $j("#contactErrorPanel").css("border", "1px solid #993333");
                        $j("#contactErrorPanel").append("There was an error sending your email.");
                        $j("#contactErrorPanel").slideDown(300, function(){  g_blockSendButton = false;});               
                    }
                } // end of function phpCallback            
            
            
                // all data is correct so we can hide error/success panel
                $j("#contactErrorPanel").slideUp(300);
                
                // build data string for post call
                var data = "inputName="+inputName;
                data += "&"+"inputEmail="+inputEmail;
                data += "&"+"inputSubject="+inputSubject;
                data += "&"+"inputMessage="+inputMessage; 
                
                // try to send email via php script executed by server
                $j.post("php/contact/sendMessage.php", data, phpCallback, "text");
                // unblock send button
            } // end else all dara
        }
    );
} // end of function setupSendButton
    
/***************************************
    MAIN CODE - CALL THEN PAGE LOADED
****************************************/
       
// binding action to event onload page
$j(document).ready(
    function()
    {
        // common.js
        setupGlobal();
        setupCommunityButtons();            
        setupToolTipText();
        setupSearchBox();
        setupCufonFontReplacement();
        setupSideBarMiniSlider();
        setupMultiImageLightBox();
        setupSidebarTabsPanel();
        setupLoadingAsynchronousImages();
        setupToolTipImagePreview();
        setupTextLabelImagePreview();
        // this file
        setupInputControls();
        setupSendButton();
    }
);

 

Can anyone help me figure out how to do this by any chance?

[fortnox007]

Well we cant ofc see your php file since its processed.

But I can see, well actually i can't see a html form. Your site seems to use no html form action , but instead uses javascript for everything and sends it to php. (tricky if a customer has javascript disabled if you ask me)

This part is the final piece in your javascript  that reacts on the submit button pressed

// try to send email via php script executed by server
                $j.post("php/contact/sendMessage.php", data, phpCallback, "text");

 

where "g_blockSendButton" is the value of the button

 

But i must say i dont understand your question fully. All I can say is there is no html form action, but all is in hands of javascript and php. As far as I know. And I am also afraid that you need to customize the javascript everytime, but thats just a guess.

 

Anyways nice template looks good. Oh sorry if you got an email 2 min ago with a very awkward emailadres. wanted to test what it was all about.

Hope this cleared things up a bit

[fortnox007]

I think i was not yet super clear, but you can ofc edit the html form, but you also need to edit the javascript and the php script. (which isn't very cool, but it looks nice) In case you want that, just print out the index.html, the javascript and the php-file on paper and get a nice colored marker. And look what the programmer did. that way you can easily learn and add more fields. First look at the html fields (in index.html) and color the values. Go to javascript and look if you can find those exact names. than go to php and look for the names used in javascript. ones you have done that you know what the variables are and how to add more in the same way. hope it helps a bit.

cheers!

 

 

p.s.

to give a headstart: in index.html the field that stores the value for name is:

<input type="text" id="inputName" class="commonInput" style="border: 1px solid rgb(255, 0, 0);">

so inputName is the variable you need to look for in javascript and php. because if you would just add

<input type="text" id="inputLastname" class="commonInput" style="border: 1px solid rgb(255, 0, 0);">

it would not be processed by javascript and php

[proj]

Well essentially I need help finding a similar contact form which I can customize and have a PHP script to successfully submit the information.

 

As of now I have the HTML, the JScript, but I'm missing the PHP script.

 

Here is the HTML on the contact page:

 

                    <!-- AJAX CONTACT FORM --> 
                    
                    <!-- MESSAGE OK/ERROR PANEL --> 
                    <div id="contactErrorPanel" class="displayNone"></div>                   
                    <!-- NAME --> 
                    <span class="commonControlLabel">Your name:</span> 
                    <span class="commonControlLabelItalic">(required)</span> 
                    <span id="contactNameErrorMsg" class="commonControlErrorMsg"></span><br /> 
                    <input class="commonInput" type="text" id="inputName" /><br /> 
                    <!-- EMAIL -->    
                    <span class="commonControlLabel">Your email:</span> 
                    <span class="commonControlLabelItalic">(required)</span> 
                    <span id="contactEmailErrorMsg" class="commonControlErrorMsg"></span><br /> 
                    <input class="commonInput" type="text" id="inputEmail" /><br /> 
                    <!-- EMAIL SUBJECT -->            
                    <span class="commonControlLabel">Subject:</span> 
                    <span class="commonControlLabelItalic">(required)</span> 
                    <span id="contactSubjectErrorMsg" class="commonControlErrorMsg"></span><br /> 
                    <input class="commonInput" type="text" id="inputSubject" /><br /> 
                    <!-- MESSAGE -->    
                    <span class="commonControlLabel">Message:</span> 
                    <span class="commonControlLabelItalic">(required)</span> 
                    <span id="contactMessageErrorMsg" class="commonControlErrorMsg"></span> 
                    <div class="clearBoth"></div> 
                    <textarea class="commonTextarea" rows="20" cols="20" id="inputMessage"></textarea><br /> 
                    <!-- PROTECTION -->    
                    <span class="commonControlLabel">Are you human? So, how much is 3 + 1?</span> 
                    <span class="commonControlLabelItalic">(required)</span> 
                    <span id="contactHumanErrorMsg" class="commonControlErrorMsg"></span><br /> 
                    <input class="contactInputHuman" type="text" id="inputHuman" /><br /><br /> 
                  <!-- SEND BUTTON -->    
                  <a id="contactSendButton" class="readViewMoreBtn">Send</a>
                  <!-- contactContainer --> 

[fortnox007]

I dont understand, your php script is on your server. you even linked to it.  (or isn't it yours?  )

And yes I saw the html I linked a part from it earlier.

I suppose you do have FTP-access to the folders your files are stored in right? because if you don't there isn't much to customize.

 

Well if you want an email form that is free and less hassle, try out: http://www.tectite.com/

 

[proj]

No that is not mine otherwise why would I be posting here!

 

But it is a website with a similar form.  :'(