teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

解決画像と文法の追加。

2019/11/26 02:36

投稿

Octor
Octor

スコア5

title CHANGED
File without changes
body CHANGED
@@ -87,4 +87,15 @@
87
87
  ```
88
88
 
89
89
  オリジナルテーマのfanctions.phpは何も記入していません。
90
- 直らずに困っています。。
90
+ 直らずに困っています。。
91
+
92
+ ##解決しました!
93
+ ご回答を参考に、CSSファイルに
94
+ ```
95
+ /* エラーメッセージの上部を消去 */
96
+ div.screen-reader-response{
97
+ display: none;
98
+ }
99
+ ```
100
+ を追記したら綺麗に消えてくれました!
101
+ ![イメージ説明](218291d85ed8b764f275a2224317d7ea.png)

3

文法の追加、画像を見やすく修正

2019/11/26 02:36

投稿

Octor
Octor

スコア5

title CHANGED
@@ -1,1 +1,1 @@
1
- WordPressのcontact form7のエラーメッセージが二重に表示されてしまうあと、位置が変です。
1
+ WordPressのcontact form7のエラーメッセージが二重に表示され
body CHANGED
@@ -1,21 +1,90 @@
1
- WordPressオリジナルテーマを作りcontact form7でフォームを作りました。
1
+ WordPressオリジナルテーマ)にcontact form7でフォームを作りました。
2
- 送受信等のフォーム機能は問題ないのですが、
3
- 必須項目未入力のエラーメッセージが二重に表示されてしまいます。
2
+ 送受信等機能は問題ないですが、エラーメッセージが二重に表示されてしまいます。上の4行のエラーメッセージは無くしたいです。
4
- (以下の図参照。黒い■部分は伏字です。)
5
- 上の4行のエラーメッセージは無くしたいです。
6
-
7
- ###オリジナルテーマでの動作(エラーメッセージが二重に表示)
8
- ![イメージ説明](47f74c4a8fa4ffb924d09f53c3b46180.png)
3
+ ![イメージ説明](b8b69ef1224bd58beb0afd3fe5e68f04.png)
9
-
10
- ###標準テーマ(Twenty Seventeen)での動作(問題なし)
11
- ![イメージ説明](e1dad287437f27d9ca2f1cbb68352e3a.png)
12
-
13
- ###オリジナルテーマのフォーム部分のHTML記述
4
+ ####オリジナルテーマのフォーム部分のHTML記述
14
5
  ```HTMLの記述
15
- <section class="contat_form">
6
+ <section class="nyukai_form">
16
7
  <h2>入会の申し込み</h2>
17
8
  <?php echo do_shortcode( '[contact-form-7 id="●●●" title="入会申し込みフォーム"]' ); ?>
18
9
  </section>
10
+ ```#**↓**エラーメッセージが出たときのソース(HTML)
19
11
  ```
20
- ※●●●は伏字です。
21
- ※オリジナルテーマのfanctions.phpは何も記入していません。
12
+ <section class="nyukai_form">
13
+ <h2>会の申込み</h2>
14
+ <div>
15
+ <div role="form" class="wpcf7" id="wpcf7-■■-■■" lang="ja" dir="ltr">
16
+ <div class="screen-reader-response" role="alert">入力内容に問題があります。内容をご確認の上、再度お試しください。
17
+ <ul>
18
+ <li>必須項目に入力してください。</li>
19
+ <li>必須項目に入力してください。</li>
20
+ <li>必須項目に入力してください。</li>
21
+ </ul>
22
+ </div>
23
+ <form action="/#wpcf7-■■-■■" method="post" class="wpcf7-form invalid" novalidate="novalidate">
24
+ <div style="display: none;">
25
+ <input type="hidden" name="_wpcf7" value="■" />
26
+ <input type="hidden" name="_wpcf7_version" value="5.1.5" />
27
+ <input type="hidden" name="_wpcf7_locale" value="ja" />
28
+ <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-■■-■■" />
29
+ <input type="hidden" name="_wpcf7_container_post" value="0" />
30
+ <input type="hidden" name="g-recaptcha-response" value="" />
31
+ </div>
32
+ <dl class="contact7">
33
+ <dt>お名前<span class="must">必須</span></dt>
34
+ <dd>
35
+ <span class="wpcf7-form-control-wrap ■■■■">
36
+ <input type="text" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例:■■■■■■■■" />
37
+ <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span>
38
+ </span>
39
+ </dd>
40
+ <dt>■■■■<span class="must">必須</span></dt>
41
+ <dd>
42
+ <span class="wpcf7-form-control-wrap ■■■■">
43
+ <input type="text" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例:■■■■■■■■" />
44
+ </dd>
45
+ <dt>メールアドレス<span class="must">必須</span></dt>
46
+ <dd>
47
+ <span class="wpcf7-form-control-wrap ■■■■">
48
+ <input type="email" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="例:■■■■■■■■" />
49
+ <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span>
50
+ </span>
51
+ </dd>
52
+ <dt>電話番号<span class="optional">任意</span></dt>
53
+ <dd>
54
+ <span class="wpcf7-form-control-wrap ■■■■">
55
+ <input type="tel" name="■■■■" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="例:000-0000-0000" />
56
+ </span>
57
+ </dd>
58
+ <dt>ご質問等<span class="optional">任意</span></dt>
59
+ <dd>
60
+ <span class="wpcf7-form-control-wrap ■■■■">
61
+ <textarea name="■■■■" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="ご質問等がございましたらご入力ください。"></textarea>
62
+ </span>
63
+ </dd>
64
+ </dl>
65
+ <p>
66
+ <span class="wpcf7-form-control-wrap ■■■■">
67
+ <span class="wpcf7-form-control wpcf7-acceptance">
68
+ <span class="wpcf7-list-item">
69
+ <label>
70
+ <input type="checkbox" name="■■■■" value="1" aria-invalid="false" />
71
+ <span class="wpcf7-list-item-label">個人情報の取扱いについて、同意の上送信します。</span>
72
+ </label>
73
+ </span>
74
+ </span>
75
+ </span>
76
+ </p>
77
+ <p class="btn_contact7">
78
+ <input type="submit" value="上記の内容で申込をする" class="wpcf7-form-control wpcf7-submit" />
79
+ </p>
80
+ <div class="wpcf7-response-output wpcf7-validation-errors" role="alert">
81
+ 入力内容に問題があります。内容をご確認の上、再度お試しください。
82
+ </div>
83
+ </form>
84
+ </div>
85
+ </div>
86
+ </section>
87
+ ```
88
+
89
+ オリジナルテーマのfanctions.phpは何も記入していません。
90
+ 直らずに困っています。。

2

標準テーマでの動作時の画像キャプチャと、オリジナルテーマのHTML記述の追加。

2019/11/25 10:49

投稿

Octor
Octor

スコア5

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,21 @@
1
1
  WordPressのオリジナルテーマを作りcontact form7でフォームを作りました。
2
+ 送受信等のフォーム機能は問題ないのですが、
2
- 送受信等のフォーム機能は問題ないのですが、必須項目未入力の際のエラーメッセージが二重に表示されてしまいます。(以下の図参照。黒い■部分は伏字です。)
3
+ 必須項目未入力の際のエラーメッセージが二重に表示されてしまいます。
4
+ (以下の図参照。黒い■部分は伏字です。)
3
5
  上の4行のエラーメッセージは無くしたいです。
4
6
 
7
+ ###オリジナルテーマでの動作(エラーメッセージが二重に表示)
5
8
  ![イメージ説明](47f74c4a8fa4ffb924d09f53c3b46180.png)
6
9
 
10
+ ###標準テーマ(Twenty Seventeen)での動作(問題なし)
11
+ ![イメージ説明](e1dad287437f27d9ca2f1cbb68352e3a.png)
12
+
13
+ ###オリジナルテーマのフォーム部分のHTML記述
14
+ ```HTMLの記述
15
+ <section class="contat_form">
16
+ <h2>入会の申し込み</h2>
17
+ <?php echo do_shortcode( '[contact-form-7 id="●●●" title="入会申し込みフォーム"]' ); ?>
18
+ </section>
19
+ ```
20
+ ※●●●は伏字です。
7
- fanctions.phpは何も記入していません。。。
21
+ ※オリジナルテーマのfanctions.phpは何も記入していません。

1

文章の修正

2019/11/24 05:21

投稿

Octor
Octor

スコア5

title CHANGED
File without changes
body CHANGED
@@ -1,42 +1,7 @@
1
- WordPressオリジナルテーマを作り
1
+ WordPressオリジナルテーマを作りcontact form7でフォームを作りました。
2
- コンタクトフォームを実装しようとしています。
3
-
4
- プラグイン contact form7 を導入して送受信等のフォーム機能は問題ないのですが、
5
- 必須項目未入力の際のエラーメッセージが変な位置に二重に表示されてしまいます。
2
+ 送受信等のフォーム機能は問題ないのですが、必須項目未入力の際のエラーメッセージが二重に表示されてしまいます。(以下の図参照。黒い■部分は伏字です。)
6
- (以下の図参照ください。黒い■部分は伏字です。)
7
3
  上の4行のエラーメッセージは無くしたいです。
8
4
 
9
5
  ![イメージ説明](47f74c4a8fa4ffb924d09f53c3b46180.png)
10
6
 
11
- #htmlファイルの記述
12
- ```HTMLの記述
13
- <section class="contat_form">
14
- <h2>入会の申し込み</h2>
15
- <?php echo do_shortcode( '[contact-form-7 id="●" title="入会申し込みフォーム"]' ); ?>
16
- </section>
17
-
18
- ```
19
- #contact form7の記述
20
- ```contact form7の記述
21
- <dl class="contact7">
22
- <dt>お名前<span class="must">必須</span></dt>
23
- <dd>[text* ●● placeholder akismet:author "例:●●●●●●"]</dd>
24
- <dt>●●●●●●<span class="must">必須</span></dt>
25
- <dd>[text* ●● placeholder akismet:author "例:●●●●●●"]</dd>
26
- <dt>メールアドレス<span class="must">必須</span></dt>
27
- <dd>[email* ●● placeholder akismet:author_email "例:●●●●●●"]</dd>
28
- <dt>電話番号<span class="optional">任意</span></dt>
29
- <dd>[tel ●● placeholder "例:000-0000-0000"]</dd>
30
- <dt>ご質問等<span class="optional">任意</span></dt>
31
- <dd>[textarea your-message placeholder "ご質問等がございましたらご入力ください。"]</dd>
32
- </dl>
33
- <center>[acceptance acceptance-303] 個人情報の取扱いについて、同意の上送信します。[/acceptance]</center>
34
- <p class="btn_contact7">[submit "上記の内容で申込をする"]</p>
35
- ```
36
- ※●は伏字です。
37
- CSSはデザインのみいじっています。
38
- fanctions.phpは何も記入していません。
7
+ fanctions.phpは何も記入していません。。。
39
- 別のサイトを作った時はエラーメッセージは問題なく表示されたので、
40
- 原因が分からず困っています。
41
-
42
- 解決法があればご教示いただけると助かります。