サポート » プラグイン » Contact Form7のプレースフォルダの表示と真ん中に寄せる方法

  • 解決済 kommyta

    (@kommyta)


    こんにちは。お世話になっております。

    WordPressのバージョン 5.2.3-ja
    Contact Form7のバージョン 5.1.1

    【質問内容】

    お問い合わせフォームを作成し、メール送信する事を考えております。

    ①各項目ごとに、プレースフォルダが表示されず、枠が見えない。
    ②左端ぴったりから開始するため、非常に見ずらい。真ん中あたりに持ってきたい。

    ブラウザを変えて(クローム、エッジ)も状況は変わりません。
    メール送信は問題ないので、後は見栄えなのですが、壁に当たってしまいました。
    アドヴァイスを頂けますと幸いです。

    ・コードはこんな感じです。
    <div style=”border-style: solid ; border-width: 2px; padding: 10px 5px 10px 20px; border-color: #ffcc66; width: 90%;”>
    <div class=”soudanroom-info”>
    <label> お名前<span class=”con-red”>※</span></dt><dd>[text* your-name placeholder akismet:author “鈴木 太郎”] </label>
    <label> 所属部門<span class=”con-red”>※</span></dt><dd>[text* your-bumon placeholder akismet:author “営業部”] </label>
    <label> メールアドレス<span class=”con-red”>※</span></dt><dd>[email* your-email placeholder “suzuki_tarou@yahoo.co.jp”]</label>
    <label> 件名<span class=”con-red”>※</span></dt><dd>[text* your-subject placeholder akismet:author “件名を入力”]</label>
    <label> ご相談内容<span class=”con-red”>※</span></dt><dd>[textarea* your-message 110×10 placeholder akismet:author “ご相談内容を入力”]</label>
    </div>

    [submit “送信する”]

    お手数をお掛けいたしますが、よろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    ①各項目ごとに、プレースフォルダが表示されず、枠が見えない。

    Twenty Nineteen+Chrome ブラウザでは、プレースフォルダおよび枠は表示されました。テーマのスタイルが影響しているのかもしれません。

    ②左端ぴったりから開始するため、非常に見ずらい。真ん中あたりに持ってきたい。

    下記ページなどが参考になると思います。
    参考ページ: https://kagesai.net/contactform7perfectguide/

    また、CSS の Flexbox を使用すると複雑なレイアウトを簡単に実現するできるのでいいかもしれません。
    参考ページ: https://www.webprofessional.jp/make-forms-fun-with-flexbox/

    コードには関して言えば、dl タグが抜けていたり、dt、dd タグの開始タグと終了タグが対になっていなかったりと、いくつか問題があります。
    また、WordPress というより HTML+CSS についてのご質問に見受けられますので、他のフォーラムなどの方が回答が得やすいと思います。

    ご回答ありがとうございます。
    参考ページを熟読し、どうしてもだめなら他のフォーラムを頼らせて頂きます。

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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • このトピックに返信するにはログインが必要です。