SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript contact form problem

    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:
    Code:
    <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 :

    Code:
    /*****************************************************************/ 
       /*****************************************************************/ 
    
       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:

    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. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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/...ajax-script_s2 , is simple and works fine.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    @Moderators - This thread can be marked as solved. Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •