高度な埋め込みフォームのカスタマイズ（HTMLとCSS）

Embeddable Audit Tool は、シンプルで簡単に編集可能なように設計されています。他のサードパーティツールがコードをカスタマイズできないように意図的に圧縮または難読化するのとは異なり、私たちはそうしていません。

その代わりに、HTML埋め込みコードの上にある単純なコードブロック内で全てのCSSを公開するので、基本的なCSSの知識があればフォームオブジェクトをスタイル設定できます。

必要なのは、関連セクションに数行のCSSを追加することだけで、外観と操作感を完全にカスタマイズできます。中級のHTML知識があれば、フォームの構造自体を変更することができます。

また、独自のJavaScript関数（例：追加の[フォーム]検証）を追加したり、[フォーム]内でonSubmitやonClick時に他の関数やシステムを呼び出すこともできます。

唯一のカスタマイズに関する推奨事項は、エラーを引き起こす可能性があるため、JavaScriptコードブロックに変更を加えないことです。これに関連して、フォーム要素を元の順序からあまり動かさないことをお勧めします。なぜなら、いくつかのJavaScript参照はフォーム内のオブジェクトの相対的な位置に依存しているからです。

これ以外にも、フォームをカスタマイズして、あなたのウェブサイトの外観と調和するようにすることを強くお勧めします。それはあなたのサイト体験の自然な一部であるべきであり、追加されたウィジェットのように感じるべきではありません。

このDigital Butterからの埋め込みフォームのように:

埋め込みフォームの例

これは、エージェンシーがウェブサイトのスタイルに適切にフォームをカスタマイズすることで、より高いレベルのリード生成を達成するのを目にしているため、お勧めします。

このガイドでは、埋め込みフォームの最も一般的な3つの高度なカスタマイズについて見ていきます：

1. [高度な]フォーム[の]検証
2. フォーム送信中にGoogle AnalyticsまたはFacebookイベントを発火する
3. フォームフィールドまたは[送信]ボタンスタイルをカスタマイズする

しかしまず、埋め込みコードの構造を見てみましょう:

基本HTML埋め込みコードを[探索]する

埋め込みコードを生成するには、Embedding Settings タブに移動し、"設定を保存して埋め込みコードを生成" ボタンをクリックします。以下は基本コードの例です。

最初のセクションはCSS、その後にHTML、最後にJavaScriptが続いていることに気付くでしょう。最初の2つのセクションをカスタマイズし、JavaScriptはそのままにしておく必要があります。2行目のコメントで提案されているように、CSSセクションをCSSファイルに移動して、すべてを一元的に管理することができます。

埋め込みコード

1. 高度なフォーム検証

SEOptimer Embed Formには、デフォルトでシンプルなフォーム検証が組み込まれています。OnSubmit時に、JavaScriptはすべてのフォームフィールドを有効な入力かどうかをチェックし、無効な入力がある場合は、次のようなJavaScriptアラートメッセージをブラウザでトリガーします。

フォーム検証

Embed Form に堅牢な検証を追加するための2つの最も人気のある代替案は、「制約検証」と「リアルタイム検証」です：

制約の検証

CSS-Tricksのガイドをチェックしてください制約検証には、フォームフィールドがフォーカスされる際にその周辺にコンテキストメッセージを使用します。この方法はユーザーを事前に誘導し、期待される入力形式に従うようにガイドします。また、以下の例では、少なくとも何かをフィールドに入力することを促します:

必須入力フィールド

リアルタイム検証

CSS-Tricksには、ユーザーが入力する際にフィールド内検証を提供するリアルタイム検証に関する素晴らしいガイドもあります。これは、フォームで正しい入力を示すためのアイコン表示のように簡単なものです。

有効なフィールド

2. フォーム送信中にGoogle AnalyticsまたはFacebookイベントを発火する

目標測定やリターゲティングのためにGAやFacebookのようなトラッキングイベントを発火させることは、あなたのEmbed Formを使用してトラフィックを活用する素晴らしい方法です。これを行う最良の方法は、Google自身のTag Manager (GTM) のようなタグマネージャーツールを使うことです。

このようにして、GTMを空のコンテナとしてあなたのウェブサイトにインストールし、その後はコードに毎回手を加えることなく、GTM自体からすべてのタグとピクセルを管理することができます。

あなたのウェブサイトでフォームが送信された際にGTMがイベントを発火させる方法は2つあります：

フォームのsubmitイベントが発生したときに、組み込みのフォームトリガーを使用する
GTMのデータレイヤーに追加する必要があるカスタムイベント（JavaScriptの行）に依存する

ほとんどのユーザーにとって、最初のオプションが最適です。なぜなら、それは実装が最も簡単で、うまく機能するからです。SEOptimer Embed Formは、ユーザーが完了した際に標準のHTML submit アクションを使用するので、フォームのデータ送信方法を変更しない限り、GTMの組み込みトリガーを使用することが推奨されます。

GTMで「[フォーム送信]」に基づいて新しいトリガーを作成する必要があります。

GTM

また、GTMの組み込み「Form ID」変数を有効にすることを確認してください。この変数は、HTML内のformタグから埋め込みフォームのIDを識別します。

埋め込みフォームの送信アクションを削除してカスタムJavaScriptに置き換えた場合、これによりGTMの組み込みトリガーがフォームで機能しなくなります。

それが、イベントが発生したことをGTMのデータレイヤーに通知するためにJavaScriptの呼び出しを追加する必要がある場所です。このアプローチは一度だけ行えばよいので、将来的に追加したいイベントもGTM自体で簡単に行うことができるため、いずれにしても簡単です。JavaScriptは次のようになります:

dataLayer.push({'event' : '[フォームが送信されました]', 'formName' : 'WebsiteAudit'});

GTMで両方の方法を実装するためのステップバイステップの手順については、Click Insightのガイドを参照してください。

3. フォームフィールドまたは送信ボタンのスタイルを[カスタマイズ]する

丸みを帯びたフォーム要素

カナダのデジタルエージェンシーReach Firstからのこの例は、ウェブサイトの外観と感触に合わせてAudit Toolを変更するために数行のCSSを使用できる素晴らしい例です。この場合、サイト全体の他のすべての入力およびボタンフィールドに丸みを持たせています：

Reach First

ここでは、Audit Toolのテキスト入力フィールドに丸みを持たせるために"border-radius: 50px;"属性が使用されていることがわかります。右側のパディング属性は160pxに設定されており、入力エリアと"Check"ボタンの間に十分なパディングを提供しています。これにより、入力されたテキストがボタンの上に重なるのを防ぎます。

Reach First 入力フィールド