Wordpress Javascript, PHP mail form help needed

  • kitcorsa
  • Graduate
  • Graduate
  • kitcorsa
  • Posts: 132

Post 3+ Months Ago

Hi im wondering if anyone can help me out....??

Im looking to make a site for my brother who is specialist flooring expert who can supply fit and repairs wooden floors. What i'm after doing is creating a restoration site for him which explains how he resorts and repairs old wood floors and preserves them. this part is straight forward enough and i'm 99% done. the wall i'm hitting and getting stuck on is an online quote / booking form to allow people to get an online quote and place a booking.

This booking is fairly straight forward as my brother charges a set price per square meter, so what i'm trying to do is create a form where the customer can enter the width and length of there room, and get a quote. This would then send the form, along with their name address, contact info and the booking/room info and sizes to my brother. This i can do with contact form7 and a little php to work out he price.... The problem im having is that, what if they have more than one room....??

This then takes me away from contact7 plugin and having to make my own contact form... So... I have decided to hand make the form in a page template and i can then assign this page template to the page I create in wordpress.

So the problem of what if the customer has more than one room?? is there a way of adding a room 2 room 3 etc etc etc has to be addressed.

Ive got the following so far...

HTML Code: [ Select ]
            <!--Start of Quote-->
 
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
<div id="rooms"></div>
<button id="add">Add room</button><br>
<input type="text" id="cost" disabled><br />
<textarea id="email" disabled></textarea>
   <script>
var price = 2; // Price per sq metre
 
$("#add").bind('click', function () {
    $('#rooms').append('<div class="room"><input class="name" type="text" placeholder="Room Name"><input class="x" type="text" placeholder="Room Width (m)"><input class="y" type="text" placeholder="Room Lenght (m)"></div>');
   
    $('#rooms .x, .y').on('change', function () {
        var cost = 0;
        var email = '';
        $('.room').each(function () {
            var x = $(this).children('.x').val();
            var y = $(this).children('.y').val();
            var name = $(this).children('.name').val();
            if (!x) {x = 1;}
            if (!y) {y = 1;}
            cost = cost + (x*y);
            email = email + '\n Room name:'+name+' - Room Dimensions: '+x+'x'+y+' - Estimate: £'+((x*y)*price);
        });
 
        $("#cost").val('Estimated Price:'+(cost*price)).show();
        $("#email").val(email).show();
    });
});
</script>
    <h4>Place Order</h4>
<form>
   button here and other information etc!
   
</form>
            <!--End of Quote-->
 
  1.             <!--Start of Quote-->
  2.  
  3.    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  4.  
  5. <div id="rooms"></div>
  6. <button id="add">Add room</button><br>
  7. <input type="text" id="cost" disabled><br />
  8. <textarea id="email" disabled></textarea>
  9.    <script>
  10. var price = 2; // Price per sq metre
  11.  
  12. $("#add").bind('click', function () {
  13.     $('#rooms').append('<div class="room"><input class="name" type="text" placeholder="Room Name"><input class="x" type="text" placeholder="Room Width (m)"><input class="y" type="text" placeholder="Room Lenght (m)"></div>');
  14.    
  15.     $('#rooms .x, .y').on('change', function () {
  16.         var cost = 0;
  17.         var email = '';
  18.         $('.room').each(function () {
  19.             var x = $(this).children('.x').val();
  20.             var y = $(this).children('.y').val();
  21.             var name = $(this).children('.name').val();
  22.             if (!x) {x = 1;}
  23.             if (!y) {y = 1;}
  24.             cost = cost + (x*y);
  25.             email = email + '\n Room name:'+name+' - Room Dimensions: '+x+'x'+y+' - Estimate: £'+((x*y)*price);
  26.         });
  27.  
  28.         $("#cost").val('Estimated Price:'+(cost*price)).show();
  29.         $("#email").val(email).show();
  30.     });
  31. });
  32. </script>
  33.     <h4>Place Order</h4>
  34. <form>
  35.    button here and other information etc!
  36.    
  37. </form>
  38.             <!--End of Quote-->
  39.  


problem i'm having is getting the the room names etc #email to be includied in form (not creted yet).... can anyone point me in the right direction with creating a form in wordpress to then email the quotation using the above??

Also....

does anyone know how i could take this one step further and offer a different price if the total square meterage was over set amount... ie price is 2 upto first 100sqm the 1.5 till 200sqm then 1.2 after etc

any help or advice is greatful
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

You could setup your form to have all of the fields needed for one room only then at the bottom of the form where your buttons are have a button that says something like save and add another room or something.

the functionality of this button would be simple it would send the room info only to a php file via ajax OR the whole form to be sent to the php.

both methods would work the same the whole php submission page would have an different step at the end

AJAX method
1) post to the php page.
2) due all of your calculations with the info on the room.
3) Save the room info and calculations into the $_SESSION
4) Clear the room info on success.

Page Post method
Follow step 1 through 3 above
4) Repopulate the form with everything in the form except the room info.

Final submit button would do exactly the same function as your currently doing but the it would go through the session info and add it to the quote
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

I'm not too sure what your mean by your issue your having but your code you have seems to work for me or are you talking about the form info in php? a little confused
  • kitcorsa
  • Graduate
  • Graduate
  • kitcorsa
  • Posts: 132

Post 3+ Months Ago

the problem im having is actually getting the information genorated here... to be plased into a wordpress email form and send the email to my brother and a copy to the email the customer supplies.

as you see i got the gathering information working nice but need to be able to actually email the information now.

I a totaly novice to javascript etc and this far i just struggled through by reading forum posts, blogs and support sites etc.
  • kitcorsa
  • Graduate
  • Graduate
  • kitcorsa
  • Posts: 132

Post 3+ Months Ago

so here is as far as ive taken it

HTML Code: [ Select ]
<?php /* Template Name: Quote
*/ ?>
 
<?php
 //response generation function
 
 $response = "";
 
 //function to generate response
 function my_contact_form_generate_response($type, $message){
 
   global $response;
 
   if($type == "success") $response = "<div class='success'>{$message}</div>";
    else $response = "<div class='error'>{$message}</div>";
 
  }
 
  //response messages
  $not_human       = "Human verification incorrect.";
  $missing_content = "Please supply all information.";
  $email_invalid   = "Email Address Invalid.";
  $message_unsent  = "Message was not sent. Try Again.";
  $message_sent    = "Thanks! Your message has been sent.";
 
  //user posted variables
  $name = $_POST['message_name'];
  $email = $_POST['message_email'];
  $address = $_POST['message_text'];
  $quote = $_POST['message_quote'];
  $human = $_POST['message_human'];
  $message = "    Supplied information
 
   Name: $name
   Address: $address
   Email address: $email
   Quote: $quote
   ";
 
  //php mailer variables
  $to = get_option('admin_email');
  $subject = "Quote from ".get_bloginfo('name');
  $headers = 'From: '. $email . "\r\n" .
    'Reply-To: ' . $email . "\r\n";
 
  if(!$human == 0){
    if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
    else {
 
      //validate email
      if(!filter_var($email, FILTER_VALIDATE_EMAIL))
        my_contact_form_generate_response("error", $email_invalid);
      else //email is valid
      {
        //validate presence of name and message
        if(empty($name) || empty($message)){
          my_contact_form_generate_response("error", $missing_content);
        }
        else //ready to go!
        {
          $sent = wp_mail($to, $subject, strip_tags($message), $headers);
          if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
          else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
        }
      }
    }
  }
  else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
 
?>
 
<?php get_header(); ?>
 
 <?php if ( has_post_thumbnail()) : ?>
   <div id="home-container">
     <?php the_post_thumbnail(); ?>
   </div>
 <?php endif; ?>
 
      <!--content-->
      <div id="content_container">
         
         <div id="content">
     
            <div id="left-col">
           
            <!--Start of Quote-->
 
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
<div id="rooms"></div>
<button id="add">Add room</button><br>
<input type="text" id="cost" disabled><br />
<textarea id="message_quote" disabled><?php echo esc_textarea($_POST['message_quote']); ?></textarea>
 
   <script>
var price = 2; // Price per sq metre
 
$("#add").bind('click', function () {
    $('#rooms').append('<div class="room"><input class="name" type="text" placeholder="Room Name"><input class="x" type="text" placeholder="Room Width (m)"><input class="y" type="text" placeholder="Room Lenght (m)"></div>');
   
    $('#rooms .x, .y').on('change', function () {
        var cost = 0;
        var quote = '';
        $('.room').each(function () {
            var x = $(this).children('.x').val();
            var y = $(this).children('.y').val();
            var name = $(this).children('.name').val();
            if (!x) {x = 1;}
            if (!y) {y = 1;}
            cost = cost + (x*y);
            quote = quote + '\n Room name:'+name+' - Room Dimensions: '+x+'x'+y+' - Estimate: £'+((x*y)*price);
        });
 
        $("#cost").val('Estimated Price:'+(cost*price)).show();
        $("#quote").val(quote).show();
    });
});
</script>
 
<style type="text/css">
                .error{
                  padding: 5px 9px;
                  border: 1px solid red;
                  color: red;
                  border-radius: 3px;
                }
 
                .success{
                  padding: 5px 9px;
                  border: 1px solid green;
                  color: green;
                  border-radius: 3px;
                }
 
                form span{
                  color: red;
                }
              </style>
 
              <div id="respond">
                <?php echo $response; ?>
                <form action="<?php the_permalink(); ?>" method="post">
                  <p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
                  <p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
                  <p><label for="message_text">Address: <span>*</span> <br><textarea type="text" name="message_text"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
                  <p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
                  <input type="hidden" name="submitted" value="1">
                  <p><input type="submit"></p>
                </form>
              </div>
   
 
            <!--End of Quote-->
   
            <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
           
               <div class="post-entry">
               
                                 <h1><?php the_title(); ?></h1>
 
                  <?php the_content(); ?>
                  <div class="clear"></div>
                 
               </div><!--post-entry end-->
               
               <?php// comments_template( '', true); ?>
 
<?php endwhile; ?>
</div> <!--left-col end-->
 
<?php get_sidebar(); ?>
 
   </div> <!--content end-->
 
<div id="readmore-container">
<?php get_footer(readmore); ?>
</div>
         
</div> <!--wrapper end-->
 
<?php get_footer(); ?>
 
  1. <?php /* Template Name: Quote
  2. */ ?>
  3.  
  4. <?php
  5.  //response generation function
  6.  
  7.  $response = "";
  8.  
  9.  //function to generate response
  10.  function my_contact_form_generate_response($type, $message){
  11.  
  12.    global $response;
  13.  
  14.    if($type == "success") $response = "<div class='success'>{$message}</div>";
  15.     else $response = "<div class='error'>{$message}</div>";
  16.  
  17.   }
  18.  
  19.   //response messages
  20.   $not_human       = "Human verification incorrect.";
  21.   $missing_content = "Please supply all information.";
  22.   $email_invalid   = "Email Address Invalid.";
  23.   $message_unsent  = "Message was not sent. Try Again.";
  24.   $message_sent    = "Thanks! Your message has been sent.";
  25.  
  26.   //user posted variables
  27.   $name = $_POST['message_name'];
  28.   $email = $_POST['message_email'];
  29.   $address = $_POST['message_text'];
  30.   $quote = $_POST['message_quote'];
  31.   $human = $_POST['message_human'];
  32.   $message = "    Supplied information
  33.  
  34.    Name: $name
  35.    Address: $address
  36.    Email address: $email
  37.    Quote: $quote
  38.    ";
  39.  
  40.   //php mailer variables
  41.   $to = get_option('admin_email');
  42.   $subject = "Quote from ".get_bloginfo('name');
  43.   $headers = 'From: '. $email . "\r\n" .
  44.     'Reply-To: ' . $email . "\r\n";
  45.  
  46.   if(!$human == 0){
  47.     if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
  48.     else {
  49.  
  50.       //validate email
  51.       if(!filter_var($email, FILTER_VALIDATE_EMAIL))
  52.         my_contact_form_generate_response("error", $email_invalid);
  53.       else //email is valid
  54.       {
  55.         //validate presence of name and message
  56.         if(empty($name) || empty($message)){
  57.           my_contact_form_generate_response("error", $missing_content);
  58.         }
  59.         else //ready to go!
  60.         {
  61.           $sent = wp_mail($to, $subject, strip_tags($message), $headers);
  62.           if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
  63.           else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
  64.         }
  65.       }
  66.     }
  67.   }
  68.   else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
  69.  
  70. ?>
  71.  
  72. <?php get_header(); ?>
  73.  
  74.  <?php if ( has_post_thumbnail()) : ?>
  75.    <div id="home-container">
  76.      <?php the_post_thumbnail(); ?>
  77.    </div>
  78.  <?php endif; ?>
  79.  
  80.       <!--content-->
  81.       <div id="content_container">
  82.          
  83.          <div id="content">
  84.      
  85.             <div id="left-col">
  86.            
  87.             <!--Start of Quote-->
  88.  
  89.    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  90.  
  91. <div id="rooms"></div>
  92. <button id="add">Add room</button><br>
  93. <input type="text" id="cost" disabled><br />
  94. <textarea id="message_quote" disabled><?php echo esc_textarea($_POST['message_quote']); ?></textarea>
  95.  
  96.    <script>
  97. var price = 2; // Price per sq metre
  98.  
  99. $("#add").bind('click', function () {
  100.     $('#rooms').append('<div class="room"><input class="name" type="text" placeholder="Room Name"><input class="x" type="text" placeholder="Room Width (m)"><input class="y" type="text" placeholder="Room Lenght (m)"></div>');
  101.    
  102.     $('#rooms .x, .y').on('change', function () {
  103.         var cost = 0;
  104.         var quote = '';
  105.         $('.room').each(function () {
  106.             var x = $(this).children('.x').val();
  107.             var y = $(this).children('.y').val();
  108.             var name = $(this).children('.name').val();
  109.             if (!x) {x = 1;}
  110.             if (!y) {y = 1;}
  111.             cost = cost + (x*y);
  112.             quote = quote + '\n Room name:'+name+' - Room Dimensions: '+x+'x'+y+' - Estimate: £'+((x*y)*price);
  113.         });
  114.  
  115.         $("#cost").val('Estimated Price:'+(cost*price)).show();
  116.         $("#quote").val(quote).show();
  117.     });
  118. });
  119. </script>
  120.  
  121. <style type="text/css">
  122.                 .error{
  123.                   padding: 5px 9px;
  124.                   border: 1px solid red;
  125.                   color: red;
  126.                   border-radius: 3px;
  127.                 }
  128.  
  129.                 .success{
  130.                   padding: 5px 9px;
  131.                   border: 1px solid green;
  132.                   color: green;
  133.                   border-radius: 3px;
  134.                 }
  135.  
  136.                 form span{
  137.                   color: red;
  138.                 }
  139.               </style>
  140.  
  141.               <div id="respond">
  142.                 <?php echo $response; ?>
  143.                 <form action="<?php the_permalink(); ?>" method="post">
  144.                   <p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
  145.                   <p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
  146.                   <p><label for="message_text">Address: <span>*</span> <br><textarea type="text" name="message_text"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
  147.                   <p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
  148.                   <input type="hidden" name="submitted" value="1">
  149.                   <p><input type="submit"></p>
  150.                 </form>
  151.               </div>
  152.    
  153.  
  154.             <!--End of Quote-->
  155.    
  156.             <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
  157.            
  158.                <div class="post-entry">
  159.                
  160.                                  <h1><?php the_title(); ?></h1>
  161.  
  162.                   <?php the_content(); ?>
  163.                   <div class="clear"></div>
  164.                  
  165.                </div><!--post-entry end-->
  166.                
  167.                <?php// comments_template( '', true); ?>
  168.  
  169. <?php endwhile; ?>
  170. </div> <!--left-col end-->
  171.  
  172. <?php get_sidebar(); ?>
  173.  
  174.    </div> <!--content end-->
  175.  
  176. <div id="readmore-container">
  177. <?php get_footer(readmore); ?>
  178. </div>
  179.          
  180. </div> <!--wrapper end-->
  181.  
  182. <?php get_footer(); ?>
  183.  


this seem to be able to gather the information, check if its all valid, check your a human, send the message...

how ever it doesn't actually send the quote information, the names of the rooms, the sizes or the price etc
  • kitcorsa
  • Graduate
  • Graduate
  • kitcorsa
  • Posts: 132

Post 3+ Months Ago

sorted!!

figured it out!!! disable function not working, changed the


<textarea id="quote" disabled></textarea>



to readonly and works!


<textarea id="quote" readonly></textarea>

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 140 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.