JS Animated. 如何添加联系人表单字段(基于TMForm)

本教程将向您展示如何在JS动画模板上向TMForm添加新字段.

1. Open the .html 文件，代表您的联系人页面在Dreamweaver或任何 HTML editor. 切换到分屏视图. 我们将添加两个名为 “Fax” and “Organization” 基于已有的.

2. 要添加“Fax”字段，请选择“Phone”字段作为最相似的字段. 这将在“代码”窗口中突出显示代码的必要部分.

   

   例如，“Phone”字段的代码如下所示:

   
       
       *This field is required.
       *This is not a valid phone.
   
   

   复制代码并在其关闭后立即粘贴 标签，所以“传真”字段就在“电话”后面.”

   将新代码中的“phone”改为“fax”，看起来像这样:

   
       
       *This field is required.
       *This is not a valid fax number.
   
   

3. 添加一个名为“Organization”的额外字段,，突出显示“Name”字段的代码，可能看起来像:

   
       
       *This field is required.
       *This is not a valid name.
   
   

   复制代码并在其关闭后立即粘贴 标记，因此“组织”字段紧接在“名称”之后.”

   将粘贴代码中的“名称”改为“组织”,所以结果是这样的:

   
       
       *This field is required.
       *This is not a valid organization.
    
   

   将更改保存到 .html file.

4. Open the TMForm.js file located in the ‘js’ folder. 查找运行如下的121-125行:

   名称:getValue($('标签.name input'))
   电子邮件:getValue($('的标签.email input'))
   、电话:getValue($('标签.phone input'))
   传真:getValue($('标签.fax input'))
   状态:getValue($('标签.state input'))
   

   因为这部分代码已经有了“fax”和“state”的必要行，尽管它们最初没有在模板中使用 contact form，我们只需要为“组织”添加一个类似的名称.”

   复制现有的一行，例如“email”:

   电子邮件:getValue($('的标签.email input'))
   

   在它后面粘贴一行，并将“email”更改为“organization”,所以最终结果是这样的:

       
       名称:getValue($('标签.name input'))
       电子邮件:getValue($('的标签.email input'))
       、电话:getValue($('标签.phone input'))
       传真:getValue($('标签.fax input'))
       、组织:getValue($('标签.organization input'))
       状态:getValue($('标签.state input'))
       消息:getValue($('标签.message textarea'))
     

   向下滚动并更改散列符号( # )发送到您的电子邮件地址，并在底部写着:

    
   $(window).load(function(){
       $('#form').TMForm({
       ownerEmail:'#' 
       })
   })
   

   Save the changes.

5. Open MailHandler.php located in the ‘bat’ folder. 同样，“fax”和“state”的必要行已经在那里了. 对于名为“Organization”的字段，复制并粘贴“name”的部分:

    
   if($_POST['name']!='false'){
       $messageBody .= '
   Visitor: ' . $_POST["name"] . '
   ' . "\n";
       $messageBody .= '
   ' . "\n";
   }
   

   并将其中的“name”更改为“organization”，这样看起来像:

    
   if ($ _POST['组织”)!='false'){
       $messageBody .= '
   Organization: ' . $ _POST[“组织”) . '
   ' . "\n";
       $messageBody .= '
   ' . "\n";
   }
   

   Save the changes.

6. 现在可以在远程服务器上测试站点，看看新字段是如何工作的.

   

请随时查看下面的详细视频教程: