ContactForm7＋jQueryでセレクトボックスを動的に生成する

2011年4月12日

wordpressで、Contact Form 7＋jQueryを使って、セレクトボックスの項目を動的に生成させる方法。

「当ブログで一番好きな記事はどれですか？」という質問を作る場合

wordpressのプラグイン「ContactForm7」は、記事内からショートコードでフォーム全体を呼び出すため、セレクトボックスの項目を動的に生成させようと思うと、Javascriptなどを使って、フォーム表示部分とは別にコードを追加する必要があります。

今回は例として、「一番好きな記事はどれですか？」という質問に対して、ブログの記事タイトル一覧から選択できるようなフォームを作る方法を説明します。

ContactForm7側の設定

ContactForm7の設定画面で、とりあえず、フォーム内にドロップダウンリストを、名前を「favorite」、ID名を「select-title」、選択項目を空で作っておきます。すると、以下のコードが実際のページで出力されます（コードが見やすいように、改行をいれています）。

<span class="wpcf7-form-control-wrap favorite">
<select name="favorite" id="select-title" class="wpcf7-select">
<option value="---">---</option>
</select>
</span>

これに、Javascriptで、動的にoption要素を追加してあげます。

option要素を追加

僕はほとんどのサイトでjQueryを読み込んでるので、option要素の追加もjQueryを使います。まず、テンプレートにjQueryを読み込む記述を追加します。wp_headよりも手前に以下のコードを追加。

<?php wp_enqueue_script('jquery'); ?>

今度は、wp_headの後に（jQueryが読み込まれた後に）、option要素を追加するコードを。

<?php if( is_page('フォームページのID')): ?>
<script type='text/javascript'>
    jQuery(function(){
    
        <?php $my_query = new WP_Query('&posts_per_page=-1'); ?>
        <?php if ($my_query->have_posts()) : ?>
            <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
            
                jQuery('#select-title').append(jQuery('<option>').attr({ value: '<?php the_title(); ?>' }).text('<?php the_title(); ?>'));
            
            <?php endwhile; ?>
        <?php endif; ?>
    
    });
</script>
<?php endif; ?>

簡単に説明すると、全記事を表示するwordpressループを作って（wordpressループに関しての詳細はこちらの記事もどうぞ）、#select-titleというIDのついたselect要素内に、記事タイトルの入ったoption要素を作成しています。ちなみに、wordpress付属のjQueryを読み込んでいると、「$」がきかないので、代わりに「jQuery」を使います。