1. 首页
  2. 问答
  3. 如何在wordpress表单模板中调用自定义js

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

2013-12-19 37 views
0

我能够在wordpress主题中使用关于构建联系表单'模板'的教程（WordPress & jQuery Contact Form without a Plugin）。我能够得到这个简单的表单很好地工作，并试图将其模式化为我的表单。如何在wordpress表单模板中调用自定义js

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

即时通讯的问题是调用表单需要用于计算的js文件（js不使用jquery）。

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

TWO，即时confiused如何使用（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._%-][email protected][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 = '[email protected]'; 
      $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 <[email protected]>'; 
       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，它的工作原理，但不能使用下一个按钮，将信息发送到指定邮箱，并抄送公司的电子邮件，你可以看到的形式完美地计算，只是不能在其发送到CPL电子邮件找到代码

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

来源

2013-12-19 user3111287

+0

插入 “/”，在wp_enqueue_script – Trishul

+0

THX库的答复tsl143前，我试过这个，但它仍然不起作用。我是否将代码粘贴到正确的位置？ （主题的functions.php） – user3111287

回答

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

来源

2013-12-19 20:01:58 diggy

+0

THX！ diggy，这工作！我非常感谢你的帮助。现在我正在努力让这个模板看起来像一个主题默认页面，具有相同的侧边栏位置，页眉，页脚等。我喜欢它以同样的方式加载新页面发布 – user3111287

+0

http://69.195.124.135/~fivestk2/形式/链接到页面:) – user3111287

相关问题

 相关问题