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

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

ただいまの
回答率

89.55%

WordpressのコンタクトフォームでhtmlとCSSの書き方について

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 370

ewalu

score 2

前提・実現したいこと

wordpressの有料テーマ内にあったコンタクトフォームを元に自身でアレンジをしてフォームを作成しました。

URLのP表示が良いのですが、スマホ表示を新郎詳細(お名前→フリガナ→・・・)の次に新婦詳細が表示されるようにするにはフォームをどのように書いて、CSSをどのように書いたら良いかが解りません、、、><

【↓元のフォーム】
イメージ説明

【↓自身でアレンジしたフォーム】
イメージ説明

発生している問題・エラーメッセージ

該当のソースコード

[nd_column]というのが、元のフォームに設定されているから、上手くこのフォームに入らないのでしょうか・・?

↓検証で確認するとこれが元になっているフォームだと思うのですが、これをどうにか変更してコンタクトフォームに書けば良いのでしょうか・・?

<div class="nd_options_float_left nd_options_box_sizing_border_box nd_options_width_100_percentage_all_iphone_important nd_options_padding_0_right_important_all_iphone nd_options_padding_0_left_important_all_iphone " style="padding: 10px; width:50%;"><span class="wpcf7-form-control-wrap groom-name"><input type="text" name="groom-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="ご新郎様のお名前"></span></div>
element.style {
    padding: 10px;
    width: 50%;
}
.nd_options_float_left {
    float: left;
}
.nd_options_box_sizing_border_box {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

試したこと

新郎詳細をclass:groom、CSSに float: left!important;、width: 50%!i、新婦詳細をclass:bride、CSSに float: right!important;、width: 50%!important;と書いてみたのですが、下の画像のように、新郎詳細が左寄り、右50%は空白、その下に、左50%が空白、左寄りに新婦詳細になり、思うようになりません、、、

元のベースにある[nd_column width="50%"]を省き、tableタブやdivタブを使ってみましたが、上手くこのフォームに入らずどのようにしたらよいか行き詰っています。。。

イメージ説明

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • asahina1979

    2019/01/28 09:17

    ショートカットリンクは行き先がわからないので使わないでください。

    キャンセル

  • ewalu

    2019/01/28 09:22

    そうなんですね、、、失礼しました。。。
    初めての質問でして・・上手く説明できないので、表示例をスクリーンショットに撮ったのですが、
    このサイトで画像を載せる事はできるのでしょうか・・・?

    キャンセル

  • dit.

    2019/01/28 10:38 編集

    回答にて画像を提示されているようですが、質問内でも同じようにできます。
    質問を編集し、そちらに入れてみてください。(複数画像を入れることもできます。
    PCなら右側にプレビューも出ると思うので確認しながら編集してください。

    キャンセル

  • ewalu

    2019/01/28 10:55 編集

    回答ありがとうございます!ほんと!画像添付出来ました!!
    これで解決法を頂ければいいのですが・・・

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる