Elementorを使用して問い合わせフォームを作成する方法

Elementorを使用して問い合わせフォームを作成する

Elementor を使用して問い合わせフォームを作成するには、Elementor Pro のフォーム ウィジェットを使用します。。フォーム ウィジェットをエディタ パネルからページにドラッグするだけです，次に、コントロールを使用して、Web サイト上に美しく応答性の高いフォームを作成します。。

フォームを編集する

エディタパネル内，フォームでキャプチャしたいすべてのフィールドを作成および編集できます。フォーム ウィジェットは最も一般的なフィールド タイプをサポートします，たとえばテキスト、テキストエリア、単一のボタン、セレクターなど。必要に応じて，これらのフィールドを必須にすることもできます。

列幅のレイアウトを設定することで、同じ行のフィールドを使用するようにフォームのスタイルを設定できます。。 

フォームコンテンツのコンテンツ設定

フォームフィールド

Elementor フォーム ウィジェットのこのセクションでは、フォームに含まれる各フォーム フィールドを追加および管理できます。。コンテンツを手動で追加する代わりに，多くのオプションでは動的タグも使用されます。これらのタグを使用すると、WordPress データを取得できます。，または、プラグイン ソース (高度なカスタム フィールドなど) または WooCommerce 製品からデータを取得します。動的データを使用できる項目には、フィールド入力の横に「スタック」アイコンが表示されます。。

フォーム名– フォームに名前を付けます。

フォームフィールド– フォーム内のフィールドのリスト。必要に応じてコピーできます、フィールドの追加または削除。ドラッグアンドドロップして順序を変更できます。

フィールドをクリックしてその設定を表示します。

1. タイプ– 必要なフィールドの種類を選択します
2. ラベルlabel – フィールドの名前，ユーザーから受け取るフォームやメールに表示されます。
3. プレースホルダープレースホルダー – フィールドのフロントエンド表示名。
4. 必須– オンにするとフィールドが必須になります。
5. 列幅– フィールドの幅を設定できます。1 行に 2 つのフィールドがあるテーブルが必要な場合 – 各フィールドを次のように設定します 50%。

フィールドタイプ

1. 文章– 単純なテキストフィールド。つまり名前
2. Eメール– 電子メールの種類。メール認証が含まれます
3. テキストエリア– テキストエリアの種類。行数を設定できます
4. URL – ウェブサイト URL フィールド
5. 電話番号 – 電話番号の種類
6. 無線ラジオ - 無線タイプ。単一の選択。インラインリストをスライドさせて水平方向のスタイルを設定できます
7. 選ぶ- タイプを選択してください。オプションドロップダウンリスト。複数選択に設定可能。
8. チェックボックス– チェックボックスの種類。1 つ以上のオプションをチェックします。インラインリストをスライドさせて水平方向のスタイルを設定できます。
9. 受け入れる– ユーザーが同意する条件チェックボックスを追加します
10. 番号 – 数値型
11. 日付– 日付ピッカーフィールドを追加
12. 時間– 時間ピッカーフィールドを追加
13. ファイルのアップロード– ユーザーがファイルをアップロードできるようにする
14. パスワード– パスワードフィールドを追加
15. HTML – HTMLフィールドの追加
16. 隠れる– 隠しフィールドを追加する。ユーザーからは隠されています，ただし管理者には表示される
17. 再キャプチャ – reCAPTCHAを追加。reCAPTCHA はユーザーがロボットではないことを検証します
18. 蜂蜜の瓶ハニーポット- フォームにハニーポットを追加する（強調）。ハニーポットは隠しフィールドです，フォームに記入するスパムボットのおとりとして機能するように設計されています。このフィールドは人間には見えません，だから彼らはそれを埋めないだろう。ロボットはフィールドが非表示であることを認識できないため、，それで埋められます。送信時にハニーポットフィールドが空でない場合，その場合、フォームは明らかにボットによって埋められたスパム送信です。，自動的に拒否されます。

送信ボタン ボタン

1. サイズ– 送信ボタンのサイズを設定する
2. 列幅 – ボタンの幅を設定します
3. 位置合わせ——アライメントを設定する

ステップボタン

1. 次のステップ：表示したいテキストを入力してください
2. 前の：表示したいテキストを入力してください

送信ボタン

1. 提出する：「送信」ボタンに表示されるテキストを選択します
2. アイコン– Font Awesome アイコン リストからアイコンを追加するか、カスタム SVG をアップロードします
3. ボタンID：フィールドに値を入力してボタンに ID を割り当てます。

送信後のアクション

ユーザーがフォームを送信した後，じゃあ何？

初めてフォームを設計する人にとってよくある質問は次のとおりです。：「Elementorフォームを設定しました，しかし、送信しても何も起こりません。なぜ？」

答えは通常、：「送信後のアクションをまだ設定していません。」

Elementor フォームを送信した後，1 つ以上のアクションを実行する必要があります，各操作には少量のセットアップが必要です。一般的な操作には次のようなものがあります。：

• フォームの結果を 1 つ以上の電子メール アドレスに電子メールで送信する。
• ユーザーを「ありがとう」ページにリダイレクトします。
• ニュースレター自動応答サービスに購読者情報を追加する
• 将用户信息添加到 CRM
• 将表单数据发送到 Slack 或 Discord 频道
• 打开或关闭弹出窗口。

Elementor 表单操作为您提供强大的选项。您可以连接第 3 方服务（例如 Mailchimp、Drip、Hubspot、Slack 或 Convertkit）来处理表单信息。Elementor 内置了这些以及其他几个服务集成，但您不仅限于仅使用内置集成进行连接。フォームは Webhook アクションを介して Zapier などのサービスに接続することもできます。ザピアの接続先 1000 他にもたくさんのサービス，フォームとこれらのサービスの間の橋渡しとして機能します。Zapier で Elementor を使用するための詳細なガイドについては、こちらをご覧ください。。

提出後の操作を詳しく解説

「アクションの追加」フィールド内をクリックして、新しいアクションを追加します。。これにより、選択可能なアクションのリストが表示されます。

結果を電子メールで送信する

電子メールアクションを選択してください。これにより、メールタブが追加されます。

「電子メール」タブをクリックしてオプションを開きます。

1. 受信者：フォーム送信結果が送信されるメールアドレス。追加の電子メール アドレスをカンマで区切って追加します。
2. メールの件名：メールの件名
3. メール内容：电子邮件的正文。デフォルトでは，所有表单字段都通过短代码发送：[all-fields]。想要自定义发送哪些字段？复制您要发送的字段中显示的短代码并将其粘贴到此处。
4. 发件人电子邮件：“发件人”电子邮件地址
5. 发件人姓名：“发件人”姓名
6. Reply-To：发送回复的电子邮件地址
7. 抄送: 抄送电子邮件地址
8. 密件抄送：密件抄送的电子邮件地址
9. 元数据：默认情况下包含可用的元数据。单击每个上的“x”可删除您不希望包含在电子邮件中的任何内容。
10. 发送方式：选择发送电子邮件的格式，HTML 或纯文本

向提交表格的用户发送确认电子邮件（重点）

配置电子邮件2

电子邮件2非常有用。例えば，它可能是您网站的访问者在您的网站上发送表单后立即收到的确认电子邮件。

要创建电子邮件，请执行与上述电子邮件相同的过程。

知らせ：在“收件人”字段中，您应该输入电子邮件字段高级选项卡中的短代码[field id="email"]。

提示：您可以使用提交者的名字 ( ‘Howdy [field id="name"]’) 来个性化确认电子邮件。

以下は、HTML1 を使用して電子メール コンテンツ全体を構築する方法の例です。：

<p>
     <p>You got a new message!</p>
</p>
<p>
     <p>Username: [フィールドID="名前"]<br />
</p>
<p>
     <p>Email:  [フィールドID="Eメール"]<br />
</p>
<p>
     <p>Phone:  [フィールドID="電話番号"]<br />
</p>
<p>
     <p>Message: [フィールドID="メッセージ"]</p>
</p>
<p>
     <p>Don’t forget to call them back soon 🙂 </p>
</p>

HTML の例 2

<h1>新しい結婚式を計画しているんですね。</h1>

<p>[フィールドID=”名”] 結婚式の計画について連絡してほしいのですが [フィールドID=”イベント日付”] で [フィールドID=”場所”].</p>

<p>これまでのカップルのビジョンと計画は次のとおりです:<br>

[フィールドID=”メッセージ”] </p>

<h2>連絡先</h2>

<ウル>

<リー>ファーストネーム: [フィールドID=”名前”]</リー>

<リー>苗字: [フィールドID=”姓”] </リー>

<リー>電子メールアドレス: [フィールドID=”メールアドレス”] </リー>

<リー>電話番号: [フィールドID=”電話”]</リー>

</ウル>

<p><強い>イベント頑張ってね!</強い></p>

知らせ：フォームフィールドウィジェットの「詳細」タブにあるショートコードのみを使用できます。。ここ以外の場所ではショートコードを使用できません。他のプラグインまたは他の場所から他のショートコードを追加すると、サーバー エラー メッセージが表示されます。。ショートコードは、フォームフィールドの「詳細」タブに表示されているとおりに正確に記述する必要があります。。

フォームにテンプレートを追加

今，我们可以使用控件中的电子邮件选项将此 HTML 添加到表单中。将 HTML 粘贴到消息字段中，替换 [all-fields] 默认值。确保在控件底部附近启用了“以 HTML 形式发送”选项。

重要的！ フォームフィールドウィジェットの「詳細」タブにあるショートコードのみを使用できます。。ここ以外の場所ではショートコードを使用できません。他のプラグインまたは他の場所から他のショートコードを追加すると、サーバー エラー メッセージが表示されます。。ショートコードは、フォームフィールドの「詳細」タブに表示されているとおりに正確に記述する必要があります。，但有一个例外。如果高级选项卡中的简码格式为 [field id=email]，则必须将字段名称用引号引起来，因此您需要将 [field id=email] 更改为[field id="email"]。

重定向至感谢页面

选择重定向操作。这将添加一个“重定向”选项卡。

单击“重定向”选项卡打开其选项。

1. 重定向至：输入表单提交后重定向用户的页面 URL。

将订阅者添加到新闻通讯电子邮件营销服务或将用户信息添加到 CRM

选择任何第三方服务。这将为该服务添加一个新选项卡。

单击所选服务的选项卡以打开其选项。

1. API 密钥：在此处输入所选服务的 API 密钥。您必须首先在集成设置中设置 API 凭据。您还可以通过选择“自定义”来设置不同的 API 凭据。
2. 列表/帐户：选择要将表单信息发送到的列表或帐户。

使用 Zapier 将您的表单连接到数千种其他服务中的任何一个

选择 Webhook 操作。

单击 Webhook 选项卡打开其选项。

1. Webhook URL：输入将接收表单提交数据的集成 URL（如 Zapier）。
2. Advanced Data：滑动到 YES 将高级数据发送到 webhook，其中将包括日期和时间、远程 IP 等元数据。它还会将数据作为数组发送，例えば：[ ‘Name’ => ‘ John Doe’, ‘Email’ => ‘ john@doe.com ‘, ‘Message’ => ‘请联系我’ ]如果 Advanced Data 设置为 NO，则数据将以 Simple 形式发送，即发送表单将字段作为文本消息发送到 Webhook，例えば：“姓名：John Doe，Eメール：john@doe.com，消息：请联系我。」

将表单数据发送到 Slack 通道

选择 Slack 操作。这将添加一个新的 Slack 选项卡。

单击 Slack 打开其选项。

有关更多详细信息，请参阅Slack 集成文档。

打开或关闭弹窗

提交表单后可以打开或关闭弹出窗口。

选择弹出操作。这将添加一个弹出选项卡。

单击弹出窗口打开其选项

1. 選ぶ“打开弹出窗口”以选择提交表单后将打开的弹出窗口。输入一个或多个字符以生成可供选择的可用弹出窗口的下拉选项。
2. 選ぶ关闭弹出窗口可在表单提交后关闭当前弹出窗口。您还可以将弹出窗口设置为Don’t Show Again。

表单的邮箱设置

表单小部件电子邮件设置允许您指定表单发送到的位置并自定义发送的数据。

除了手动添加表单的电子邮件设置之外，这些选项还使用动态标签。これらのタグを使用すると、WordPress データを取得できます。，或从插件源（例如高级自定义字段）检索数据。動的データを使用できる項目には、フィールド入力の横に「スタック」アイコンが表示されます。。

設定

1. To 受信者：输入表格收件人的电子邮件地址（两个用逗号隔开）
2. Subject テーマ：输入您希望在电子邮件主题中显示的文本
3. Message 消息：在这里您可以使用フォームフィールド的短代码来创建表单发送的消息。默认情况下使用“所有字段”选项。在本教程中了解如何为表单创建自定义消息
4. From Email 发件人电子邮件：输入发件人地址或使用norepy@
5. From Name 发件人姓名：输入您希望在电子邮件中显示的姓名、职位或公司
6. Reply To 回复：输入发件人地址或使用norepy@
7. Cc 抄送：输入要抄送的收件人的电子邮件地址（抄送）
8. Bcc 密件抄送：输入要密件抄送的收件人的电子邮件地址（密件抄送）
9. Meta Data 元数据：您可以在此处添加或删除显示在表单底部的其他元数据。默认显示所有选项
10. Send As 发送为：在下拉列表中，选择是否以 HTML 或纯文本形式发送表单。

多步骤表格设置Steps setting

多步骤表单允许您创建具有多个步骤的表单，以便用户填写一些字段，单击“下一步”，再填写一些字段，单击“下一步”或“上一步”等，直到完成最后一步，此时可以提交表格。

附加选项 – 表格

1. 表单 ID – 设置表单 ID。
2. 自定义消息– 滑动“自定义消息”按钮以自定义表单中的消息（例如成功消息、错误消息等）。 

知らせ：自定义消息不是服务器提供的标准消息。标准服务器消息无法控制或定制。用户很少会看到这些自定义消息。当存在阻止发送表单的服务器冲突时，有时可能会生成自定义消息。另请注意，自定义消息是浏览器不显示其自身错误时的后备消息。

表单Style样式

表单表格Form样式

1. 列间隙 – 设置列之间的空间
2. 行间隙 – 设置行之间的间距
3. ラベル– 设置标签的间距、标签颜色和版式。
4. HTML 字段 – 设置表单上 HTML 字段（如果存在）的间距、颜色和排版。

表单风格Field设置

您可以轻松设置表单字段的颜色、字体和边框的样式

1. 文本颜色– 设置输入文本的颜色（用户填写的文本）
2. 版式– 设置输入文本的版式
3. 背景色– 设置字段的背景颜色
4. 边框颜色– 设置字段的边框颜色
5. 边框宽度– 设置字段边框的宽度
6. 边框半径– 设置边框的半径

表单按钮button样式

您可以设置 提交按钮的正常そして悬停 状态的样式。

1. 背景色 – 设置背景颜色
2. 文本颜色 – 设置文本的颜色
3. 版式– 设置文本的版式
4. 边框类型 – 在不同的边框样式之间进行选择。
5. 边框宽度 – 如果设置了边框，则设置字段边框的宽度
6. 边框颜色 – 设置字段的边框颜色
7. 边框半径 – 设置边框的半径
8. 文本填充 – 设置文本的填充

表单消息messages样式

您可以设置提交表单后向用户显示的消息的样式。

1. 版式：设置消息文本的版式。
2. 成功消息颜色：选择成功消息的颜色
3. 错误消息颜色：选择错误消息的颜色。
4. 内联消息颜色：选择内联消息的颜色。

Form Submissions 表格提交

借助 Elementor 表单提交功能，您可以备份表单提交数据、随时访问并从一个位置管理所有数据。有了您的提交信息，您可以收集见解、分析活动数据，或者只是在 WordPress 仪表板中管理您的提交。

知らせ：这是一个实验。确保在エレメンター >設定>实验选项卡下将其打开。

1. 创建新页面或编辑现有页面，次にクリックします“使用 Elementor 编辑”
2. 将表单小部件拖到您的页面
3. デフォルトでは，“提交后的操作”部分包括“收集提交内容”オプション
   
4. 要查看收集的提交内容，请转至エレメンター >提交内容
   
5. 单击可查看、編集、删除任何表单提交并将其“标记为已读”

知らせ：这不适用于旧表单，要启用此功能，只需将其添加到“提交后的操作”下

导出提交内容

您可以通过以下方式导出您的提交内容：页面名称、フォーム名、时间范围和全部。クリック“全部导出至 CSV”以导出您选择的提交内容。

出现服务器错误或表单不发送电子邮件？

如何解决 WordPress 无法通过表单发送电子邮件和“服务器错误”问题。。

初め，在您的 WordPress 网站上运行测试，看看它是否可以发送电子邮件。

要确认电子邮件的送达能力，您可以使用任何 SMTP 插件并选择不同的 SMTP 服务器（例如 SendGrid）来检查其是否正确送达。如果它与其他协议正常工作并显示默认 SMTP 错误，则需要将其报告给托管。

为什么会出现此服务器错误？

Elementor 使用 WordPress 的 wp_mail 函数发送电子邮件。您的网络主机接收已发送的电子邮件，对其进行处理并发送。90%的问题都发生在这里。

時々，托管服务器会禁用用于发送电子邮件的 PHP 功能。他们基本上会阻止您的电子邮件。

这样做通常是为了确保您不会通过您的站点发送垃圾邮件（您的主机不希望您将其服务器用作垃圾邮件服务器）。

从技术上讲 – wp_mail 函数默认使用 PHP send_mail 函数。但如果在该服务器上禁用它，则电子邮件发送失败。要解决此问题，请联系您的托管服务并请求他们启用它，或者改用 SMTP 服务器。

SMTP 到底是什么？

SMTP 代表“简单邮件传输协议”。SMTP 是一种电子邮件服务器，它将表单中的电子邮件路由到列出的客户的收件箱中。它是一个外部电子邮件服务器（例如，Gmail 可以用作 SMTP 服务器），有助于确保您的电子邮件更快地送达，并有助于防止您的电子邮件最终进入用户的垃圾邮件文件夹。

尝试使用任何流行的 SMTP 插件 ( https://wordpress.org/plugins/search/SMTP/ )。

有关服务器错误的更多故障排除提示

除了联系您的主机提供商之外，您还可以尝试执行以下几个步骤来解决此问题：

1. 表单的发件人电子邮件地址通常需要来自与您的网站相同的域。したがって，如果您的网站是 example.com，那么您需要使用admin@example.com或bob@example.com等发件人电子邮件地址。您可以使用回复字段选择访客的电子邮件地址进行回复根据用户的要求。
2. あなたはそれを使うことができますElementor 表单提交功能来检查表单是否正常运行。
3. 使用其他电子邮件地址（您的电子邮件可能被注册为垃圾邮件）。为了避免被标记为垃圾邮件，请尝试更改电子邮件主题行的长度（更短或更长）。
4. 如果您正在使用任何第三方集成，请尝试禁用它们。例えば，MailChimp 或 ActiveCampaign。如果这成功了，请阅读我们的集成指南中的更多内容。基本上，您必须检查自动回复帐户和表单小部件内的字段映射。确保您没有在表单小部件中将必填字段设置为“无”。另请确保您没有在 MailChimp 帐户的字段映射设置中添加“地址”字段或“生日”字段
5. 如果提交表单后页面刷新，通常是由于插件或主题代码冲突。この場合，请停用除 Elementor 和 Elementor Pro 之外的所有插件，并检查电子邮件是否正确发送。これがうまくいかない場合，请切换到 WordPress 的默认主题并检查是否可以解决问题。
6. 确保表单字段的 ID（在字段的“高级”选项卡中）已填充；如果没有有效的字段 ID，如果使用“[all-fields]”短代码，则在发送给提交内容接收者的电子邮件中将看不到表单字段值。
7. 确保您对电子邮件框中的每个字段使用正确的短代码，如“高级”选项卡中所示。

高级Advanced设置

Layout设置

1. 边距– 设置表单的边距
2. 填充– 设置表单的填充
3. Z-Index – 设置表单的 Z-index
4. CSS ID – 设置表单 ID
5. CSS 类– 设置表单类

运动效果Motion Effects

移動効果 是一组功能强大的控件，用于为您的设计添加漂亮的过渡和动画。

これまでのところ，想要合并动画和运动效果的网页设计师需要使用外部库和/或自定义代码。

滚动效果Scrolling Effect

 当用户滚动页面时，使用滚动效果创建令人惊叹的动画和交互。以下是滚动效果列表：

垂直滚动Vertical Scroll

这就是您一直在等待的经典视差效果。垂直滚动使元素在滚动时以与页面不同的速度移动，按照您选择的方向和速度。

水平滚动Horizontal Scroll

水平滚动意味着当访问者上下滚动时，元素相应地左右移动。使用示例 – 当访问者向下滚动时，带有云的部分会向右移动。

透明度Transparency

透明度可让您逐渐使元素变得更加透明或更明显，与访问者的滚动相关。一个例子是标题出现然后根据卷轴消失。

有4种可能的效果方向：

淡入 ——意味着元素开始是透明的，然后逐渐变得可见。

淡出 – 元素一开始是可见的，然后逐渐变得透明。

淡出 – 元素开始时可见，然后淡出，然后再次变得可见。

淡入淡出 – 元素开始时是透明的，然后变得可见，然后再次透明。

模糊Blur

此设置与透明度类似，只是元素变得模糊而不是透明度。一个很好的例子是背景图像，只有当用户向下滚动时才会获得正确的焦点。

旋转Rotate

ここにあります，元素随着您滚动而旋转。下图中恒星的旋转就是一个很好的例子：

知らせ： X 和 Y 锚点这两个设置 确定元素缩放或旋转的轴。如果将方向设置为左上，则旋转将围绕元素的左上角进行。如果设置方向为center-center，则旋转将围绕其中心旋转，就像轮子一样。此设置仅与上面的“旋转”效果以及下面列出的“缩放”效果相关。

规模Scale

缩放可让您根据滚动来放大和缩小元素。例：滚动时变大的背景。

知らせ：使用“将效果应用到”来确定是否将运动效果应用到移动设备、台式机或平板电脑上。鼠标效果只会影响桌面设备。

鼠标效果Mouse Effects

鼠标轨迹Mouse Track

通过使元素随着访问者的鼠标移动而移动，创造一种深度感。

3D倾斜3D Tilt

与鼠标轨迹相对于鼠标移动来移动元素的方式类似，3D 倾斜效果根据光标的相同移动来倾斜元素。

运动效果浏览器兼容性

表格背景form background

您可以设置表单背景的“正常”そして“悬停”状态的样式。

1. 背景类型– 选择经典和渐变
2. 色– 设置颜色
3. 写真– 上传背景图片
4. 位置– 背景图像的位置选项
5. 付録– 选择滚动或固定
6. 重复– 设置图像重复属性
7. サイズ– 设置图像背景的大小

表格边框 Form border

您可以设置表单边框的“正常”そして“悬停”状态的样式。

1. 边框类型– 选择不同的边框样式
2. 宽度– 设置表单边框的宽度
3. 色– 设置表单边框的颜色
4. 边框半径– 设置边框的半径
5. Box Shadow – 为表单设置阴影

表单错误消息集合一览

表单错误消息 – X 错误

在您的网站上填写表格时，您可能会遇到以下错误消息：“x”错误。

当某些字段 ID 为空时，可能会出现此错误

请打开表单设置，选择每个字段，然后切换到“高级”选项卡。如果您发现ID选项为空，请尝试输入一个值（这必须是表单内其他任何地方未使用的唯一 ID 值）。  

表单错误消息 – 此错误对于网站访问者来说是不可见的

在您的网站上填写表单时，您可能会遇到以下错误消息：“This Error Is Not Visible For Site Visitors. 此错误对于网站访问者来说不可见。」

当 Elementor 和 MailChimp 之间的字段映射存在问题时，通常会弹出此错误：

表单错误消息 – 表单无效

在您的网站上填写表格时，您可能会遇到以下错误消息：““an error occurred” / “there is something wrong the form is invalid. 发生错误”/“出现问题，表格无效。」

当某些字段 ID 为空时，通常会发生这种情况。

请打开表单设置，选择每个字段，然后切换到“高级”选项卡。如果您发现ID选项为空，请尝试输入一个值（该值必须是表单中其他任何地方未使用的唯一 ID 值）。 

其他潜在原因：

– 两个字段具有相同的 ID。

– 集成无法正常工作。要确认这一点，您可以取消与电子邮件营销服务的集成。

– 用于集成的字段映射尚未正确完成。