🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

4536閲覧

WordpressのContact form7で必須項目のエラーメッセージがでる位置を修正したい

alion

総合スコア13

WordPress

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/02/21 09:54

編集2021/02/21 10:10

こんにちは。
WordpressでContact form7を使い、予約用のフォームを作成しました。
必須項目に記入せずに送信ボタンを押した場合、入力していない部分に「必須項目に入力してください」というメッセージがでるのですが、ボックスと単位の間に表示されてしまい、すべてずれてしまう部分があり困っています。

ずれないようにきれいに表示させるにはどこを変更したらいいでしょうか。

Windows10、Google chromeを使用しています。

必須項目に入力せずに送信した場合、この画像のようになってしまい、年・月・日、といった表示が次の段にずれてしまいます。生年月日・出生時間の項目です。

!イメージ説明説明](85627600afb618d5657d20b1c0d508e6.png)明](22f332fc3c13f6072d9fd683737c7053.png)

フォームのhtmlです。

html

1<table class="inquiry"> 2<tr> 3<th> 4<span class="haveto">必須</span><span>お名前</span> 5</th> 6<td> 7[text* your-name akismet:author class:textsp placeholder"苗字 名前"] 8</td> 9</tr> 10<tr> 11<th> 12<span class="haveto">必須</span><span>フリガナ</span> 13</th> 14<td> 15[text* your-name class:textsp placeholder"カタカナでご記入ください"] 16</td> 17</tr> 18<tr> 19<th> 20<span class="haveto">必須</span><span>性別</span> 21</th> 22<td> 23[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "男""女"] 24</td> 25</tr> 26<tr> 27<th> 28<span class="haveto">必須</span><span>メールアドレス</span> 29</th> 30<td>[email* your-email akismet:author_email class:mailsp placeholder""]</td> 31</tr> 32<tr> 33<th> 34<span class="haveto">必須</span><span>メールアドレス確認用</span> 35</th> 36<td>[email* your-email class:mailsp placeholder""]</td> 37</tr> 38<tr> 39<th> 40<span class="haveto">必須</span><span>電話番号</span> 41</th> 42<td> 43[tel* your-tel class:tel placeholder""] 44</td> 45</tr> 46<tr> 47<th> 48<span class="haveto">必須</span><span>ご希望のメニュー</span> 49</th> 50<td> 51[radio radio-1 use_label_element default:1 class:radio1 "aaa""bbb""ccc""ddd"] 52</td> 53</tr> 54<tr> 55<th> 56<span class="haveto">必須</span><span>ご希望の日時<br>日・曜日・時間帯など</span> 57</th> 58<td> 59[textarea your-message class:content placeholder "(記入例) 金曜日の夜希望 など"] 60</td> 61</tr> 62 63<tr> 64<th> 65<span class="any">任意</span><span>メッセージ</span> 66</th> 67<td> 68[textarea your-message class:content placeholder "メッセージをご記入ください"] 69</td> 70</tr> 71</table> 72[group group-shibitosu] 73<table class="inquiry"> 74<tr> 75<th> 76<span class="haveto">必須</span><span>生年月日・出生時間</span> 77</th> 78<td> 79[select* birth-year include_blank class:drop "1920" "1921" "1922" "1923" "1924" "1925" "1926" "1927" "1928" "1929" "1930" "1931" "1932" "1933" "1934" "1935" "1936" "1937" "1938" "1939" "1940" "1941" "1942" "1943" "1944" "1945" "1946" "1947" "1948" "1949" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005" "2006" "2007" "2008" "2009" "2010" "2011" "2012" "2013" "2014" "2015" "2016" "2017" "2018" "2019" "2020" "2021" ]年 [select* month include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月 [select* date include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日[select* time include_blank "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" ]時[select* minutes include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31" "32" "33" "34" "35" "36" "37" "38" "39" "40" "41" "42" "43" "44" "45" "46" "47" "48" "49" "50" "51" "52" "53" "54" "55" "56" "57" "58" "59" ]分 80</td> 81</tr> 82<tr> 83<th> 84<span class="haveto">必須</span><span>出生地</span> 85</th> 86<td> 87[select* dpmenu include_blank class:drop "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"] 88</td> 89</tr> 90<tr> 91<th> 92<span class="any">任意</span><span>2人目以降 <br>お名前 フリガナ 性別 生年月日/出生時間 出生地(都道府県)</span> 93</th> 94<td> 95[textarea your-message class:content placeholder "お名前 フリガナ 性別 生年月日 出生地(都道府県)"] 96</td> 97</tr> 98[/group] 99</table> 100 101[acceptance acceptance-442 class:spam1]内容を確認しこちらのボックスにチェックを入れてから送信してください。[/acceptance] 102[submit id:formbtn "上記の内容で送信する"]

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

回答 CSSで表示位置をずらしてみましょう

フォームの作り方から勉強した方が良い気もしますが…
以下のコードを試してみてください。
※根本的な解決にはなりません

CSS

1td { 2 position: relative; 3} 4 5wpcf7-not-valid-tip { 6 position: absolute; 7 top: 50px; 8 right: 0px; 9}

上記のコードを試すとエラーが全部重なって右側に表示されると思います。
5個の項目のどれが未入力でも重なるので大丈夫でしょう。
JSとか使えるともっと違う方法もあるんですけどね。

以下蛇足です。
予約フォームなのに「出生時間」って、埋められる人いない気がするのですが。
もしかして占いサイトだったりしますか?
時間の部分はせめて必須から外した方が予約者にやさしいと思いますよ。

投稿2021/02/21 12:37

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問