作成方法を知りたい お問い合わせフォーム エレメンターで?

連絡先ページは、Webサイトの重要なページのXNUMXつです。 Webサイトが承認されているかどうかのパラメータとしてよく使用されます。 Elementor ネイティブウィジェット(フォームウィジェット)が付属しており、ページにフォームを追加できます。 この記事ではその方法を説明します。

フォーム ウィジェット自体は、Elementor Pro でのみ使用できます。 つまり、まだ無料版を使用している場合は、プロ版にアップグレードする必要があります. フォーム ウィジェットを使用してフォームを作成できるだけでなく、 お問い合わせフォームですが、メール登録フォーム、ユーザー登録フォーム、 ファイルアップロードフォーム等...

Elementorでお問い合わせフォームを作成する方法

あなたが作成するとき お問い合わせフォーム Elementor のフォーム ウィジェットを使用して、フォーム データが送信される場所を設定できます。 電子メール アカウント内でも、Elementor のデフォルトのフォーム送信マネージャー内でも。

この記事では、フォームウィジェットをElementorの編集ボックスに追加することに直接ジャンプします。 次のように、ウィジェットパネルから編集ボックスにフォームウィジェットを追加するだけです。

ご覧のとおり、フォームウィジェットはXNUMXつのフィールドで構成されるフォームを自動的に作成します。

また読みます: Elementorで価格グリッドを追加する方法

既存のフィールドを編集するには、単にそれを開くことができます。 必要に応じて、フィールドタイプを変更し、デフォルトのラベルとプレースホルダーを上書きして、必須フィールドとして設定できます。

既存のフィールドを削除するには、をクリックするだけです。 X 削除するフィールドの。

新しいフィールドを追加するには、ボタンをクリックするだけです。 要素を追加します。 フォームウィジェット自体は、XNUMX種類のフィールドをサポートしています。

フォームアクションの定義

前に述べたように、フォームデータ(送信)を電子メールアカウントまたはElementorの組み込みフォーム送信に送信できます。 目的地を設定するには、ブロックを開くことができます アクションの送信後 タブの下 中身 設定パネルから。

参照してください: Elementorで丸みを帯びた画像を作成する方法

使用可能なフィールドで定義するアクションを選択します(複数のアクションを追加できます)。 この例では、 電子メール.

フォームアクションも設定した場合 電子メールで、 あなたはブロックを開くことができます 電子メール フォームデータを受信するための電子メールアドレスを定義します。 ご覧のとおり、必要に応じて件名を設定することもできます。

デフォルトでは、Elementorにはフォームのすべてのフィールドのコンテンツが含まれています。 特定のフィールドのコンテンツのみを含める場合は、優先フィールドのショートコードをフィールドに貼り付けることができます。 メッセージ

たとえば、以下の設定では、メッセージフィールドの内容のみが送信されます。

フィールドのショートコードを取得するには、タブをクリックします 高度 ブロックの関連フィールド フォームフィールド。

メッセージの定義

フォームデータが正常に送信されると、訪問者にはフォームの下に成功メッセージが表示されます。 同様に、フォームデータが送信されない場合にもエラーメッセージが表示されます。

また見なさい: Elementorでチームメンバーセクションを作成する方法

これらのデフォルトメッセージと他のXNUMXつのメッセージをブロックから上書きできます 追加オプション タブの下 中身 設定パネルから。 をアクティブにします カスタムメッセージ デフォルトのメッセージを上書きします。

Elementorでお問い合わせフォームを作成する方法

フォームのカスタマイズ

基本設定が完了したら、 [コンテンツ]タブ 設定パネルから、に切り替えることができます 形式 フォームをカスタマイズします。 ここで開くことができるブロックはXNUMXつあります。

  • フォーム

このブロックを開いて、フォームの列と行の間のスペース、ラベルの間隔、フォームラベルのタイポグラフィ(フォントファミリ、フォントサイズ、フォントスタイルなど)、およびフォームラベルのテキストの色を定義できます。

  • フィールド

このブロックを開いて、フィールドのテキストのタイポグラフィ、フォームフィールドの色、背景色、サイズ、境界線の色、およびフォームフィールドの境界線の半径を定義できます。

  • ボタン

このブロックを開いて、送信ボタンをカスタマイズできます。 ボタンのテキストのタイポグラフィ、色、背景色、境界線の半径、境界線のサイズ、境界線の色、テキストの塗りつぶしなどを設定できます。 ボタンのサイズを設定するには、ブロックから行うことができます ボタン スー [コンテンツ]タブ。

  • メッセージ

このブロックを開いて、メッセージのテキストのタイポグラフィと色を定義できます。

  • ステップ

このブロックを開くことができるのは、マルチステップフォームを作成する場合のみです。

フォームとページのカスタマイズが完了したら、ページを公開できます。

潜在的なエラー

フォームアクションをに設定するときによくある間違いのXNUMXつ 電子メール フォームが送信されないということです。 代わりに、次のメッセージが表示されます。

Elementorでお問い合わせフォームを作成する方法

Elementorおよびほとんどの連絡フォームプラグイン(連絡フォーム7を含む)は、WordPressのデフォルトのメール配信機能を使用します。 wp_mail。 この機能は機能に依存します send_mail これはPHPが機能するかどうかに依存します。

また読む: Elementorに紹介文スライダーを追加する方法

残念ながら、すべてのプロバイダーは、ウェブホスティング 機能を有効にしないでください send_mail PHPの。 その場合、フォームは送信されません。 代わりに、上記のようなエラーメッセージが表示されます。

この問題を解決するには、WordPressにカスタムメール配信サービスをインストールして構成します。 または、可能であれば、ホスティングプロバイダーに機能を有効にするよう依頼することもできます send_mail PHPの。

最後に

Elementorは、最も包括的なページビルダープラグインのXNUMXつです。 お問い合わせフォームなど、ページに要素を簡単に追加するための多数のデザイン要素(ウィジェットと呼ばれる)が付属しています。

フォーム ウィジェットを使用して、独自のデザインで最初から連絡先フォームを作成することもできますが、Elementor には、使用できるフォーム テンプレートも用意されています。 あなたもできる お問い合わせページを作成する (もちろん、お問い合わせフォームを完備してください)テンプレートから。

Elementor Proを今すぐ入手!

まとめ

ここは ! Elementorでお問い合わせフォームを作成する方法を示すこの記事は以上です。 そこへの行き方に不安がある場合fでお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...