> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Contact Form Plus +

#### Contact Form Plus + 让商家可以使用自己定制的联系表单来调查并收集客户的资讯和回复。

${youtube}[如何在网站上创建漂亮的联系表单？](vvNCDjbvbds)

###### 在这篇文章中：
1. [安装 Contact Form Plus 扩充](#2-1-contact-form-plus)
2. [如何在 Contact Form Plus 添加图片？](#2-2-contact-form-plus)
3. [小贴士](#2-3)

---
## 1. 安装 Contact Form Plus 扩充

步骤 1 : [EasyStore 后台](https://admin.easystore.co/) > 安装扩充 > App Store > 搜索 **Contact Form plus**。

步骤 2 :  安装此扩充功能。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1bl0zbj.png)

步骤 3 : 完成设置


| 💡 小贴士： 提交表格后，将发送到收件人的电子邮件。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_epb21e.png)

步骤 4 : 按钮将出现在表格底部，让客户发送填写完毕的表格。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_10tuuba.png)

举例：

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/heimer-95_1t1l57m.png)

步骤 5 : 您可以在一个表单中选择多个输入字段 > 选择一个 **Text field**  > **Add selected input** 

|| 📌 小笔记： 请注意，在选择或更改选择后，必须单击 "添加选定输入"。

举例： 点击 **Checkbox > Add selected input**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6udvyl.png)

更改将显示在 **Output** (向下滚动页面）

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/heimer-96_18th33t.png)

步骤 6 : Output - 填写标题、表格说明、必填信息。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-02-08-at-15431_1eopf6t.png)

步骤 7 : 保存所有设置

步骤 8 : 查看您的主页，"联系我们" 将自动添加到顶部主目录中。点击后即可查看！

如果您想重新命名页面，可前往 **销售渠道 > 线上网店 > 导航列** > Contact Us > 编辑 > 输入您喜欢的标题 > 储存。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-02-08-at-15157_jvtesh.png)
---
## 2. 如何在 Contact Form Plus 添加图片？

在某些情况下，您希望上传二维码图片，以便客户扫描。以下是如何在 Contact Form Plus 上插入二维码图片的步骤。

首先，您需要有二维码图片链接。不知道从哪里获取？让我来指导你。

步骤 1 : 到 **商品管理** > 点击 **新增商品** > 点击 **新增商品图片** > **上传图片** > **上传您的二维码图片** 之后点击✏️图标即可获取您的 **图片 URL** 。

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screen-recording-2024-02-08-at_ot5m39.gif)

步骤 2 : 接下来，点击 **安装扩充 > Contact Form Plus** > 向下滚动到 "Output"，然后将下面的代码粘贴到您希望添加二维码图像的栏目上。
```
<br><img src="您的 QR-CODE-URL" width="150px" height="150px">
```

例如，我们将代码贴在此表单描述栏 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-02-08-at-20732_jzxj98.png)

| 💡 小贴士： 您可以调整二维码图像大小的 **width** px 和 **height** px 。

步骤 3 : 保存所有设置，下面就是最终结果：

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-02-08-at-21003_2j89p6.png)

---
## 
3. 小贴士

如果主目录中没有 "联系我们 " 表单的导航列，可按以下步骤添加：

步骤 1 : 销售渠道 > 线上网店 > 导航列

步骤 2 : 选择主目录 > 选择 **连接** 为导航列种类 > 将 URL 更改成 https:// > 在 **handle** 处输入 `apps/contact-form-plus` > 勾选 **导航列更新日期** 

**URL** = https://
**Handle** = 您的域名/apps/contact-form-plus

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-02-08-at-21524_f2m2jw.png)

步骤 4 : 单击 "保存 "即可完成！