clickwrap-web-integration-sample/index.html at main · namirialgroup/clickwrap-web-integration-sample · GitHub

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
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clickwrap Web Integration</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <header class="topbar">
    <span class="brand">Clickwrap Web Integration</span>
  </header>

  <main class="wrapper">
    <p class="intro">
      Sample form showing how to integrate the ClickWrap consent widget into a plain
      HTML/JS page, no framework required. See the <a href="./README.md">README</a>
      for the step-by-step explanation.
    </p>

    <form id="agreement-form" autocomplete="off">
      <div id="form-fields">
        <div class="field">
          <label for="name">First name</label>
          <input type="text" id="name" name="name" required>
        </div>

        <div class="field">
          <label for="surname">Last name</label>
          <input type="text" id="surname" name="surname" required>
        </div>

        <div class="field">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required>
        </div>

        <!-- Placeholder shown until the ClickWrap widget has finished rendering -->
        <div id="clickwrap-loading" class="loading">
          Loading consent text...
        </div>

        <!-- The ClickWrap widget is mounted inside this element by clickWrap.render() -->
        <div id="namirial__click-wrap" class="clickwrap-container hidden"></div>

        <div class="field" id="status-field"></div>

        <button id="submit" type="submit">
          <span class="spinner hidden"></span>
          <span class="btn-label">Submit</span>
        </button>
      </div>

      <!-- Shown in place of the form after a successful submission -->
      <div id="success-message" class="success-message hidden">
        <div class="success-icon">&#10003;</div>
        <p>Consent recorded successfully.</p>
        <button id="restart" type="button">Fill out again</button>
      </div>
    </form>
  </main>

  <script type="module" src="./js/app.js"></script>
</body>
</html>