AI要約
WordPressのコンタクトフォームにカスタムHTMLコードスニペットを追加したいですか？フォームにカスタムHTMLを追加することは、創造性を発揮し、フォームを強化するための素晴らしい方法です。
それを実現する最も簡単な方法は、WPFormsのHTMLフィールドを使用することです。フィールドをフォームに追加し、コードを貼り付けて保存します。テーマファイルを編集したり、別のプラグインをインストールしたりする必要はありません。
このチュートリアルでは、WPFormsのインストール、フォームの作成、HTMLブロックの追加、コードの貼り付けについて説明します。すぐに使用できるコピー＆ペースト用のHTMLスニペットもいくつか紹介します。
WordPressフォームにカスタムHTMLを追加する方法！🙂
お問い合わせフォームにカスタムHTMLを追加する理由
WordPressフォームにHTMLを追加する理由について疑問に思っているかもしれません。多くの場合、上級ユーザーやウェブ開発者はフォームの機能を拡張したいと考えるでしょう。
フォームにカスタムHTMLを追加する主な利点の1つは、フォームを他のコンテンツから際立たせることができることです。
以下の例では、お問い合わせフォームのテキストにプライバシーポリシーへのリンクを簡単に追加する方法を確認できます。
したがって、訪問者がお問い合わせフォームのあるページにアクセスすると、以下のようなものを見ることができます。
また、カスタムHTMLコードを使用してフォームに画像を追加し、フォームをより視覚的に魅力的にしたり、製品やカスタム製品オプションを紹介したりすることもできます。
これらの追加機能をフォームに追加することで、ページ上でフォームを際立たせることができ、訪問者の注意を引くのに役立ちます。
WordPressのお問い合わせフォームにカスタムHTMLコードを追加する方法
また、WordPressでフォームにHTMLコードを追加するために必要なすべての手順を説明したビデオを以下に共有しました。
チュートリアルを読むことを希望する場合は、これらの手順に従って、カスタムHTMLコードを配置する場所をフォームに作成してください。
ステップ1：WPFormsプラグインをインストールする
始めるために最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。これは使いやすいフォームビルダーで、シンプルなフォームから高度なフォームまで作成できます。
WPFormsが際立っているのは、カスタムHTMLの処理方法です。他のフォームビルダーが追加できるものを制限するのとは異なり、WPFormsはすべてのHTMLコンテンツを安全かつ機能的に保ちながら、完全に制御できます。
HTMLフィールドはWPFormsのFancy Fieldsコレクションの一部です。これは、アクセスするには少なくともBasicプランが必要であることを意味します。プラグインのダウンロードが初めての場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
ステップ2：フォームを作成し、基本的なフィールドを追加する
次のステップは、最初のフォームを作成することです。カスタムHTMLを追加したいフォームはどれでも選択できますが、この例ではWPFormsチャレンジを使用してシンプルな連絡フォームを作成します。
後で見つけやすいように、「カスタムHTML付き連絡フォーム」のような説明的な名前をフォームに付けます。テンプレート（例：シンプルな連絡フォーム）から始めると時間を節約できます。
フォームビルダーに入ると、左側にフィールドオプション、右側にフォームプレビューが表示される使い慣れた設定が表示され、名前、メールアドレス、メッセージなどの重要なフィールドが既に追加されています。
これにより、カスタムHTML要素を追加する前に、作業のしっかりした基盤ができます。素晴らしい。次に、カスタムHTMLを受け入れるフィールドを追加しましょう。
ステップ3：フォームにHTMLブロックを追加する
いよいよフォームにカスタムHTMLを追加する楽しい部分です。フォームビルダーの左側にあるFancy FieldsセクションのHTMLフィールドを探し、フォームプレビューエリアにドラッグします。
HTMLフィールドは、フォーム構造内のどこにでも配置できます。カスタムコンテンツを表示したい場所に配置することがよくあります。
ウェルカムメッセージのために上部、区切り線としてフィールドセクションの間、または追加情報のために下部に配置することもできます。
ステップ4：カスタムHTMLコードを挿入する
連絡フォームにカスタムHTMLボックスが追加されたので、カスタムHTMLコードスニペットを追加できます。右側のフォームに移動し、追加したばかりのHTML /コードブロックフィールドをクリックしてください。
次に、左側のパネルに移動すると、フィールドオプションの下にHTMLコードボックスが表示されます。ここにカスタムHTMLコードスニペットを追加できます。
では、そのフィールドにカスタムHTMLを貼り付けてください。フォームに任意の種類のカスタムHTMLコードスニペットを追加できます。完了したら、右上隅の保存ボタンをクリックします。
ステップ5：カスタムHTMLフォームを公開する
フォームを公開する前に、カスタムHTMLが正しく表示され、フォームの送信に干渉しないことを確認するために、すべてをテストする必要があります。
フォームビルダーの「プレビュー」ボタンをクリックすると、訪問者にフォームがどのように表示されるかを正確に確認できます。すべてが期待どおりに機能したら、ウェブサイトに追加できます。「埋め込み」ボタンをクリックしてください。
次に、「ページに埋め込む」通知が表示されたら、「新規ページを作成」ボタンをクリックします。次に、WPFormsがページの名前を尋ねます。
例として、このカスタムHTMLのお問い合わせフォームをお問い合わせページに追加するので、「お問い合わせ」と名付けます。ページに付けたいタイトルをボックスに入力し、「開始！」をクリックします。
これで、カスタムHTMLのお問い合わせフォームが表示された真新しいページが表示されます。ページ右上にある「公開」ボタンをクリックできます。
そして、新しいフォームをちらっと見てください。完了です。カスタムHTMLフィールドを使用してWordPressのお問い合わせフォームの設定を完了しました。
WordPressフォームにカスタムHTMLを追加する方法！🙂
コピー＆ペーストできるHTMLコード例
私がよく使うアイデアをいくつか、実際のコードとともにご紹介します。これらのコードはHTMLフィールドに直接貼り付けることができます。それぞれプレーンなHTMLとインラインCSSを使用しているため、追加のインストールは不要です。
私が最もよく使うスニペットは、シンプルなプライバシーポリシーの文言です。リンク付きの短い注釈を追加することで、お問い合わせフォームをGDPRに準拠させることができます。
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>正式な同意を得たい場合は、プレーンなリンクの代わりにGDPR同意フィールドを追加することができます。
フォームをより魅力的にするために、YouTube動画をフォーム内に直接埋め込むことができます。VIDEO_IDを動画のURLにあるIDに置き換えると、フォームに表示されます。
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>お問い合わせページでは、埋め込みGoogleマップが、人々があなたのビジネスを実際に見つけるのに役立ちます。Googleマップで共有してから「地図を埋め込む」オプションを使用して埋め込みリンクを取得し、YOUR_EMBED_CODEの場所に貼り付けてください。
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>注文フォームを実行していますか？ スタイリッシュなボックスは、割引や期間限定オファーを強調するのに適しています。条件付きロジックと組み合わせることで、特定のオプションを選択した場合にのみ表示させることも可能です。
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>長いフォームの場合、見出しと区切り線を使用すると、関連フィールドを明確なセクションにグループ化しやすくなります。
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">また、ブランディングに合わせた行動喚起ボタンが必要な場合は、テーマに触れることなくリンクをボタンのように見せるようにスタイルを設定できます。
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>WordPressフォームにカスタムHTMLを追加する方法に関するFAQ
WordPressのお問い合わせフォームにカスタムHTMLコードを追加することに関して、よくある質問がいくつかあります。ここでは、最も頻繁に尋ねられる質問とその回答をご紹介します。
WPFormsにどのような種類のHTMLコードを追加できますか？
HTMLフィールドには、ほぼすべての標準HTML要素を追加できます。これには、見出し、段落、区切り線、画像、埋め込み動画、スタイル付きテキストボックス、リンク、簡単なHTMLテーブルなどが含まれます。
インラインCSSを使用して、これらの要素を希望どおりに正確にスタイル設定することもできます。HTMLフィールドは、ほとんどの一般的なHTMLタグをサポートしています。
カスタムHTMLはフォーム送信機能に影響しますか？
いいえ、フォームにHTMLを追加しても、フォームの送信にはまったく影響しません。HTMLフィールドは表示専用であり、フォームとともに送信されるデータは収集しません。
名前、メール、メッセージなどの通常のフォームフィールドは、これまでどおり機能し続けます。カスタムHTMLは、実際のフォーム処理機能に触れることなく、視覚的な表示とユーザーエクスペリエンスを強化するだけです。
HTMLフィールドでJavaScriptを使用できますか？
いいえ、JavaScriptコードはセキュリティ上の理由からHTMLフィールドから自動的にフィルタリングされます。WPFormsは、サイトを潜在的なセキュリティ脆弱性から保護するために、<script>タグとJavaScriptイベントハンドラを削除します。
HTMLとCSSで提供できる以上のインタラクティブな機能が必要な場合は、カスタムJavaScriptを必要とせずに動的なフォーム動作を作成できる条件付きロジックなどのWPFormsの組み込み機能を検討することをお勧めします。
HTMLフィールドとコンテンツフィールドの違いは何ですか？
HTMLフィールドでは、完全なスタイリング制御でカスタムHTMLコードを追加できます。一方、コンテンツフィールドは、基本的な書式設定オプションを備えたシンプルなテキストコンテンツ用に設計されています。HTMLフィールドは、カスタムデザイン要素に対してより多くの柔軟性を提供します。
プレーンテキストまたは単純なフォーマット済みコンテンツを追加するだけであれば、コンテンツフィールドの方が使いやすいかもしれません。しかし、カスタムスタイリング、埋め込みメディア、または複雑なレイアウトが必要な場合は、HTMLフィールドが最適です。
追加できるHTMLコードの量に制限はありますか？
HTMLフィールドに厳密な文字数制限はありませんが、コードを簡潔かつ集中させるのが良い習慣です。大量のHTMLは、フォームの読み込み時間を遅くし、管理を難しくする可能性があります。
複雑なHTMLは、必要に応じて複数のHTMLフィールドを使用して、小さく論理的なセクションに分割することをお勧めします。これにより、後でフォームを編集しやすくなり、全体的なパフォーマンスとフォームの読み込み速度が向上します。
HTMLコードだけでWordPressのお問い合わせフォームを作成できますか？
お問い合わせフォームを純粋なHTMLで手動コーディングすることはできますが、それだけでは送信を実際に送信したり保存したりすることはできません。HTMLはレイアウトのみを処理するため、送信された内容を処理するにはPHPまたはフォーム処理サービスが必要になります。そのため、ほとんどの人はフォームビルダーを使用して送信を処理し、デザインのタッチのためにカスタムHTMLを追加します。
プラグインなしでお問い合わせフォームにHTMLコードを追加するにはどうすればよいですか？
プラグインがない場合、フォームのHTMLをWordPressのカスタムHTMLブロックに直接ページに追加し、PHPを記述して送信を処理し、自分にメールで送信します。これは機能しますが、より技術的であり、スパム保護と検証は自分で行う必要があります。フォームプラグインのHTMLフィールドは、マークアップに対する同じ創造的な制御を提供しながら、安全な送信側を処理します。
HTMLフィールドを使用するためにコーディングの知識は必要ですか？
HTMLフィールドには、実際のコーディング知識は必要ありません。コピー＆ペーストができれば使用でき、このガイドの前の例は、プレースホルダーテキストを自分のものに置き換えるだけでそのまま使用できます。基本的なHTMLと少量のインラインCSSで、ほとんどのニーズに対応できます。
HTMLフィールドはWPFormsの無料バージョンで動作しますか？
HTMLフィールドはFancy Fieldsコレクションの一部であるため、使用するには少なくともBasicプランが必要です。無料のWPForms Liteバージョンは、名前、メール、メッセージなどの標準フィールドをカバーしており、基本的なお問い合わせフォームには十分です。カスタムHTML、画像ドロップダウン、またはファイルアップロードが必要になった場合は、有料プランが必要になります。
同じHTMLを複数のWordPressフォームに追加できますか？
はい、ただしHTMLフィールドはフォームごとに個別に追加されるため、どこにでも適用されるグローバル設定はありません。最も簡単な方法は、スニペットを便利な場所に保存し、それを必要とする各フォームのHTMLフィールドに貼り付けることです。同じブロックを頻繁に再利用する場合は、よく使うスニペットの小さなテキストファイルを用意しておくと時間を節約できます。
次に、WordPressフォームのスタイル設定方法を学ぶ
これで、フォームにカスタムHTMLを追加したので、カスタムコードが意図したとおりに見えるように、WordPressでのお問い合わせフォームのスタイル設定に関するガイドを確認してください。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
