質問編集履歴

4

解決画像と文法の追加。

2019/11/26 02:36

投稿

Octor
Octor

スコア5

test CHANGED
File without changes
test CHANGED
@@ -177,3 +177,25 @@
177
177
  オリジナルテーマのfanctions.phpは何も記入していません。
178
178
 
179
179
  直らずに困っています。。
180
+
181
+
182
+
183
+ ##解決しました!
184
+
185
+ ご回答を参考に、CSSファイルに
186
+
187
+ ```
188
+
189
+ /* エラーメッセージの上部を消去 */
190
+
191
+ div.screen-reader-response{
192
+
193
+ display: none;
194
+
195
+ }
196
+
197
+ ```
198
+
199
+ を追記したら綺麗に消えてくれました!
200
+
201
+ ![イメージ説明](218291d85ed8b764f275a2224317d7ea.png)

3

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

2019/11/26 02:36

投稿

Octor
Octor

スコア5

test CHANGED
@@ -1 +1 @@
1
- WordPressのcontact form7のエラーメッセージが二重に表示されてしまうあと、位置が変です。
1
+ WordPressのcontact form7のエラーメッセージが二重に表示され
test CHANGED
@@ -1,32 +1,14 @@
1
- WordPressオリジナルテーマを作りcontact form7でフォームを作りました。
1
+ WordPressオリジナルテーマ)にcontact form7でフォームを作りました。
2
2
 
3
- 送受信等のフォーム機能は問題ないのですが、
3
+ 送受信等の機能は問題ないのですが、エラーメッセージが二重に表示されてしまいます。上の4行のエラーメッセージは無くしたいです。
4
4
 
5
- 必須項目未入力の際のエラーッセージが二重に表示されてしまいます。
5
+ ![イメージ説明](b8b69ef1224bd58beb0afd3fe5e68f04.png)
6
6
 
7
- (以下の図参照。黒い■部分は伏字です。)
8
-
9
- 上の4行のエラーメッセージは無くしたいです。
10
-
11
-
12
-
13
- ###オリジナルテーマでの動作(エラーメッセージが二重に表示)
14
-
15
- ![イメージ説明](47f74c4a8fa4ffb924d09f53c3b46180.png)
16
-
17
-
18
-
19
- ###標準テーマ(Twenty Seventeen)での動作(問題なし)
20
-
21
- ![イメージ説明](e1dad287437f27d9ca2f1cbb68352e3a.png)
22
-
23
-
24
-
25
- ###オリジナルテーマのフォーム部分のHTML記述
7
+ ####オリジナルテーマのフォーム部分のHTML記述
26
8
 
27
9
  ```HTMLの記述
28
10
 
29
- <section class="contat_form">
11
+ <section class="nyukai_form">
30
12
 
31
13
  <h2>入会の申し込み</h2>
32
14
 
@@ -34,8 +16,164 @@
34
16
 
35
17
  </section>
36
18
 
19
+ ```#**↓**エラーメッセージが出たときのソース(HTML)
20
+
37
21
  ```
38
22
 
39
- ※●●●は伏字です。
23
+ <section class="nyukai_form">
40
24
 
41
- ※オリジナルテーマのfanctions.phpは何も記入していません。
25
+ <h2>会の申込み</h2>
26
+
27
+ <div>
28
+
29
+ <div role="form" class="wpcf7" id="wpcf7-■■-■■" lang="ja" dir="ltr">
30
+
31
+ <div class="screen-reader-response" role="alert">入力内容に問題があります。内容をご確認の上、再度お試しください。
32
+
33
+ <ul>
34
+
35
+ <li>必須項目に入力してください。</li>
36
+
37
+ <li>必須項目に入力してください。</li>
38
+
39
+ <li>必須項目に入力してください。</li>
40
+
41
+ </ul>
42
+
43
+ </div>
44
+
45
+ <form action="/#wpcf7-■■-■■" method="post" class="wpcf7-form invalid" novalidate="novalidate">
46
+
47
+ <div style="display: none;">
48
+
49
+ <input type="hidden" name="_wpcf7" value="■" />
50
+
51
+ <input type="hidden" name="_wpcf7_version" value="5.1.5" />
52
+
53
+ <input type="hidden" name="_wpcf7_locale" value="ja" />
54
+
55
+ <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-■■-■■" />
56
+
57
+ <input type="hidden" name="_wpcf7_container_post" value="0" />
58
+
59
+ <input type="hidden" name="g-recaptcha-response" value="" />
60
+
61
+ </div>
62
+
63
+ <dl class="contact7">
64
+
65
+ <dt>お名前<span class="must">必須</span></dt>
66
+
67
+ <dd>
68
+
69
+ <span class="wpcf7-form-control-wrap ■■■■">
70
+
71
+ <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="例:■■■■■■■■" />
72
+
73
+ <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span>
74
+
75
+ </span>
76
+
77
+ </dd>
78
+
79
+ <dt>■■■■<span class="must">必須</span></dt>
80
+
81
+ <dd>
82
+
83
+ <span class="wpcf7-form-control-wrap ■■■■">
84
+
85
+ <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="例:■■■■■■■■" />
86
+
87
+ </dd>
88
+
89
+ <dt>メールアドレス<span class="must">必須</span></dt>
90
+
91
+ <dd>
92
+
93
+ <span class="wpcf7-form-control-wrap ■■■■">
94
+
95
+ <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="例:■■■■■■■■" />
96
+
97
+ <span role="alert" class="wpcf7-not-valid-tip">必須項目に入力してください。</span>
98
+
99
+ </span>
100
+
101
+ </dd>
102
+
103
+ <dt>電話番号<span class="optional">任意</span></dt>
104
+
105
+ <dd>
106
+
107
+ <span class="wpcf7-form-control-wrap ■■■■">
108
+
109
+ <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" />
110
+
111
+ </span>
112
+
113
+ </dd>
114
+
115
+ <dt>ご質問等<span class="optional">任意</span></dt>
116
+
117
+ <dd>
118
+
119
+ <span class="wpcf7-form-control-wrap ■■■■">
120
+
121
+ <textarea name="■■■■" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="ご質問等がございましたらご入力ください。"></textarea>
122
+
123
+ </span>
124
+
125
+ </dd>
126
+
127
+ </dl>
128
+
129
+ <p>
130
+
131
+ <span class="wpcf7-form-control-wrap ■■■■">
132
+
133
+ <span class="wpcf7-form-control wpcf7-acceptance">
134
+
135
+ <span class="wpcf7-list-item">
136
+
137
+ <label>
138
+
139
+ <input type="checkbox" name="■■■■" value="1" aria-invalid="false" />
140
+
141
+ <span class="wpcf7-list-item-label">個人情報の取扱いについて、同意の上送信します。</span>
142
+
143
+ </label>
144
+
145
+ </span>
146
+
147
+ </span>
148
+
149
+ </span>
150
+
151
+ </p>
152
+
153
+ <p class="btn_contact7">
154
+
155
+ <input type="submit" value="上記の内容で申込をする" class="wpcf7-form-control wpcf7-submit" />
156
+
157
+ </p>
158
+
159
+ <div class="wpcf7-response-output wpcf7-validation-errors" role="alert">
160
+
161
+ 入力内容に問題があります。内容をご確認の上、再度お試しください。
162
+
163
+ </div>
164
+
165
+ </form>
166
+
167
+ </div>
168
+
169
+ </div>
170
+
171
+ </section>
172
+
173
+ ```
174
+
175
+
176
+
177
+ オリジナルテーマのfanctions.phpは何も記入していません。
178
+
179
+ 直らずに困っています。。

2

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

2019/11/25 10:49

投稿

Octor
Octor

スコア5

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

1

文章の修正

2019/11/24 05:21

投稿

Octor
Octor

スコア5

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