質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • WordPress

    8194questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Wordpress:コンタクトフォーム7のテキスト項目を横並びにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,655

s_waku_k

score 1

表題の件ですが、
Wordpressのコンタクトフォーム7を使用しております。

姓と名のテキスト項目が上下に設置されるのを
横並びに設置したいと思っております。

どのようにすればよろしいか、どなたかご教示いただけませんでしょうか?

イメージ説明

↓このように変更したい

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

HTMLが使えるので、それでレイアウトを作れば良いと思います。

【コピペで使えるContactForm7の項目を横並びかつ完全レスポンシブにするCSSと設定方法】
http://tonari-it.com/contactform7-form-design/

【【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法】
https://inthecom.net/635

【超絶簡単にお問い合わせフォームを設置できるContact Form 7 はカスタマイズ性が何気に高い】
http://sorayweb.com/blog/contact-form-7-customize/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/17 17:52

    私もご教示いただいたサイトを見たのですが、うまくいかず・・・。

    http://sorayweb.com/blog/contact-form-7-customize/
    こちらのサイトが一番やりたいことに近いと思い、以下のように記載してみました。
    ----
    <p>■名前<span style="color: red;">(必須)</span><br />
    <div class="contact_form clearfix">
    <div class="contact_left">
    姓 [text* your-Lname class:xxxxxx]</div>
    <div class="contact_right">
    名 [text* your-Fname class:xxxxxx]</div></p>
    ----
    xxxxxxの部分には別のタグ?コード?をいれております。

    スタイルシート (style.css)の一番下部に、
    サイト内の
    「.contact_form{
    display: block;
    }」からはじまり、
    「.clearfix{
    overflow:hidden;
    }」で終わるコードも追加いたしました。

    初心者にて申し訳ございません。

    キャンセル

  • 2016/12/17 20:06

    動くサンプル: https://jsfiddle.net/5y77Lwao/
    とりかえず左右には分かれますよ。<p>の中に<div>が有るのはHTML文法的にだめですが。

    表示されたページでデベロッパーツールを使って確認してみてください。

    【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
    http://www.buildinsider.net/web/chromedevtools/01

    キャンセル

  • 2016/12/19 10:56

    ありがとうございます!!
    以下のようにしたら、希望のように表示できました!

    -----
    <div class="contact_form clearfix">
    <p class="contact_left">■名前<span style="color: red;">(必須)</span><br />
    姓 [text* your-Lname class:xxxxx]</p><br />
    <p class="contact_right">名 [text* your-Fname class:xxxxx]</p></div>

    <div class="contact_form clearfix">
    <p class="contact_left">■ナマエ<span style="color: red;">(必須)</span><br />
    セイ [text* your-Lname-kana class:xxxxx]</p><br />
    <p class="contact_right">メイ [text* your-Fname-kana class:xxxxx]</p></div>

    <p>■メールアドレス<br />
    [email* your-email class:xxxxx]</p>

    <p>[submit "送信"]</p>
    -----

    ただ、最後に一つだけ聞いてもよろしいですか?
    何故か送信ボタンが消えてしまいました・・・
    カーソルを持っていくと色が変わるのでボタン自体はあるようなのですが・・・
    スタイルシート (style.css)に追記した内容が影響しているのでしょうか?

    キャンセル

  • 2016/12/19 12:49

    参考にされたCSSが images/send.png という画像を使って表示するように出来ているからです。
    .wpcf7-submit 関連のCSSを削除してみてください。(Chromeなら右クリックから「検証(I)」を選べばどういうスタイルが当たっているか確認出来ます)

    キャンセル

  • 2016/12/19 15:20

    ありがとうございます!解決いたしました!

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8194questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。