JavaScript contact form problem

JavaScript
1

I’m trying to use html/css template. It has JS contact form in it, and I don know how to make it work.

Here is code in html file:

<div class="layout-50 clear-fix overflow-fix"> 
    
      <div class="layout-50-left"> 
       
         <h3>On The Map</h3> 
         <div id="map"></div> 
          
         <br/> 
          
         <h3>Anna Brown Studio</h3> 
         <p> 
            1370 Northwood, 15<br/> 
            Houston, TX72150, United States Of America 
         </p> 
          
         <ul class="no-list contact-list"> 
            <li class="contact-list-phone"><span>Phone:</span> 1.800.353.252</li> 
            <li class="contact-list-fax"><span>Fax:</span> 1.800.353.253</li> 
            <li class="contact-list-mail"><span>Mail:</span> anna.brown@mail.com</li> 
         </ul> 
       
      </div> 

      <div class="layout-50-right"> 
       
         <h3>Get In Touch</h3> 
       
         <form name="contact" id="contact" action="" method="post"> 
             
            <div> 
             
               <div class="form-line block"> 
                  <input type="text" name="contact-user-name" id="contact-user-name" value="Your Name" onfocus="clearInput(this,'focus','Your Name')" onblur="clearInput(this,'blur','Your Name')"/>    
               </div> 
               <div class="form-line block"> 
                  <input type="text" name="contact-user-email" id="contact-user-email" value="Your E-mail Address" onfocus="clearInput(this,'focus','Your E-mail Address')" onblur="clearInput(this,'blur','Your E-mail Address')"/>    
               </div>                
               <div class="form-line block"> 
                  <textarea rows="0" cols="0" name="contact-message" id="contact-message" onfocus="clearInput(this,'focus','Message')" onblur="clearInput(this,'blur','Message')">Message</textarea>    
               </div> 
                
               <div class="form-line"> 
                  <a href="javascript:submitContactForm();" class="button block" id="contact-send">Send</a> 
               </div> 
             
            </div>    

         </form> 
       
      </div> 
    
   </div>

and here is the code of JS file named contact-form, this file is located in the folder: publichtml/plugin/contact-form :

/*****************************************************************/ 
   /*****************************************************************/ 

   function submitContactForm() 
   { 
      blockForm('contact','block'); 
      $.post('plugin/contact-form/contact-form.php',$('#contact').serialize(),submitContactFormResponse,'json'); 
   } 
    
   /*****************************************************************/ 
    
   function submitContactFormResponse(response) 
   { 
      blockForm('contact','unblock'); 
      $('#contact-user-name,#contact-user-email,#contact-message,#contact-send').qtip('destroy'); 

      var tPosition= 
      { 
         'contact-send':{'my':'right center','at':'left center'}, 
         'contact-message':{'my':'right center','at':'left center'}, 
         'contact-user-name':{'my':'right center','at':'left center'}, 
         'contact-user-email':{'my':'right center','at':'left center'} 
      }; 

      if(typeof(response.info)!='undefined') 
        {    
         if(response.info.length) 
         {    
            for(var key in response.info) 
            { 
               var id=response.info[key].fieldId; 
               $('#'+response.info[key].fieldId).qtip( 
               { 
                  style:       { classes:(response.error==1 ? 'ui-tooltip-error' : 'ui-tooltip-success')}, 
                  content:    { text:response.info[key].message }, 
                  position:    { my:tPosition[id]['my'],at:tPosition[id]['at'] } 
               }).qtip('show');             
            } 
         } 
      } 
   } 
    
   /*****************************************************************/ 
   /*****************************************************************/

Also I have script file named scrip.js in: publichtml/script . Here is the code:

/*****************************************************************/ 

   function getRandom(min,max) 
   { 
       return((Math.floor(Math.random()*(max-min)))+min); 
   } 
    
   /*****************************************************************/ 
    
   function clearInput(object,action,defaulValue) 
   { 
      var object=$(object); 
      var value=jQuery.trim(object.val()); 
       
      if(action=='focus') 
      { 
         if(value==defaulValue) object.val(''); 
      } 
      else if(action=='blur') 
      { 
         if(value=='') object.val(defaulValue); 
      } 
   } 
    
   /*****************************************************************/ 
    
   function blockForm(formId,action) 
   { 
      if(action=='block') 
         $('#'+formId).find('.block').block({message:false,overlayCSS:{opacity:'0.3'}}); 
      else $('#'+formId).find('.block').unblock(); 
   } 
    
   /*****************************************************************/

i know I have to edit it and somewhere make it sends emails to my email etc, but really dont know how.
Can you please help me to make this contact form work. I’m complete noob so any help I would be grateful.
Sorry for my english

2

Hi,
From what I know, to send emails from a contact form, you need more than javascript. It is necesarry a server side script that receives form data and sends the email.
I use this contact form script: http://www.coursesweb.net/php-mysql/contact-form-php-ajax-script_s2 , is simple and works fine.

3

Thanks MarPlo for your reply. I actually used this one: http://www.freecontactform.com/free.php
It was simple to use and edit, even for a slow guy like me :slight_smile:
@Moderators - This thread can be marked as solved. Thanks