コンタクトフォームでラジオボタンを画像に置き換えたい
-
htmlソースコードは見ましたか?
cssでスタイリングすると解決すると思います。ご回答ありがとうござました。
cssをいじっていろいろとやったのですが、うまくいきません。<p>テスト<br /> <label class="radioImg">[radio radio-781 "アイコン1" "アイコン2" "アイコン3"]</label></p>.wpcf7 input[type="radio"], { opacity : 0; display: block; } .radioImg{ background-image: url("../images/radio_off.png"); background-repeat: no-repeat; background-size: 35px; }ラジオボタンを消して画像を表示すればいい、と思ったのですが、
まず、ラジオボタンが消えません。そこでつまずいています。cssのみでできると考えているのですが、その理解は大丈夫でしょうか?
恐れ入りますが、どうぞよろしくお願いいたします。CSSでできます
画像置換ではないですがここにやり方と答えが書いてあったので見てみてください
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://blog.ousaan.com/index.cgi/links/20131031.html
他には
このあたりが参考になるかと
http://contactform7.com/ja/custom-layout-for-checkboxes-and-radio-buttons/
http://www.webcreatorbox.com/tech/css3-jquery-form/たびたびご回答ありがとうございました。
opacityがうまくいっていなかったのは凡ミスでした。
下記の紹介サイトのとおりにやったら、画像なしでできました。とくに、
display: none; -webkit-appearance: none;あたりの紹介サイトもあり、その違いがわからなかったので、有益な情報ありがとうございました。大変助かりました。
ただ、webクリエイターボックスさんのサイトで画像をクリックしたとき、ラジオボタンを切り替えるために、jQueryの導入を促されていました。
今、ちょっとよくわからないのが、、ラジオボタンで画像置換する場合は、jQueryを導入する方が一般的でありメリットが大きいのかと?
jQueryのダウンロードする必要があるのか否か?です。
Wordpressにもとから入っているものやCDNという方法もあるようで、この場合、どれがいいのかいまいちよくわかっていません。読み込む部分はheader内のようですが、この場合、コンタクトフォームのプラグイン内でファイルを作成しjQueryのコードを記述していくような流れになるでしょうか?
大枠が見えていません。アドバイスいただけると助かります。。
その後、いろいろ調べて、GoogleのCDNを使うことにし、jQueryを読み込みました。jQueryファイルが読まれているか動作確認はしました。ここまではうまくいっているようです。
ただ、投稿ページに直接張り付ければ、画像でラジオボタンの切り替えができるのですが、contact form 7のコンタクトフォームの編集画面に直接、張り付けると、画像でラジオボタンの切り替えができません。ボタンは表示されるのですが、反応しません。コンフリクトも疑い、functions.phpにそれらしきコードを張り付けてみたのですが、うまくいきませんでした。
何かわかる方いらっしゃいますでしょうか?
header.phpの<head>タグ内にjQueryコードは記述してください。
コンタクトフォームの編集画面を詳しく見てないですが、ソースコードとは少し違う仕様だと思うのでお勧めしません。
たびたびどうもありがとうございます。助かります。
header.phpの<head>タグ内にjQueryコードは記述してください。
再度、確認しましたが、現在、head内に記述しています。それでも、コンタクトフォームを通すと、うまく動いてくれません
フォーム自体の作成がどのぐらい大変なのかやったことがないため、わかりませんが、、一から自作してしまった方が問題が起こらないと理解しました。それほど大変ではないであれば、その方法を検討したいと思います。
そうですね。僕もコンタクトフォームは自作しています。
WordPressで作るポイントとしては以下の手順でいけばうまくいきます。
1.固定ページテンプレートでフォームを記述したページを作成する。formのactionは2.で作成するお問い合わせ完了ページのパス
2.page-thanks.phpを作成して、お問い合わせ完了後に表示するページを作成する。(お問い合わせありがとうございましたなど)
これにより、お問い合わせがどれぐらいあったのかをthanksページの表示回数でAnalyticsのようなツールにより解析できるようになります。(簡易的ですが)
トピック「コンタクトフォームでラジオボタンを画像に置き換えたい」には新たに返信することはできません。