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

Question

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

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

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

↓このように変更したい

Answer 1

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/

Comments

[s_waku_k]

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

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;
}」で終わるコードも追加いたしました。

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

[kei344]

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

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

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

[s_waku_k]

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

-----
<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)に追記した内容が影響しているのでしょうか？

[kei344]

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

[s_waku_k]

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