Elementorでファイルアップロードフォームを作成する方法を学びたいですか?

おそらくご存知のとおり、Elementor のプロ版には、フォーム ウィジェットを作成するために使用できるフォーム ウィジェットが付属しています。 フォーム WordPress ウェブサイトで。 このウィジェットを使用すると、ほぼすべての種類の フォーム. このウィジェットで提供される約 19 のフィールド タイプがあります。 アップロード unfichier。

この記事では、ファイルアップロードフィールドで構成されるフォームを作成する方法を紹介します。

ただし、開始する前に、ElementorのバージョンをProバージョンにアップグレードしたことを確認してください。これも、FormウィジェットはElementorProでのみ使用できるためです。

次のガイドをお読みください。 WordPressにElementorをインストールする方法

まず、新しいページを作成するか、Elementorで公開および編集します。

フォームを追加するページの作成を開始する前に、まずレイアウトを設定します。 これを行うには、左パネルの左下隅にある歯車のアイコンをクリックします。 ドロップダウンメニューからお好みのレイアウトを設定します レイアウト.

Elementorの編集ボックスのプラスアイコンをクリックして、新しいセクションを追加します。 作成したいデザインコンセプトに基づいて、任意の構造を選択できます。 この例では、単一の列構造を選択します。

フォームウィジェットを左側のパネルからキャンバス領域にドラッグして追加します。

Elementorでフォームを作成する方法

デフォルトでは、名前、電子メール、メッセージのXNUMXつのフィールドで構成されるフォームがあります。 フィールドのxアイコンをクリックして、不要なフィールドを削除します。

この記事では、名前、電子メール、メッセージ、ファイルのアップロードの4つのフィールドで構成されるフォームを作成します。 フォームにはデフォルトで3つのフィールドしかないため、[ファイルのアップロード]フィールドに新しいフォームを追加する必要があります。

また読みます: ElementorフォームにreCAPTCHAを追加する方法

ボタンをクリックします アイテムを追加する 新しいフィールドを追加します。 フィールドのタイプを定義する アップロードファイル。 必須フィールドとして定義する場合は、オプションをアクティブにします 必須。 ドロップダウンメニューから最大ファイルサイズをに設定します 最大ファイルサイズ.

許可されるファイルタイプを定義するには、ファイル拡張子を入力します 許可されるファイルタイプ。 ファイル拡張子をコンマで区切ることにより、複数のファイルタイプを受け入れることができます。 訪問者が複数のファイルを送信できるようにする場合は、オプションをアクティブにします 複数のファイル ダウンロードできるファイルの最大数を設定します。

フィールドの順序を変更する場合は、各フィールドを上下にドラッグするだけです。 この例では、[ファイルのアップロード]フィールドを[メッセージ]フィールドの上に配置しています。

Elementorでファイルアップロードフォームを作成する方法

アクションの定義

Elementorフォームを フォームバックエンドサービス など getform ou フォームキャリー。 残念ながら、Elementorはフォームバックエンドサービスとの統合をサポートしていません。

方法を見つけます: Elementorでセクションを作成するために仕切りを追加する方法

したがって、この記事では、電子メールに対するアクションを定義します。 これは、フォームを介して送信された送信が、指定された電子メールを介して送信されることを意味します。

デフォルトでは、フォームアクションは電子メールに設定されていました。 オプションから確認できます 送信後のアクション。

次に、オプションを開きます 電子メール フォーム送信の送信先の電子メールアドレスを設定します。 電子メールの件名も定義します。

Elementorでファイルアップロードフォームを作成する方法

常にオプションの下で Eメール、 メール本文をオプションに設定 メッセージ

電子メールの本文をカスタマイズするには、本文に追加するフィールドのショートコードを貼り付けることができます。 あなたはタブでそれらを見つけることができます 高度 各フィールドの。

セクションでメールの本文のメタデータをカスタマイズすることもできます メタデータ. 含めたくないメタデータをすべて削除します。

Elementorでファイルアップロードフォームを作成する方法

メタデータ自体は、電子メールの本文の下に表示されます。

分野で メールから, 名前と返信から、空白のままにすることができます。

フォームのカスタマイズ

これまでのところ、フォームを公開する準備ができています。 公開する前に、フォームをカスタマイズしてより魅力的にすることができます。 デフォルトでは、フォームの各フィールドにラベルが含まれています。 オフにしたい場合は、 フォームフィールドオプション スー [コンテンツ]タブ。

より高度なスタイリングオプションを作成するには、タブにアクセスできます スタイル。 設定できるスタイリングオプションは次のとおりです。

  • 行とラベルのタイポグラフィの間のスペースを定義します

行(フィールド)間のスペースとラベルのタイポグラフィを定義するには、オプションを開くことができます 形。

セクションに行スペースを設定します 行ギャップ。 ラベルのタイポグラフィ(フォントサイズ、フォントスタイル、フォントファミリ)を定義するには、の鉛筆アイコンをクリックします。 タイポグラフィ セクションで ラベル

  • フィールドのタイポグラフィ、背景色、境界線の色、境界線の幅、境界線の半径を定義します

オプションを開くことができます フィールド コントロールのタイポグラフィ、コントロールの背景色、境界線の色、境界線の幅、境界線の半径を定義します。

Elementorでファイルアップロードフォームを作成する方法
  • カスタマイズボタン

ボタンをカスタマイズするには、オプションを開くことができます ボタン. そこから、背景色、テキストの色、タイポグラフィ、境界線の色、境界線の半径などを設定できます...タブに切り替えます ホバー ボタンのポインティングをカスタマイズします。

設定できるカスタマイズオプションは他にもいくつかあります。 フォームの外観に満足するまで、左側のパネルをいじってみることができます。 完了したら、ボタンをクリックできます PUBLISH フォームを公開します。

潜在的なエラー

フォームをテストすると、エラーメッセージが表示される場合があります。 以下はエラーの例です。

Elementorでファイルアップロードフォームを作成する方法

上記のエラーは通常、サービスを使用している場合に発生しますウェブホスティング 共有すること。 ほとんどのサプライヤーは、ウェブホスティング 共有無効化機能 php send_mail、 WordPress機能で使用されます wp_mail 電子メールを送信します。

Elementor Proを今すぐ入手!

まとめ

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

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

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

...