質問編集履歴

1

内容詳しく記入してます。わかる範囲でcodeも記入ずみです。動作できると思うのですが、素人ですいません

2020/12/20 13:10

投稿

nobinomio
nobinomio

スコア43

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,73 @@
20
20
 
21
21
  どなたかわかる方教えていただけますか?
22
22
 
23
- ```HTML
23
+ ```HTML
24
+
25
+ <head>
26
+
27
+ <meta charset="UTF-8">
28
+
29
+ <title>formrun.js - Confirm mode</title>
30
+
31
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
32
+
33
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
34
+
35
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
36
+
37
+ <script src="https://sdk.form.run/js/v2/formrun.js"></script>
38
+
39
+ </head>
40
+
41
+
42
+
43
+ <body>
44
+
45
+
46
+
47
+ <div class="container">
48
+
49
+ <h1>formrun.js <small> - Confirm mode</small></h1>
50
+
51
+
52
+
53
+ <div class="card">
54
+
55
+ <h3 class="card-header" data-formrun-hide-if-confirm>フォームを入力してください</h3>
56
+
57
+ <h3 class="card-header" data-formrun-show-if-confirm>確認画面</h3>
58
+
59
+
60
+
61
+ <div class="card-block">
62
+
63
+ <form class="formrun" action="#" method="get" data-formrun-confirm>
64
+
65
+ <div class="form-group row"
66
+
67
+ data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="お名前">
68
+
69
+ <label class="col-xs-3 col-form-label" for="name">お名前</label>
70
+
71
+ <div class="col-xs-9" data-formrun-hide-if-confirm>
72
+
73
+ <input type="text" class="form-control" id="name" name="お名前"
74
+
75
+ data-formrun-required data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
76
+
77
+ <div class="text-danger" data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>
78
+
79
+ </div>
80
+
81
+ <div class="col-xs-9" data-formrun-show-if-confirm>
82
+
83
+ <span data-formrun-confirm-value="お名前"></span>
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+
24
90
 
25
91
  <div class="form-group row">
26
92
 
@@ -128,6 +194,32 @@
128
194
 
129
195
  </div>
130
196
 
197
+ <div>
198
+
199
+ <a href="javascript:void(0)" class="btn btn-secondary" data-formrun-back-button>戻る</a>
200
+
201
+ <button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">確認</button>
202
+
203
+ </div>
204
+
205
+ </form>
206
+
207
+ </div>
208
+
209
+ </div>
210
+
211
+
212
+
213
+ </div><!-- /.container -->
214
+
215
+
216
+
217
+ </body>
218
+
219
+ </html>
220
+
221
+
222
+
131
223
  ```
132
224
 
133
225
  ```javascript
@@ -203,3 +295,13 @@
203
295
  </script>
204
296
 
205
297
  ```
298
+
299
+ ```CSS
300
+
301
+ body {
302
+
303
+ padding: 50px 0 100px;
304
+
305
+ }
306
+
307
+ ```