Magento 2 如何将自定义字段添加到联系人表单

与客户沟通是获得客户忠诚度的关键。您必须要有耐心，积极和响应。我们已经讨论了数百种可以与客户联系的方式和地点。但是，让客户与您联系最有效的方法是什么？发掘联系页面优势！

有各种各样的不同工具，例如聊天机器人，电子邮件，社交网络和其他工具。在本文中，我们决定关注联系表格，并提供现成的指南以增强您的Magento网站的功能。阅读该文章，以了解如何将自定义字段添加到联系表单，并获取一些对您的业务有用的提示。

有各种各样的不同工具，例如聊天机器人，电子邮件，社交网络和其他工具。在本文中，我们决定关注联系表格，并提供现成的指南以增强您的Magento网站的功能。阅读该文章，以了解如何将自定义字段添加到联系表单，并获取一些对您的业务有用的提示。

什么是联系页面，为什么需要它？

首先，您应该问自己一个问题- 我什至需要联系页面吗？“与我们联系”页面包含一种表单，该表单使网站访问者可以根据其所连接的电子邮件与所有者或支持团队联系。联系人表格由访问者可以在其中输入姓名，电子邮件以使支持团队与他们联系的主题以及带有消息的主题的字段组成。

您可能想知道为什么要创建一个单独的联系页面，因为用户也可以使用网站上提到的电子邮件或电话号码直接与您联系。企业主为什么选择联系页面？这里有几个原因为什么：

• 联系页面可保护您的网站免受垃圾邮件的侵害。想象一下，您想与听众交流，因此您将电子邮件放在网站上的某个位置。这样，垃圾邮件发送者就可以访问您的收件箱，并且很可能会在其中添加垃圾邮件。如果您不想花费大量时间查找相关消息，请使用联系表与您的客户取得联系。
• 联系人页面有助于跟踪网站访问者。您只需要在联系表单中设置转化目标，并跟踪联系页面上的访问者数量即可。此外，您可以跟踪访问者从何处进入联系页面并定义最受欢迎的方式。使用联系表，您可以制定策略来将访问者转变为忠实的客户。
• 联系人页面可增加转化。怎么样？如果由于任何原因您的网站访问者遇到问题，则需要使用“联系页面”功能来防止他们直接离开。他们遇到一个联系表，开始对话以寻找所需的解决方案。
• 联系人页面使您的网站看起来更专业。没有联系表格的网站可能看起来不完整，或者显示您不知道如何开展在线业务。将其添加到网站，您将对访问者更加专业。此外，潜在的业务合作伙伴更有可能通过表格而不是电子邮件地址与您联系。

为什么“联系页面”对于SEO很重要？

联系人页面不仅需要与客户交流，而且可以为您的网站做更多的工作。联系表格是您网站上可以在搜索中排名的页面之一。但是大多数公司没有在其联系页面上包含失去SEO机会的关键字。

但是，“与我们联系”页面上没有很多可以添加关键字的地方。作为替代，许多商人在网页的HTML上使用其他标签。普通的网站用户不会注意这些技巧，但是，正如您所知，搜索引擎对页面内容的了解有限。使用Microdata制作页面，可以帮助Google和其他搜索引擎了解所提供的信息，位置，价格以及其他信息。结果，您的联系表在搜索中排名更高，并吸引了访问量。

顶部联系表提示

在为您的网站创建联系表之前，您需要对其有清晰的了解。这里还需要遵循一些规则，否则访问者将不会单击“提交”按钮。我们在为客户创建联系表单以及自己使用联系表单方面拥有丰富的经验-因此，这里是为您提供的一些工作提示。

• 尽可能简化。请勿使用批次或字段，颜色和细节，任何会转移或刺激用户的东西。他们无需感到公司试图让人们放弃并在任何情况下与其联系。简单起见，人们会因为需要而与您联系。
• 使用通用措词。您是否见过适当的联系表格，其中包含大量且过分创意的短语？当然不。继续遵循简单的想法–使用每个人都容易理解的经典短语，例如“帮助”，“联系我们”，“获取支持”。
• 避免混淆号召性用语，并将它们放在公共位置。我们建议大多数公司采用以下策略-在联系页面上使用页脚和页眉链接，而不要将其放在页面上的其他位置。但是，如果它不适合您的设计，则可以尝试找到自己的方式。但是，请确保使其易于理解。
• 使您的表单移动友好。几乎所有访客都没有使用相同尺寸的桌面。如果您的联系表格不适合移动设备使用，您可能会失去许多无法通过智能手机或平板电脑与您联系的客户。使您的联系表单移动友好，以向客户表明您关心他们的体验。
• 避免使用较长的下拉菜单选项。如果您决定在联系表单中使用下拉菜单，请记住用户讨厌长菜单。几个小时都没有人在寻找他们的生日。用户只需离开菜单就厌倦了页面-让他们轻松输入信息。
• 仅使用简单的验证码。所有企业所有者都同意，验证码是过滤垃圾邮件和避免电子邮件问题的必备工具。但是，尽管如此，验证码对网站的转换有负面影响。为了保护您的网站免受垃圾邮件发送者的侵扰，请勿使用具有很多验证阶段的复杂验证码，否则您将来可能会失去客户。
• 发送表单后发送个性化消息。许多商人创建现成的消息表单以响应客户。但是，当人们希望通过联系表与品牌进行交流时，他们期望看到支持团队的个人兴趣。发送个性化消息，您将有更多机会与用户建立牢固的关系。

如何将自定义字段添加到Magento 2联系人表单

想要在您的Magento商店中添加联系表吗？与其使用现成的网站，不如为您的网站创建自定义联系人字段。它允许创建字段的不同组合以收集有关您的客户的正确信息集。那么，你该怎么做呢？

要根据您的需要创建表单，默认的Magento 2功能可能不够。有几种扩展其功能的方法。

首先，您可以使用模块或创建自己的模块。例如，让我们创建BelVG Contact模块：

创建form.phtml模板，并在其中添加一个enctype =“ multipart / form-data”属性以及用于部门和文件上传的新字段。

<div class="field department required">
   <label class="label" for="department">
<span><?=block->escapeHtml(__(Department)) ?></span>
</label>
   <div class="control">
       <select name="department" required>
           <option disabled selected hidden value=""><?= $block->escapeHtml(__('Select a department')) ?></option>
           <option><?= $block->escapeHtml(__('Tech dept')) ?></option>
           <option><?= $block->escapeHtml(__('Marketing dept')) ?></option>
       </select>
   </div>
</div>

<div class="field file">
   <label class="label" for="file"><span><?= $block->escapeHtml(__('Attach a file')) ?></span></label>
   <div class="control">
       <input name="MAX_FILE_SIZE" type="hidden" value="2000000" />
       <input type="file" name="file" id="file">
   </div>
</div>

添加信息以选择商店的工作时间（在管理面板中配置）。

<div class="field note no-label"><?= $block->escapeHtml(__('Our working hours: '))?></div>

我们还需要输入工作时间的数据。为此使用WorkingHours.php。

public function getWorkingHours($store = null)
{
   if (!$store) {
       $store = $this->storeManager->getStore();
   }
   return $this->scopeConfig->getValue(
       \Magento\Store\Model\Information::XML_PATH_STORE_INFO_HOURS,
       \Magento\Store\Model\ScopeInterface::SCOPE_STORE,
       $store
   );
}

在“  Hours ”模板中输入以下内容：

$this->helper(BelVG\Contact\Helper\WorkingHours::class)->getWorkingHours()

但是此模板未连接，而不是标准模板。为此，添加contact_index_index.xml。

 <referenceBlock name="contactForm" remove="true"/>
       <referenceContainer name="content">
           <block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="BelVG_Contact::form.phtml"/>
       </referenceContainer>

现在，在网站上，您可以看到以下内容：

然后，我们需要创建一个电子邮件模板。

在模板中，您应将字段应用于所选部门。

<tr>
    	<td><b>{{trans "Department"}}</b></td>
    	<td>{{var data.department}}</td>
</tr>

然后，您应该应用新字段。

发送消息后，您将获得以下信息：

要处理文件，我们需要添加Block，Model和Controller：

在块中，我们创建：

public function getFormAction()
{
   return $this->getUrl('custom_contact/index/post', ['_secure' => true]);
}
 
public function getWorkingHours($store = null)
{
   if (!$store) {
       $store = $this->storeManager->getStore();
   }
   $storeInformation = $this->information->getStoreInformationObject($store);
   return $storeInformation->getData('hours');
}

在控制器中：

public function execute()
{
   if (!$this->getRequest()->isPost()) {
       return $this->resultRedirectFactory->create()->setPath('*/*/');
   }
   try {
       $this->sendEmail($this->validatedParams());
       $this->messageManager->addSuccessMessage(
           __('Thanks for contacting us with your comments and questions. We\'ll respond to you very soon.')
       );
       $this->dataPersistor->clear('contact_us');
   } catch (LocalizedException $e) {
       $this->messageManager->addErrorMessage($e->getMessage());
       $this->dataPersistor->set('contact_us', $this->getRequest()->getParams());
   } catch (\Exception $e) {
       $this->logger->critical($e);
       $this->messageManager->addErrorMessage(
           __('An error occurred while processing your form. Please try again later.')
       );
       $this->dataPersistor->set('contact_us', $this->getRequest()->getParams());
   }
   return $this->resultRedirectFactory->create()->setPath('contact/index');
}
 
/**
* @param array $post Post data from contact form
* @return void
*/
private function sendEmail($post)
{
   $this->customMail->send(
       $post['params']['email'],
       ['data' => new DataObject($post['params']), 'file' => $post['file']]
   );
}
 
/**
* @return array
* @throws \Exception
*/
private function validatedParams()
{
   $request = $this->getRequest();
   if (trim($request->getParam('name')) === '') {
       throw new LocalizedException(__('Enter the Name and try again.'));
   }
   if (trim($request->getParam('comment')) === '') {
       throw new LocalizedException(__('Enter the comment and try again.'));
   }
   if (false === \strpos($request->getParam('email'), '@')) {
       throw new LocalizedException(__('The email address is invalid. Verify the email address and try again.'));
   }
   if (trim($request->getParam('hideit')) !== '') {
       throw new \Exception();
   }
   $result = ['params' => $request->getParams(), 'file' => []];
 
   $filesData = $this->getRequest()->getFiles('file');
   if(isset($filesData['name'])) {
       try {
           $data = $this->getAttachFileData();
       }  catch (\Exception $e) {
           throw new LocalizedException(__('Attached file error.'));
       }
       $result['file'] = $data;
   }
 
   return $result;
}
 
private function getAttachFileData()
{
   $uploader = $this->fileUploaderFactory->create(['fileId' => 'file']);
   $uploader->setAllowRenameFiles(true);
   $uploader->setFilesDispersion(true);
   $uploader->setAllowCreateFolders(true);
   $path = $this->fileSystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath('contact-file');
   $result = $uploader->save($path);
   $filePath = $result['path'].$result['file'];
   $fileName = $result['name'];
   return ['path' => $filePath, 'name' => $fileName];
}

在模型中：

public function send($replyTo, array $variables)
{
   /** @see \Magento\Contact\Controller\Index\Post::validatedParams() */
   $replyToName = !empty($variables['data']['name']) ? $variables['data']['name'] : null;
   $fileData = !empty($variables['file']) ? $variables['file'] : [];
 
   $this->inlineTranslation->suspend();
   try {
       $transport = $this->transportBuilder
           ->setTemplateIdentifier($this->contactsConfig->emailTemplate())
           ->setTemplateOptions(
               [
                   'area' => Area::AREA_FRONTEND,
                   'store' => $this->storeManager->getStore()->getId()
               ]
           )
           ->setTemplateVars($variables)
           ->setFrom($this->contactsConfig->emailSender())
           ->addTo($this->contactsConfig->emailRecipient())
           ->setReplyTo($replyTo, $replyToName);
       if(!empty($fileData)) {
           $transport->addAttachment($fileData['path'], $fileData['name']);
       }
       $transport->getTransport()->sendMessage();
   } finally {
       $this->inlineTranslation->resume();
   }
}

现在，您将在邮件中收到一个文件作为附件。

最后

如果您考虑升级您的Magento联系人表格或仍然不使用它，请牢记我们的提示和指南。请按照我们的详细说明在您的Magento在线商店中添加自定义字段，并从上面列出的与我们联系表格的最佳示例中获取建议。如果您需要有关如何增强网站功能的更多信息，请查看我们的博客。

喜欢这篇文章吗？在下面的评论中分享您的想法，并查看我们的联系页面。