ご注意!

この記事には PHP コードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートを提供していません。

追加のガイダンスについては、WPBeginner の カスタムコードの追加方法に関するチュートリアル を参照してください。

閉じる

フォームの前に動画を追加する方法

フォームの上に魅力的な動画を追加しますか?標準の埋め込みフォームを使用している場合でも、会話型フォームやフォームページのアドオンを利用している場合でも、簡単なコードスニペットを使用して動画メッセージを簡単に追加できます。

このガイドでは、この機能の実装方法を説明します。

フォームの設定

まず、フォームを作成し、目的のフィールドを追加します。フォームの作成にヘルプが必要な場合は、最初のフォームの作成に関するガイドを参照してください。

フォームを作成し、フィールドを追加します

動画の追加

フォームの上に動画を追加するには、このコードをサイトに追加する必要があります。カスタムコードの追加方法がわからない場合は、JavaScriptまたはCSSコードスニペットの追加に関するガイドを参照してください。

999をフォームIDに置き換えることを忘れないでください。フォームIDの見つけ方がわからない場合は、フォームおよびフィールドIDの見つけ方に関するガイドを確認してください。

動画のスタイリング

動画がフォームコンテナ内に正しく収まるようにするには、このオプションのCSSを追加できます。カスタムCSSの追加にヘルプが必要な場合は、サイトにカスタムCSSを追加するガイドを参照してください。

iframe {
    width: 100%;
    min-height: 400px;
}
動画がフォームの前に表示されるようになりました

動画は次のように表示されます:

  • 標準の埋め込みフォームの上
  • フォームページリンク上
  • 会話型フォームページ上
  • CSSによるレスポンシブサイズ調整

これで完了です!フォームに動画を正常に追加できました。次に、ブラウザタブのタイトルも変更しますか?詳細については、ブラウザタブのページタイトルを変更するチュートリアルを確認してください。

参照アクション

wpforms_frontend_output_before