Contact form 7が生成したHTMLコードをそのままフォーム欄に貼り付けて、各項目にクラス名を付与してはいかがでしょうか？
作者さんが次のトピックで回答している通り、各項目のHTMLを直接記述することもできます。
http://ja.forums.wordpress.org/topic/10149?replies=2
生成されたHTMLコードはフォームのページにアクセスして、ソースを表示して確認してください。
（チェックボックスに関しては、HTMLコードを利用しますので、[checkbox ～]は削除しておきます。）
各選択項目の表示が崩れる場合がありますので、もし崩れた場合は、
<span class=”wpcf7-list-item”>をブロック要素にしてやるといいです。
<span class="wpcf7-list-item" style="display:block;">
テーマのCSSファイルに記述する場合は、使い方のページを参考にしてください。
http://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/?lang=ja
セレクトメニューに関しては、custom-form-elements.jsを変更することで対応させてみてください。
Contact form 7が利用するクラス名が割り当てられていますので、これらを削除した場合、動作に支障が出るかもしれません。
custom-form-elements.js
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
上記を次のように変更すると、複数のクラスがある場合でも、クラス名styledがあれば動作します。
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className.match(/styled/)) {
popup様
早々の解答ありがとうございます。
チェックボックスは生成したHTMLコードをそのままフォーム欄に貼り付け、セレクトメニューはcustom-form-elements.jsを変更で表示できましたm(__)m
セレクトメニューはボーダーが表示されてしまったのでcssで border-style: none; にしました。
チェックボックスについては、私が作るのであればこれで問題はないのですが、お客さまにこの方法はお願いできないので、何か他に良い方法はないものでしょうか？
次のコードを利用中のテーマのfunctions.phpに追記すると、チェックボックスのinputにクラス名styledを追加します。（同様にラジオボタンにも追加します。）
function add_contactform_elm_class() {
echo $script =<<< CODE
<script type="text/javascript">
jQuery(function($) {
$('.wpcf7-list-item input').addClass('styled');
})
</script>
CODE;
}
add_action('wp_print_footer_scripts', 'add_contactform_elm_class');
フォーラムの利用方法について一言あります。
今回はさほど難しくないので回答しましたが、お客様から依頼されたことを理由に別の方法を求められても困ります。
このフォーラムで回答している人で、サポートの報酬を受け取っている人はいないはずです。
分からないことを聞くのは自由ですが、今後は上記のことをふまえた利用をお願いします。
popup様
お忙しい中、私のわがままな要望に答えていただきありがとうございます。
教えていただいた方法でやってみたのですが、javascriptの部分が何か引っかかるようでエラーになってしまいました。
お客さまから依頼されたのではなく、私以外の人も、もう少し簡単にできたら良いなと思ってお聞きしてみたのですが、作者の方もその方法しか答えていらっしゃらないものを、他の方にお聞きするのはマナー違反だったようですみません。
プログラムの分からないデザイナーなので、フリーのプラグインでカスタマイズするしかないので、また使いやすいプラグインを探してみます。
すみません。うっかり忘れていました。
エラーになるのでしたら原因は分かりませんが、単に表示が崩れる場合は次のCSSをform.cssあるいはテーマのstyle.cssに追記してください。
span.wpcf7-list-item {
display: block;
margin-top: 4px;
}
テーマに合わせて数値を変更する必要があるかもしれません。
popup様
いろいろありがとうございます。
Javascriptを?>と<?phpで囲ったら成功しました！
とあるサイトでfunctionの中にcssを埋め込むときに使っていて、変な使い方しているな?と試しにやってみたら出来ました。私には何の意味か分かりませんが、逆に使うことがあるのですね。
function add_contactform_elm_class() {
echo $script =<<< CODE
?>
<script type="text/javascript">
jQuery(function($) {
$('.wpcf7-list-item input').addClass('styled');
})
</script>
<?php
CODE;
}
add_action('wp_print_footer_scripts', 'add_contactform_elm_class');
レイアウトはcssで編集すれば問題ないと思います。
ありがとうございました！！
すみません、
echo $script =<<< CODEとCODE;は削除してください。
function add_contactform_elm_class() {
?>
<script type="text/javascript">
jQuery(function($) {
$('.wpcf7-list-item input').addClass('styled');
})
</script>
<?php
}
add_action('wp_print_footer_scripts', 'add_contactform_elm_class');
