WordPress のお問い合わせフォームにカスタム HTML コードスニペットを埋め込みたいですか?フォームにカスタム HTML を追加することで、フォームをよりクリエイティブにすることができます。
最高のWordPressフォームプラグインは、コードなしでフォームを作成でき、さらに独自のカスタムHTMLをフォームに追加してより高度なフォームにすることもできます。
そこでこのチュートリアルでは、WPFormsを使ってWordPressのフォームにカスタムHTMLを追加する方法を説明します。
コンタクトフォームにカスタムHTMLを追加する理由
なぜWordPressのフォームにHTMLを追加する必要があるのか不思議に思うかもしれません。
多くの場合、上級ユーザーや Web 開発者はフォームの機能を拡張したいと思うかもしれません。フォームにカスタム HTML を追加する主な利点のひとつは、フォームを他のコンテンツから目立たせることができるということです。
以下の例では、お問い合わせフォームのテキストにプライバシーポリシーへのリンクを追加することがいかに簡単であるかがわかります。
つまり、訪問者はこのようなものを目にすることになる：
また、カスタムHTMLコードを使用してフォームに画像を追加し、フォームをより視覚的にアピールしたり、商品やカスタム商品オプションを紹介することもできます。
フォームにこのような追加機能を加えることで、フォームをページ上で目立たせることができ、訪問者の注意を引くことができます。これにより、フォームの送信を促すことができます。
フォームにカスタム HTML を追加することで、WordPress のフォームを拡張する機会がたくさん生まれます。以下のようなアイデアがあります：
- YouTubeビデオを埋め込む：YouTubeやVimeoの動画をフォームに埋め込むことで、フォームをより魅力的なものにすることができます。
- グーグルマップを埋め込む：お問い合わせページでは、お問い合わせフォームにGoogleマップを埋め込むことで、ビジネスの場所を表示することができます。
- 条件付きロジックで限定オファーを表示 注文フォームを作成している場合、ユーザーがフォームで特定のオプションを選択すると、限定オファーのHTMLブロックを表示できます。このスマートな条件ロジックは、アップセルやフォームを短くしたい場合に最適です。
- プライバシーポリシーを表示する：フォームにプライバシーポリシーへのリンクを追加しましょう。
WordPressのコンタクトフォームにカスタムHTMLコードを追加する方法
チュートリアルを読みたい場合は、以下の手順に従ってフォームにカスタムHTMLコードを記述する場所を作成してください。
ステップ1：WPFormsをインストールする
まず最初にWPFormsプラグインをインストールして有効化します。これは使いやすいフォームビルダーで、シンプルなフォームから高度なフォームまで何でも作ることができます。WordPressのプラグインの中でも最高のものの一つです。
プラグインをダウンロードするのが初めてという方のために、WordPressプラグインのインストール方法をステップ・バイ・ステップでご紹介します。
また、フォームを作成する必要があります。次にそれをやってみましょう。
ステップ2：フォームの作成
次のステップは最初のフォームを作ることです。カスタムHTMLを追加したいフォームを自由に選択できますが、この例ではWPFormsチャレンジを使ってシンプルなコンタクトフォームを作ります。
素晴らしい。さて、次はカスタムHTMLを受け付けるフィールドを追加しよう。
ステップ 2: HTMLブロックをフォームに追加する
次に、フォームにHTMLフィールドを追加する必要があります。FieldsタブのFancy Fieldsで見つけることができます。
次に、左側のパネルから右側のフォームにフィールドをドラッグするだけです。
WPFormsを使ってWordPressのコンタクトフォームにカスタムHTMLフィールドを追加するのは本当に簡単です。
ステップ3：カスタムHTMLを挿入する
これでコンタクトフォームにカスタムHTMLボックスが追加されたので、カスタムHTMLコードスニペットを追加することができます。
右側のフォームに移動し、先ほど追加したHTML / コードブロックフィールドをクリックしてください。
次に、左側のパネルに移動し、「フィールド・オプション」の 下にある「HTMLコード」ボックスをご覧ください。
ここにカスタムHTMLコードスニペットを追加します。
そのフィールドにカスタムHTMLを貼り付けてください。カスタム HTML コードスニペットをフォームに追加することができます。
終わったら、右上の保存ボタンを押す。
では、あなたのサイトにフォームを設置してみましょう！
ステップ 4: カスタム HTML コンタクトフォームを WordPress ウェブサイトに追加する
さて、WPFormsプラグインを使ってカスタムHTMLフィールドでコンタクトフォームを作ったので、それをウェブサイトに追加したいと思います。
まず、フォームビルダーの埋め込みボタンをクリックします。
ページに埋め込む]通知がポップアップしたら、[新しいページを作成] ボタンをクリックします。
次に、WPFormsはあなたのページに名前を付けるように要求します。この例では、このカスタムHTMLコンタクトフォームをコンタクトページに追加するので、Contact Usと 呼ぶことにします。
ご希望のページのタイトルをボックスに入力し、「Let's Go」をクリックします！
これで、カスタムHTMLコンタクトフォームのある新しいページが表示されます。ページの右上にある公開ボタンを押してください。
そして、新しいフォームを一目見てください。動作が確認できるはずです。
完了です。カスタム HTML フィールドを持つ WordPress コンタクトフォームの設定が完了しました。
カスタムHTMLフォームについての最終的な考え
お疲れ様でした。このチュートリアルで、WordPressのコンタクトフォームにカスタムHTMLフィールドを設定する方法を学んでいただけたら幸いです。
フォームにカスタムHTMLを追加した後は、WordPressのコンタクトフォームのスタイリングガイドを見て、カスタムコードが思い通りに見えるか確認してください。
何を待っているのですか？今すぐ最強のWordPress フォームプラグインを使って、中小企業のウェブサイト用にカスタマイズされた美しいフォームを簡単に作成しましょう。
この記事が気に入ったら、Facebookや TwitterでWordPressの無料チュートリアルをフォローしてください。
