Contact Form 7で複数のクラスを追加する方法

テンプレートファイルでクラスを指定する方法: Contact Form 7では、デフォルトのテンプレートファイルを使用してフォームを表示します。このテンプレートファイルをカスタマイズすることで、クラスを追加することができます。以下は例です:

<input type="text" name="your-name" class="my-class1 my-class2" />

テンプレートファイル内の適切な場所に上記のようなコードを追加することで、クラスを指定することができます。

JavaScriptを使用してクラスを追加する方法: もしもっと高度なカスタマイズが必要な場合は、JavaScriptを使用してクラスを追加することもできます。Contact Form 7のフォームが読み込まれた後に、JavaScriptを使用してクラスを追加するコードを書くことができます。以下は例です:

document.addEventListener( 'wpcf7mailsent', function( event ) {
 // フォームが送信された後に実行されるコード
 document.querySelector( 'input[name="your-name"]' ).classList.add( 'my-class1', 'my-class2' );
}, false );

上記の例では、フォームが送信された後にyour-nameフィールドにmy-class1とmy-class2という2つのクラスが追加されます。