WordPressでHTMLフォームを追加してカスタマイズする方法：詳細なチュートリアル

HTMLフォームとは？なぜ必要なの？

HTML フォームとは、ユーザーがデータを入力・送信できるエリアのことで、一般的に名前、メールアドレス、フィードバック、注文情報などのユーザー情報を収集するために使用されます。WordPress のフォームプラグインとは異なり、HTML フォームは手動で HTML コードを記述することで実装されるため、より多くの制御とカスタマイズが可能です。HTML フォームでは、テキストボックス、チェックボックス、ラジオボタンなどのフィールドを自由に設定でき、フォームのレイアウトやスタイルも制御できます。

HTMLフォームを使用する利点

1. パフォーマンス最適化HTMLフォームは、高いパフォーマンスが要求されるサイトのための、軽量で高速にロードされるコードです。
2. トータルコントロール手書きHTMLコードは、フォームの外観と機能を正確にコントロールします。
3. 柔軟なカスタマイズHTMLフォームは、プラグインによる機能制限を受けることなく、お客様のニーズに合わせて柔軟にカスタマイズすることができます。

WordPressにHTMLフォームを追加する2つの方法

方法 1: HTML Forms プラグインを使う

コーディング経験のないユーザーにとっては、HTMLフォームプラグインを使うのが最も簡単な方法です。もし HTMLフォーム プラグインです。このプラグインを使うと、WordPress のダッシュボードでフォームを素早く作成・設定することができます。

ステップ

1. プラグインのインストールWordPressのダッシュボードからプラグインリポジトリに移動し、以下のプラグインを検索してインストールします。 HTMLフォーム プラグイン。

2. 新しいフォームの作成プラグインを有効化した後、次の場所に移動します。 HTMLフォーム > 新しいフォームの追加フォーム名がある場合は、フォーム名（例："Example Form"）を入力し、""をクリックします。フォームの作成".

3. フォームフィールドの設定: 編集ページでは、タブを使ってフォームにテキスト、日付、チェックボックスなどのフィールドを追加することができます。フィールドの順序を変更したり、不要なフィールドを削除して、フォームのレイアウトが期待通りになるようにします。

4. ポスティングフォーム変更を保存した後ショートコードフォームをページや記事に挿入し、ページを公開すると、フロントエンドでフォームの効果を見ることができます。

注目してください：HTMLフォームはメールマーケティングサービスとの統合をサポートしていません.そのため、ユーザーのメールアドレスを手動でメーリングリストに追加する必要があります。

方法 2: WPForms を使用して WordPress のフォームにカスタム HTML を追加します。

WPFormsはフォームにカスタムHTMLコードを追加したい場合に理想的な選択肢です。WPFormsはドラッグアンドドロップでフォームを作成できますが、HTMLコードのスニペットをフォームに挿入することができます。

ステップ

1. WPFormsプラグインをインストールします。WordPressのプラグインリポジトリを検索してインストールします。 WPForms プラグイン。

2. 新しいフォームの作成プラグインを有効化した後、次の場所に移動します。 WPForms > 新規フォームの追加Simple Contact Form" テンプレートを選択します。

3. HTMLフィールドの挿入フォームビルダーで、左のパネルからドラッグアンドドロップ"HTML "フィールドをフォームに追加します。ツールチップや特別な指示などのカスタムコードスニペットをこのフィールドに追加することができます。

4. カスタムフォーム設定: 通知メッセージと確認メッセージを設定し、ユーザーがフォーム送信後にEメール通知を受け取れるようにし、フォーム確認ページにカスタムメッセージを表示します。
5. ポスティングフォームWPForms フォーム埋め込みページまたは記事を更新して、ページを公開します。

カスタムHTMLページをWordPressにアップロード

静的テンプレートや古いウェブサイトのページなど、完全なHTMLページがある場合、アップロードするには HTMLページWordPressで表示するにはHTMLファイルと関連するCSSファイル、画像ファイルをフォルダに入れ、WordPressのルートディレクトリにアップロードするだけです。