how to call custom js in wordpress form template

Question

i was able to find a tutorial (WordPress & jQuery Contact Form without a Plugin) about building a contact form 'template' for use within a wordpress theme. i was able to get this simple form to work nicely, and have tried mod'ing it to work for my form.

basically ive built a page ( form.php) and uploaded it into the main theme folder along with the 404, archives, etc files. I then just went into the wordpress dashboard, went to add new page, and created a new page (to act as a placeholder for the form.php template) i selected the FORM from the template dropdown, updated, and then was able to view my form.

The problem im having is calling a js file that the form needs to use for calculations (the js doesn't use jquery).

ONE, im a newbie, im not sure where is BEST to paste the code to call to the js file: inside my header.php? functions.php? inside the form.php template? or inside the placeholder page? Also, depending on where my script is loaded, do i need to specify it to load only on my form page?

TWO, im confiused how to use (wp_register_script), and/or (wp_enqueue_script) properly for my form.php template to find and load the js file because no matter what combination ive tried, i cant get my form to use the js file. i am stuck trying to figure out what im doing wrong or if im even going about this correctly, please, some advise would be greatly appreciated thanks for spending time to read. heres my form code

    <?php
/*
Template Name: Estimator Form
*/
?>
<?php 
//=======SCRIPT================================


//=======If the form is submitted==============
if(isset($_POST['submitted'])) {

//=======Check if the honeypot captcha field===
    if(trim($_POST['checking']) !== '') {
        $captchaError = true;
    } else {
//=======START REQUIRED FIELDS CHECKS==========
        if(trim($_POST['prepby']) === '') {
            $nameError = 'You forgot to enter your name.';
            $hasError = true;
        } else {
            $name = trim($_POST['prepby']);
        }
//=====
        if(trim($_POST['T1']) === '') {
            $nameError = 'You forgot to enter the seller name.';
            $hasError = true;
        } else {
            $name = trim($_POST['T1']);
        }

//=====
        if(trim($_POST['T2']) === '') {
            $nameError = 'You forgot to enter the propert address.';
            $hasError = true;
        } else {
            $name = trim($_POST['T2']);
        }

//=====
        if(trim($_POST['Price']) === '') {
            $nameError = 'You forgot to enter the purchase price.';
            $hasError = true;
        } else {
            $name = trim($_POST['Price']);
        }

//=======END REQUIRED FIELDS CHECKS==============   

//=======BEGIN EMAIL CHECK=======================
        if(trim($_POST['email']) === '')  {
            $emailError = 'You forgot to enter your email address.';
            $hasError = true;
        } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
            $emailError = 'You entered an invalid email address.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }
//=======END EMAIL CHECK=======================     

//=======BEGIN COMMENT FIELD CHECK=============     
        //if(trim($_POST['comments']) === '') {
            //$commentError = 'You forgot to enter your comments.';
            //$hasError = true;
        //} else {
            //if(function_exists('stripslashes')) {
                //$comments = stripslashes(trim($_POST['comments']));
            //} else {
                //$comments = trim($_POST['comments']);
            //}
        //}
//=======END COMMENT FIELD CHECK============= 
//====IF THERE IS NO ERROR, SEND EMAIL=======
        if(!isset($hasError)) {

            $emailTo = 'me@somedomain.com';
            $subject = 'Contact Form Submission from '.$name;
            $sendCopy = trim($_POST['sendCopy']);
            $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
            $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

            mail($emailTo, $subject, $body, $headers);

            if($sendCopy == true) {
                $subject = 'You emailed Your Name';
                $headers = 'From: Your Name <noreply@somedomain.com>';
                mail($email, $subject, $body, $headers);
            }

            $emailSent = true;

        }
    }
} ?>
<?php get_header(); ?>
<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">
  <h5>Thank You,
    <?=$name;?>
  </h5>
  <p>Your email was successfully sent. I will be in touch soon.</p>
</div>
<?php } else { ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1>
  <?php the_title(); ?>
</h1>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">There was an error submitting the form.
<p>
  <?php } ?>
<form action="<?php the_permalink(); ?>" id="calcForm" method="post">
  <ol class="forms">
    <li>
      <label for="prepby">Prepared By:</label>
      <input name="prepby" id="prepby" size="50" value="<?php if(isset($_POST['prepby'])) echo $_POST['prepby'];?>" class="requiredField" />
      <?php if($nameError != '') { ?>
      <span class="error">
      <?=$nameError;?>
      </span>
      <?php } ?>
    </li>
    <li>
      <label for="company">Of:</label>
      <input name="company" id="company" size="50" value="<?php if(isset($_POST['company'])) echo $_POST['company'];?>"/>
    </li>
    <li>
      <label for="T1">Seller's Name:</label>
      <input name="T1" id="T1" size="50" value="<?php if(isset($_POST['T1'])) echo $_POST['T1'];?>" class="requiredField" />
      <?php if($nameError != '') { ?>
      <span class="error">
      <?=$nameError;?>
      </span>
      <?php } ?>
    </li>
    <li>
      <label for="email">Seller's Email</label>
      <input name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />
      <?php if($emailError != '') { ?>
      <span class="error">
      <?=$emailError;?>
      </span>
      <?php } ?>
    </li>
    <li>
      <label for="T2">Property Address:</label>
      <input name="T2" id="T2" size="50" value="<?php if(isset($_POST['T2'])) echo $_POST['T2'];?>" class="requiredField" />
      <?php if($nameError != '') { ?>
      <span class="error">
      <?=$nameError;?>
      </span>
      <?php } ?>
    </li>
    <li>
      <label for="Price">Purchase Price:</label>
      <input name="Price" id="Price" value="<?php if(isset($_POST['Price'])) echo $_POST['Price'];?>" class="requiredField" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
      <?php if($nameError != '') { ?>
      <span class="error">
      <?=$nameError;?>
      </span>
      <?php } ?>
    </li>
    <li>
      <label for="CommissionPct">Real Estate Commission:</label>
      <input name="CommissionPct" id="CommissionPct" value="<?php if(isset($_POST['CommissionPct'])) echo $_POST['CommissionPct'];?>" size="5" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
      <input name="CommissionAmt" id="CommissionAmt" value="<?php if(isset($_POST['CommissionAmt'])) echo $_POST['CommissionAmt'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="TransFee">Broker’s Only Commission:</label>
      <input name="TransFee" id="TransFee" value="<?php if(isset($_POST['TransFee'])) echo $_POST['TransFee'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="DocStamps">Documentary Stamps:</label>
      <input name="DocStamps" id="DocStamps" value="<?php if(isset($_POST['DocStamps'])) echo $_POST['DocStamps'];?>" size="25" onChange="_ComputeForm(this)" readonly onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="TitleInsurance">Title Insurance:</label>
      <input name="TitleInsurance" id="TitleInsurance" value="<?php if(isset($_POST['TitleInsurance'])) echo $_POST['TitleInsurance'];?>" size="25" onChange="_ComputeForm(this)" readonly onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="RelatedTitleFees">Title Policy:</label>
      <input name="RelatedTitleFees" id="RelatedTitleFees" value="<?php if(isset($_POST['RelatedTitleFees'])) echo $_POST['RelatedTitleFees'];?>" size="25" onChange="_ComputeForm(this)" readonly onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="SearchFees">Search Fee:</label>
      <input name="SearchFees" id="SearchFees" value="<?php if(isset($_POST['SearchFees'])) echo $_POST['SearchFees'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="MunicipalLienFee">Municipal Lien Search:</label>
      <input name="MunicipalLienFee" id="MunicipalLienFee" value="<?php if(isset($_POST['MunicipalLienFee'])) echo $_POST['MunicipalLienFee'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="Payoff1">Estimated Payoff #1:</label>
      <input name="Payoff1" id="Payoff1" value="<?php if(isset($_POST['Payoff1'])) echo $_POST['Payoff1'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="Payoff2">Estimated Payoff #2:</label>
      <input name="Payoff2" id="Payoff2" value="<?php if(isset($_POST['Payoff2'])) echo $_POST['Payoff2'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="ScanFee">Document Scanning Fee:</label>
      <input name="ScanFee" id="ScanFee" value="<?php if(isset($_POST['ScanFee'])) echo $_POST['ScanFee'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="BuyerWarranty">Buyer Home Warranty:</label>
      <input name="BuyerWarranty" id="BuyerWarranty" value="<?php if(isset($_POST['BuyerWarranty'])) echo $_POST['BuyerWarranty'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="SellerPaidCCPct">Seller Paid Costs:</label>
      <input name="SellerPaidCCPct" id="SellerPaidCCPct" value="<?php if(isset($_POST['SellerPaidCCPct'])) echo $_POST['SellerPaidCCPct'];?>" size="5" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
      <label for="SellerPaidCCAmt"></label>
      <input name="SellerPaidCCAmt" id="SellerPaidCCAmt" value="<?php if(isset($_POST['SellerPaidCCAmt'])) echo $_POST['SellerPaidCCAmt'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="ClosingDate">Estimated Closing Date:</label>
      <input name="ClosingDate" id="ClosingDate" value="<?php if(isset($_POST['ClosingDate'])) echo $_POST['ClosingDate'];?>" size="10" onChange="_ComputeForm(this)" maxlength="10" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
      (MM/DD/YYYY) </li>
    <li>
      <label for="LastYearTaxes">Last Year's Taxes:</label>
      <input name="LastYearTaxes" id="LastYearTaxes" value="<?php if(isset($_POST['LastYearTaxes'])) echo $_POST['LastYearTaxes'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="TaxProration">Taxes paid by Seller:</label>
      <input name="TaxProration" id="TaxProration" value="<?php if(isset($_POST['TaxProration'])) echo $_POST['TaxProration'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="OtherSellerFees">Other Seller Fees:</label>
      <input name="OtherSellerFees" id="OtherSellerFees" value="<?php if(isset($_POST['OtherSellerFees'])) echo $_POST['OtherSellerFees'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="ClosingExpenses">Total Closing Expenses:</label>
      <input name="ClosingExpenses" id="ClosingExpenses" value="<?php if(isset($_POST['ClosingExpenses'])) echo $_POST['ClosingExpenses'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li>
      <label for="NetSeller">Estimated Net to Seller:</label>
      <input name="NetSeller" id="NetSeller" value="<?php if(isset($_POST['NetSeller'])) echo $_POST['NetSeller'];?>" size="25" onChange="_ComputeForm(this)" onFocus="_onFocus(this)" onBlur="_onBlur(this)" />
    </li>
    <li class="textarea">
      <label for="commentsText">Comments</label>
      <textarea name="comments" id="commentsText" rows="6" cols="65" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?>
</textarea>
    </li>
    <li class="inline">
      <input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> />
      <label for="sendCopy">Send a copy of this email to yourself</label>
    </li>
    <li class="screenReader">
      <label for="checking" class="screenReader">If you want to submit this form, DO NOT enter anything in this field</label>
      <input name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
    </li>
    <li class="buttons">
      <input type="hidden" name="submitted" id="submitted" value="true" />
      <input id="save" style="color:#000" type="button" onClick="(fluffernutter.submit());" language="javascript" value="NEXT" name="save">
    </li>
  </ol>
</form>
<?php endwhile; ?>
<?php endif; ?>
<?php } ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?
    >

heres the code i pasted into the functions.php of my themes:

    function adding_calcscript() {
wp_register_script('seller-calc', get_template_directory_uri() . 'library/js/seller-calc.js');
wp_enqueue_script('seller-calc');
}
add_action( 'wp_enqueue_scripts', 'adding_calcscript' ); 
?>
<?php if (is_page('calcform') ) { ?>
<!--home page custom JS-->
    <script type='text/javascript' src="<?php bloginfo('template_directory'); ?>library/js/seller-calc.js"></script>
<?php } ?>

heres a link to the form calling the js from within a new page post, which works, but cant use the next button to send the info to a specified email, and cc the company email, you can see the form calculates perfectly, just cant find code on sending it to a cpl emails

(http://69.195.124.135/~fivestk2/cash-closing-cost-estimator/) 

Answer 1

You can register your script in functions.php by hooking into init ...

add_action( 'init', 'adding_calcscript' );
function adding_calcscript(){
    wp_register_script( 'seller-calc', get_template_directory_uri() . '/library/js/seller-calc.js' );
}

... and enqueue it in you custom template:

wp_enqueue_script( 'seller-calc' );
get_header();