如何在wordpress表单模板中调用自定义js

时间：2013-12-19 18:35:35

标签： javascript wordpress forms templates

我能够找到一个教程（没有插件的WordPress和jQuery联系表格）关于构建一个联系表单'模板'，以便在wordpress主题中使用。我能够让这个简单的形式很好地工作，并尝试模拟它为我的形式工作。

基本上我已经构建了一个页面（form.php）并将其与404，档案等文件一起上传到主题文件夹中。然后我进入wordpress仪表板，去添加新页面，并创建一个新页面（充当form.php模板的占位符）我从模板下拉列表中选择了FORM，更新了，然后才能查看我的表格。

我遇到的问题是调用表单需要用于计算的js文件（js不使用jquery）。

ONE，我是新手，我不知道哪里最好粘贴代码来调用js文件：  在我的header.php里面？的functions.php？在form.php模板里面？或者在占位符页面内？另外，根据我的脚本加载位置，我是否需要指定它才能加载到我的表单页面上？

TWO，我很好地使用（wp_register_script）和/或（wp_enqueue_script）来为我的form.php模板找到并加载js文件，因为无论我尝试了什么组合，我都不能让我的表单使用js文件。我被困在试图弄清楚我做错了什么，或者如果我甚至正确地解决这个问题，请一些建议将非常感谢花时间阅读。继承我的表格代码

    <?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(); ?
    >

继承我粘贴到我主题的functions.php中的代码：

    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 } ?>

这是一个链接到新页面帖子中调用js的表单，它可以工作，但不能使用下一个按钮将信息发送到指定的电子邮件，并且cc公司电子邮件，你可以看到表单完美地计算，无法找到将其发送到cpl电子邮件的代码

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

1 个答案:

答案 0 :(得分：1)

您可以通过挂钩functions.php ...

在init注册您的脚本 
add_action( 'init', 'adding_calcscript' );
function adding_calcscript(){
    wp_register_script( 'seller-calc', get_template_directory_uri() . '/library/js/seller-calc.js' );
}

...并将其排入自定义模板：

wp_enqueue_script( 'seller-calc' );
get_header();
相关问题
最新问题