質問編集履歴

4

修正

2020/03/02 01:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,19 +8,35 @@
8
8
 
9
9
  ```HTML
10
10
 
11
+ <form action="#" method="post" enctype="multipart/form-datta">
12
+
13
+ <table>
14
+
15
+ <tbody>
16
+
17
+ <tr>
18
+
11
- <div class="heading_title">採用フォーム</div>
19
+ <td> <div id="btn">画像を選択</div>
12
-
13
- <div class="form_design">
20
+
14
-
15
- <a>下記項目をご記入の上、「画像を選択」ボタンで履歴書・職務経歴書を添付し、「応募する」ボタンを押してご応募ください。</a>
16
-
17
- <?php echo do_shortcode('[mwform_formkey key="311"]'); ?>
21
+ <input type="file" name="filename" id="files" multiple></td>
22
+
18
-
23
+ <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td>
19
-
20
-
24
+
21
- </div>
25
+ </tr>
26
+
22
-
27
+ <tr>
28
+
29
+ <td></td>
30
+
31
+ <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td>
32
+
23
- </div>
33
+ </tr>
34
+
35
+ </tbody>
36
+
37
+ </table>
38
+
39
+ </form>
24
40
 
25
41
  ```
26
42
 

3

編集

2020/03/02 01:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,210 +8,20 @@
8
8
 
9
9
  ```HTML
10
10
 
11
- <?php /* Template Name: apply */ ?>
12
-
13
-
14
-
15
- <!-- ヘッダー読み込み -->
16
-
17
- <strong><?php get_header("apply") ?></strong>
18
-
19
-
20
-
21
- <div class="top_body">
22
-
23
-
24
-
25
- <!-- 背景アニメーション -->
26
-
27
- <div id="animation"></div>
28
-
29
- <script src="<?php echo get_template_directory_uri() ?>/particles.js" type="text/javaScript" charset="utf-8"></script>
30
-
31
- <script src="<?php echo get_template_directory_uri() ?>/setting.js" type="text/javaScript" charset="utf-8"></script>
32
-
33
-
34
-
35
- <!-- 上部メニュー -->
36
-
37
- <div class="head">
38
-
39
- <div class="head_inner">
40
-
41
- <li class="head_company_logo"><span>rogo</span></li>
42
-
43
- <a href="<?php echo home_url(); ?>" class="head_company_name">company name</a>
44
-
45
-
46
-
47
- <div class="header-logo-menu">
48
-
49
- <div id="nav-drawer">
50
-
51
- <input id="nav-input" type="checkbox" class="nav-unshown">
52
-
53
- <label id="nav-back" for="nav-input"><span></span></label>
54
-
55
- <label id="nav-open" for="nav-input"><span></span></label>
56
-
57
- <label class="nav-unshown" id="nav-close" for="nav-input"></label>
58
-
59
- <div id="nav-content">
60
-
61
- <div class="head_text">
62
-
63
- <ul><a href="<?php echo home_url( 'service' ); ?>"><li class="head_title_text"><span class="service">サービス</span></a></ul>
64
-
65
- <ul><a href="<?php echo home_url( 'information' ); ?>" class="head_title_text"><span class="information">企業情報</span></a></ul>
66
-
67
- <ul><a href="<?php echo home_url( 'history' ); ?>" class="head_title_text"><span class="history">沿革</span></a></ul>
68
-
69
- <ul id="white"><a href="<?php echo home_url( 'employment' ); ?>" class="head_title_text"><span class="employment">採用情報</span></a></ul>
70
-
71
- <ul><a href="<?php echo home_url( 'contact' ); ?>" class="head_title_text"><span class="contact">お問い合わせ</span></a></ul>
72
-
73
- </div>
74
-
75
- </div>
76
-
77
- </div>
78
-
79
- </div>
80
-
81
- </div>
82
-
83
- </div>
84
-
85
-
86
-
87
- <div class="inner">
88
-
89
- <div class="inner_contents">
90
-
91
- <!-- 採用フォーム -->
92
-
93
- <div class="heading">
94
-
95
- <div class="heading_title">採用フォーム</div>
11
+ <div class="heading_title">採用フォーム</div>
96
-
12
+
97
- <div class="form_design">
13
+ <div class="form_design">
98
-
14
+
99
-    <a>下記項目をご記入の上、「画像を選択」ボタンで履歴書・職務経歴書を添付し、「応募する」ボタンを押してご応募ください。</a>
15
+ <a>下記項目をご記入の上、「画像を選択」ボタンで履歴書・職務経歴書を添付し、「応募する」ボタンを押してご応募ください。</a>
100
-
16
+
101
- <?php echo do_shortcode('[mwform_formkey key="311"]'); ?>
17
+ <?php echo do_shortcode('[mwform_formkey key="311"]'); ?>
102
18
 
103
19
 
104
20
 
105
- </div>
106
-
107
- </div>
108
-
109
- <!-- ページTOPへ移動 -->
110
-
111
- <div id="move">
112
-
113
- <div class="page_top">Page top
114
-
115
- <div class="move_image"></div>
116
-
117
- </div>
118
-
119
- </div>
120
-
121
- <!-- ページ下部文字 -->
122
-
123
- <div class="page_title">
124
-
125
- <div class="page_title_inner">apply</div>
126
-
127
- </div>
128
-
129
-
130
-
131
- </div>
132
-
133
-
134
-
135
- </div>
136
-
137
- </div>
138
-
139
- <div class="foot">
140
-
141
- <div class="foot_inner">
142
-
143
- <!-- 下部各コンテンツ -->
144
-
145
- <ul class="foot_contents">
146
-
147
- <li class="foot_contents_service"><a href="<?php echo home_url( 'service' ); ?>">> サービス</a></li>
148
-
149
- <li class="foot_contents_information"><a href="<?php echo home_url( 'information' ); ?>">> 企業情報</a></li>
150
-
151
- <li class="foot_contents_history"><a href="<?php echo home_url( 'history' ); ?>">> 沿革</a></li>
152
-
153
- <li class="foot_contents_employment"><a href="<?php echo home_url( 'employment' ); ?>">> 採用情報</a></li>
154
-
155
- <li class="foot_contents_contact"><a href="<?php echo home_url( 'contact' ); ?>">> お問い合わせ</a></li>
156
-
157
- <li class="foot_contents_privacy"><a href="<?php echo home_url( 'privacy' ); ?>">> プライバシーポリシー</li></li>
158
-
159
- </ul>
160
-
161
-
162
-
163
- <!-- 下部所在地 -->
164
-
165
- <ul class="foot_addless">
166
-
167
- <div class="foot_title_inner clearfix">
168
-
169
- <a href="<?php echo home_url(); ?>">
170
-
171
- <li class="foot_title_logo"><span>rogo</span></li>
172
-
173
- <li class="foot_title_name">company name</li>
174
-
175
- </a>
176
-
177
21
  </div>
178
22
 
179
-
180
-
181
- <li class="foot_text">住 所 東京都テスト区テスト 1-1 <span>テストビル1階</span></li>
182
-
183
- <li class="foot_text">電 話 03-123-456</li>
184
-
185
- <li class="foot_text">メール test@test.co.jp</li>
186
-
187
- </ul>
188
-
189
- <li class="foot_map"></li>
190
-
191
-
192
-
193
23
  </div>
194
24
 
195
- </div>
196
-
197
-
198
-
199
- </div>
200
-
201
-
202
-
203
- <script src="<?php echo get_template_directory_uri() ?>/common.js" type="text/javaScript" charset="utf-8"></script>
204
-
205
- <script src="<?php echo get_template_directory_uri() ?>/top.js" type="text/javaScript" charset="utf-8"></script>
206
-
207
- <script src="<?php echo get_template_directory_uri() ?>/apply.js" type="text/javaScript" charset="utf-8"></script>
208
-
209
-
210
-
211
- <!-- フッター読み込み -->
212
-
213
- <strong><?php get_footer() ?></strong>
214
-
215
25
  ```
216
26
 
217
27
 

2

追加

2020/03/02 01:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -404,6 +404,12 @@
404
404
 
405
405
 
406
406
 
407
+ WordPress上で見たHTML
408
+
409
+ ![HTML](8cb375d82a39898bf4c7cae31c0b0a70.png)
410
+
411
+
412
+
407
413
  この状態だと画像は一つしか選択できないのですが、一つのボタンで2つの画像を選択することは出来ないのでしょうか?
408
414
 
409
415
 

1

HTML追加

2020/03/02 01:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,228 +8,402 @@
8
8
 
9
9
  ```HTML
10
10
 
11
+ <?php /* Template Name: apply */ ?>
12
+
13
+
14
+
15
+ <!-- ヘッダー読み込み -->
16
+
17
+ <strong><?php get_header("apply") ?></strong>
18
+
19
+
20
+
21
+ <div class="top_body">
22
+
23
+
24
+
25
+ <!-- 背景アニメーション -->
26
+
27
+ <div id="animation"></div>
28
+
29
+ <script src="<?php echo get_template_directory_uri() ?>/particles.js" type="text/javaScript" charset="utf-8"></script>
30
+
31
+ <script src="<?php echo get_template_directory_uri() ?>/setting.js" type="text/javaScript" charset="utf-8"></script>
32
+
33
+
34
+
35
+ <!-- 上部メニュー -->
36
+
37
+ <div class="head">
38
+
39
+ <div class="head_inner">
40
+
41
+ <li class="head_company_logo"><span>rogo</span></li>
42
+
43
+ <a href="<?php echo home_url(); ?>" class="head_company_name">company name</a>
44
+
45
+
46
+
47
+ <div class="header-logo-menu">
48
+
49
+ <div id="nav-drawer">
50
+
11
- <form action="#" method="post" enctype="multipart/form-datta">
51
+ <input id="nav-input" type="checkbox" class="nav-unshown">
52
+
53
+ <label id="nav-back" for="nav-input"><span></span></label>
54
+
55
+ <label id="nav-open" for="nav-input"><span></span></label>
56
+
57
+ <label class="nav-unshown" id="nav-close" for="nav-input"></label>
58
+
59
+ <div id="nav-content">
60
+
61
+ <div class="head_text">
62
+
63
+ <ul><a href="<?php echo home_url( 'service' ); ?>"><li class="head_title_text"><span class="service">サービス</span></a></ul>
64
+
65
+ <ul><a href="<?php echo home_url( 'information' ); ?>" class="head_title_text"><span class="information">企業情報</span></a></ul>
66
+
67
+ <ul><a href="<?php echo home_url( 'history' ); ?>" class="head_title_text"><span class="history">沿革</span></a></ul>
68
+
69
+ <ul id="white"><a href="<?php echo home_url( 'employment' ); ?>" class="head_title_text"><span class="employment">採用情報</span></a></ul>
70
+
71
+ <ul><a href="<?php echo home_url( 'contact' ); ?>" class="head_title_text"><span class="contact">お問い合わせ</span></a></ul>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+
86
+
87
+ <div class="inner">
88
+
89
+ <div class="inner_contents">
90
+
91
+ <!-- 採用フォーム -->
92
+
93
+ <div class="heading">
94
+
95
+ <div class="heading_title">採用フォーム</div>
96
+
97
+ <div class="form_design">
98
+
99
+    <a>下記項目をご記入の上、「画像を選択」ボタンで履歴書・職務経歴書を添付し、「応募する」ボタンを押してご応募ください。</a>
100
+
101
+ <?php echo do_shortcode('[mwform_formkey key="311"]'); ?>
102
+
103
+
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ <!-- ページTOPへ移動 -->
110
+
111
+ <div id="move">
112
+
113
+ <div class="page_top">Page top
114
+
115
+ <div class="move_image"></div>
116
+
117
+ </div>
118
+
119
+ </div>
120
+
121
+ <!-- ページ下部文字 -->
122
+
123
+ <div class="page_title">
124
+
125
+ <div class="page_title_inner">apply</div>
126
+
127
+ </div>
128
+
129
+
130
+
131
+ </div>
132
+
133
+
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <div class="foot">
140
+
141
+ <div class="foot_inner">
142
+
143
+ <!-- 下部各コンテンツ -->
144
+
145
+ <ul class="foot_contents">
146
+
147
+ <li class="foot_contents_service"><a href="<?php echo home_url( 'service' ); ?>">> サービス</a></li>
148
+
149
+ <li class="foot_contents_information"><a href="<?php echo home_url( 'information' ); ?>">> 企業情報</a></li>
150
+
151
+ <li class="foot_contents_history"><a href="<?php echo home_url( 'history' ); ?>">> 沿革</a></li>
152
+
153
+ <li class="foot_contents_employment"><a href="<?php echo home_url( 'employment' ); ?>">> 採用情報</a></li>
154
+
155
+ <li class="foot_contents_contact"><a href="<?php echo home_url( 'contact' ); ?>">> お問い合わせ</a></li>
156
+
157
+ <li class="foot_contents_privacy"><a href="<?php echo home_url( 'privacy' ); ?>">> プライバシーポリシー</li></li>
158
+
159
+ </ul>
160
+
161
+
162
+
163
+ <!-- 下部所在地 -->
164
+
165
+ <ul class="foot_addless">
166
+
167
+ <div class="foot_title_inner clearfix">
168
+
169
+ <a href="<?php echo home_url(); ?>">
170
+
171
+ <li class="foot_title_logo"><span>rogo</span></li>
172
+
173
+ <li class="foot_title_name">company name</li>
174
+
175
+ </a>
176
+
177
+ </div>
178
+
179
+
180
+
181
+ <li class="foot_text">住 所 東京都テスト区テスト 1-1 <span>テストビル1階</span></li>
182
+
183
+ <li class="foot_text">電 話 03-123-456</li>
184
+
185
+ <li class="foot_text">メール test@test.co.jp</li>
186
+
187
+ </ul>
188
+
189
+ <li class="foot_map"></li>
190
+
191
+
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+
198
+
199
+ </div>
200
+
201
+
202
+
203
+ <script src="<?php echo get_template_directory_uri() ?>/common.js" type="text/javaScript" charset="utf-8"></script>
204
+
205
+ <script src="<?php echo get_template_directory_uri() ?>/top.js" type="text/javaScript" charset="utf-8"></script>
206
+
207
+ <script src="<?php echo get_template_directory_uri() ?>/apply.js" type="text/javaScript" charset="utf-8"></script>
208
+
209
+
210
+
211
+ <!-- フッター読み込み -->
212
+
213
+ <strong><?php get_footer() ?></strong>
214
+
215
+ ```
216
+
217
+
218
+
219
+ ```CSS
220
+
221
+ form{
222
+
223
+ width: 90%;
224
+
225
+ margin: auto;
226
+
227
+ }
228
+
229
+ .files{
230
+
231
+ background: none;
232
+
233
+ box-shadow: none;
234
+
235
+ border: none;
236
+
237
+ }
238
+
239
+
240
+
241
+ #btn{
242
+
243
+ background-color: #838383;
244
+
245
+ color: white;
246
+
247
+ content: "画像を選択";
248
+
249
+ cursor: pointer;
250
+
251
+ width: 140px;
252
+
253
+ height: 30px;
254
+
255
+ display: inline-block;
256
+
257
+ border-radius: 50px;
258
+
259
+ display: flex;
260
+
261
+ justify-content: center;
262
+
263
+ align-items: center;
264
+
265
+ float: left;
266
+
267
+ font-size: 15px;
268
+
269
+ }
270
+
271
+
272
+
273
+ #filename,
274
+
275
+ #filename2{
276
+
277
+ display: inline-block;
278
+
279
+ width: 90%;
280
+
281
+ height: 30px;
282
+
283
+ background-color: #EFF7FF;
284
+
285
+ border-radius: 6px;
286
+
287
+ border-color: #707070;
288
+
289
+ border-width: thin;
290
+
291
+ padding: 5px;
292
+
293
+ pointer-events: none;
294
+
295
+ }
296
+
297
+ table{
298
+
299
+ margin-top: 50px;
300
+
301
+ }
302
+
303
+
304
+
305
+ .image_box{
306
+
307
+ width: 100%;
308
+
309
+ padding: 0 0 10px 50px;
310
+
311
+ }
312
+
313
+
314
+
315
+ td{
316
+
317
+ padding-bottom: 10px;
318
+
319
+ }
320
+
321
+ ```
322
+
323
+
324
+
325
+ ```Javascript
326
+
327
+ $(function() {
328
+
329
+ $('#files').css({
330
+
331
+ 'position': 'absolute',
332
+
333
+ 'top': '-9999px'
334
+
335
+ }).change(function() {
336
+
337
+ var $files = $(this).prop('files');
338
+
339
+ $('#filename').css("display", "inline-block");
340
+
341
+ $('#filename').val( (typeof( $files[0] ) != 'undefined' )? $files[0].name : "" );
342
+
343
+
344
+
345
+ $('#filename2').css("display", "inline-block");
346
+
347
+ $('#filename2').val( (typeof( $files[1] ) != 'undefined' )? $files[1].name : "" );
348
+
349
+ });
350
+
351
+ $('#filename','#filename2').bind('keyup, keydown, keypress', function() {
352
+
353
+ return false;
354
+
355
+ });
356
+
357
+ $('#btn').click(function() {
358
+
359
+ $('#files').trigger('click');
360
+
361
+ });
362
+
363
+ });
364
+
365
+ ```
366
+
367
+
368
+
369
+ これをMW WP Form用に変更して以下のようにしました。
370
+
371
+ (Javascriptはそのままアップロードしています。)
372
+
373
+
374
+
375
+ ```
12
376
 
13
377
  <table>
14
378
 
15
- <tbody>
379
+ <tbody>
16
-
380
+
17
- <tr>
381
+ <tr>
18
-
382
+
19
- <td> <div id="btn">画像を選択</div>
383
+ <td> <div id="btn">画像を選択</div>
20
-
384
+
21
- <input type="file" name="filename" id="files" multiple></td>
385
+ [mwform_image type="file" name="filename" id="files" multiple]</td>
22
-
386
+
23
- <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td>
387
+ <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td>
24
-
388
+
25
- </tr>
389
+ </tr>
26
-
390
+
27
- <tr>
391
+ <tr>
28
-
392
+
29
- <td></td>
393
+ <td></td>
30
-
394
+
31
- <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td>
395
+ <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td>
32
-
396
+
33
- </tr>
397
+ </tr>
34
-
398
+
35
- </tbody>
399
+ </tbody>
36
400
 
37
401
  </table>
38
402
 
39
- </form>
40
-
41
403
  ```
42
404
 
43
405
 
44
406
 
45
- ```CSS
46
-
47
- form{
48
-
49
- width: 90%;
50
-
51
- margin: auto;
52
-
53
- }
54
-
55
- .files{
56
-
57
- background: none;
58
-
59
- box-shadow: none;
60
-
61
- border: none;
62
-
63
- }
64
-
65
-
66
-
67
- #btn{
68
-
69
- background-color: #838383;
70
-
71
- color: white;
72
-
73
- content: "画像を選択";
74
-
75
- cursor: pointer;
76
-
77
- width: 140px;
78
-
79
- height: 30px;
80
-
81
- display: inline-block;
82
-
83
- border-radius: 50px;
84
-
85
- display: flex;
86
-
87
- justify-content: center;
88
-
89
- align-items: center;
90
-
91
- float: left;
92
-
93
- font-size: 15px;
94
-
95
- }
96
-
97
-
98
-
99
- #filename,
100
-
101
- #filename2{
102
-
103
- display: inline-block;
104
-
105
- width: 90%;
106
-
107
- height: 30px;
108
-
109
- background-color: #EFF7FF;
110
-
111
- border-radius: 6px;
112
-
113
- border-color: #707070;
114
-
115
- border-width: thin;
116
-
117
- padding: 5px;
118
-
119
- pointer-events: none;
120
-
121
- }
122
-
123
- table{
124
-
125
- margin-top: 50px;
126
-
127
- }
128
-
129
-
130
-
131
- .image_box{
132
-
133
- width: 100%;
134
-
135
- padding: 0 0 10px 50px;
136
-
137
- }
138
-
139
-
140
-
141
- td{
142
-
143
- padding-bottom: 10px;
144
-
145
- }
146
-
147
- ```
148
-
149
-
150
-
151
- ```Javascript
152
-
153
- $(function() {
154
-
155
- $('#files').css({
156
-
157
- 'position': 'absolute',
158
-
159
- 'top': '-9999px'
160
-
161
- }).change(function() {
162
-
163
- var $files = $(this).prop('files');
164
-
165
- $('#filename').css("display", "inline-block");
166
-
167
- $('#filename').val( (typeof( $files[0] ) != 'undefined' )? $files[0].name : "" );
168
-
169
-
170
-
171
- $('#filename2').css("display", "inline-block");
172
-
173
- $('#filename2').val( (typeof( $files[1] ) != 'undefined' )? $files[1].name : "" );
174
-
175
- });
176
-
177
- $('#filename','#filename2').bind('keyup, keydown, keypress', function() {
178
-
179
- return false;
180
-
181
- });
182
-
183
- $('#btn').click(function() {
184
-
185
- $('#files').trigger('click');
186
-
187
- });
188
-
189
- });
190
-
191
- ```
192
-
193
-
194
-
195
- これをMW WP Form用に変更して以下のようにしました。
196
-
197
- (Javascriptはそのままアップロードしています。)
198
-
199
-
200
-
201
- ```
202
-
203
- <table>
204
-
205
- <tbody>
206
-
207
- <tr>
208
-
209
- <td> <div id="btn">画像を選択</div>
210
-
211
- [mwform_image type="file" name="filename" id="files" multiple]</td>
212
-
213
- <td class="image_box"><input type="text" id="filename" placeholder="選択されていません" readonly></td>
214
-
215
- </tr>
216
-
217
- <tr>
218
-
219
- <td></td>
220
-
221
- <td class="image_box"><input type="text" id="filename2" placeholder="選択されていません" readonly></td>
222
-
223
- </tr>
224
-
225
- </tbody>
226
-
227
- </table>
228
-
229
- ```
230
-
231
-
232
-
233
407
  この状態だと画像は一つしか選択できないのですが、一つのボタンで2つの画像を選択することは出来ないのでしょうか?
234
408
 
235
409