サポート » プラグイン » コンタクトフォームでラジオボタンを画像に置き換えたい

  • 解決済 mame777

    (@mame777)


    WordPressのお問い合わせフォームでラジオボタンやチェックボックス、
    選択リストをアイコン(画像)にしたいのですが、
    プラグインのコンタクトフォームでできますか?
    やりたいことができれば、他の方法でもかまいません。
    お手数かと思いますが、どうぞよろしくお願いします。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • htmlソースコードは見ましたか?
    cssでスタイリングすると解決すると思います。

    トピック投稿者 mame777

    (@mame777)

    ご回答ありがとうござました。
    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/

    CSS3とjQueryでフォームを美しく装飾する方法

    トピック投稿者 mame777

    (@mame777)

    たびたびご回答ありがとうございました。

    opacityがうまくいっていなかったのは凡ミスでした。
    下記の紹介サイトのとおりにやったら、画像なしでできました。

    とくに、

    display: none;
    -webkit-appearance: none;

    あたりの紹介サイトもあり、その違いがわからなかったので、有益な情報ありがとうございました。大変助かりました。

    ただ、webクリエイターボックスさんのサイトで画像をクリックしたとき、ラジオボタンを切り替えるために、jQueryの導入を促されていました。

    今、ちょっとよくわからないのが、、ラジオボタンで画像置換する場合は、jQueryを導入する方が一般的でありメリットが大きいのかと?

    jQueryのダウンロードする必要があるのか否か?です。
    Wordpressにもとから入っているものやCDNという方法もあるようで、この場合、どれがいいのかいまいちよくわかっていません。

    読み込む部分はheader内のようですが、この場合、コンタクトフォームのプラグイン内でファイルを作成しjQueryのコードを記述していくような流れになるでしょうか?

    大枠が見えていません。アドバイスいただけると助かります。。

    トピック投稿者 mame777

    (@mame777)

    その後、いろいろ調べて、GoogleのCDNを使うことにし、jQueryを読み込みました。jQueryファイルが読まれているか動作確認はしました。ここまではうまくいっているようです。

    ただ、投稿ページに直接張り付ければ、画像でラジオボタンの切り替えができるのですが、contact form 7のコンタクトフォームの編集画面に直接、張り付けると、画像でラジオボタンの切り替えができません。ボタンは表示されるのですが、反応しません。コンフリクトも疑い、functions.phpにそれらしきコードを張り付けてみたのですが、うまくいきませんでした。

    何かわかる方いらっしゃいますでしょうか?

    header.phpの<head>タグ内にjQueryコードは記述してください。

    コンタクトフォームの編集画面を詳しく見てないですが、ソースコードとは少し違う仕様だと思うのでお勧めしません。

    トピック投稿者 mame777

    (@mame777)

    たびたびどうもありがとうございます。助かります。

    header.phpの<head>タグ内にjQueryコードは記述してください。

    再度、確認しましたが、現在、head内に記述しています。それでも、コンタクトフォームを通すと、うまく動いてくれません

    フォーム自体の作成がどのぐらい大変なのかやったことがないため、わかりませんが、、一から自作してしまった方が問題が起こらないと理解しました。それほど大変ではないであれば、その方法を検討したいと思います。

    そうですね。僕もコンタクトフォームは自作しています。

    WordPressで作るポイントとしては以下の手順でいけばうまくいきます。

    1.固定ページテンプレートでフォームを記述したページを作成する。formのactionは2.で作成するお問い合わせ完了ページのパス

    2.page-thanks.phpを作成して、お問い合わせ完了後に表示するページを作成する。(お問い合わせありがとうございましたなど)

    これにより、お問い合わせがどれぐらいあったのかをthanksページの表示回数でAnalyticsのようなツールにより解析できるようになります。(簡易的ですが)

    トピック投稿者 mame777

    (@mame777)

    ご丁寧にありがとうございました。
    参考にさせていただきます。

    プラグインのcontact form 7をいじるのではなく、
    コンタクトフォームを自作する流れにします。

    最初、コンタクトフォームと書いてしまったので、表記が紛らわしくてすいません。contact form 7でラジオボタンをなんとかしようとしていたが、、コンタクトフォームを自作する流れにしました、という結論になります。

    一旦、解決済にします。何度もありがとうございました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「コンタクトフォームでラジオボタンを画像に置き換えたい」には新たに返信することはできません。