lastprojectworkoutXpress/suggestion.html at main · Anupkumarpandey1/lastprojectworkoutXpress · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Form Title</title>
  <link rel="stylesheet" href="styles.css">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

      body {
        background-image: url("https://i.pinimg.com/564x/1f/d4/39/1fd4398cb4eb02502234efa6667c28cf.jpg");
        background-size: cover;
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
      }

      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }

      form {
        width: 100%;
      }

      section {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
      }

      h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
        color: #333;
      }

      input[type=text],
      input[type=number],
      input[type=tel],
      textarea {
        width: calc(100% - 22px);
        padding: 12px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 1.2em;
      }

      input[type=text]:focus,
      input[type=number]:focus,
      input[type=tel]:focus,
      textarea:focus {
        outline: none;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
      }

      button {
        background-color: #5c3d82;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.2em;
      }

      button:hover {
        opacity: 0.8;
      }

      button:focus {
        outline: none;
      }

      button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }

      /* Styling for custom alert */
      .custom-alert {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        padding: 20px;
        max-width: 300px;
        margin: 0 auto;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
      }

    </style>
</head>
<body>
  <div class="container">
   <form action="https://formspree.io/f/xanwnpjg" method="POST" class="contact__form">
      <section>
        <h2 id="first-name-label">First Name:</h2>
        <input type="text" id="firstName" name="firstName" placeholder="First Name" required />
        <br />
        <h2 id="last-name-label">Last Name:</h2>
        <input type="text" id="lastName" name="lastName" placeholder="Last Name" required />
        <br />
        <h2 id="age-label">Age:</h2>
        <input type="number" id="age" name="age" min="1" max="110" placeholder="Age" required />
        <br />
        <h2 id="contact-number-label">Contact Number:</h2>
        <input type="tel" id="contactNumber" name="contactNumber" placeholder="Contact Number" required/>
        <br />
        <h2 id="suggestion-box-label">Suggestion Box:</h2>
        <textarea id="suggestionBox" name="suggestionBox" placeholder="Enter your suggestions here." rows="4" cols="50" required></textarea>
        <br />
        <button type="submit" id="submit-button" >Submit</button>
      </section>
    </form>
  </div>

  <script>
    document.getElementById('suggestion-form').addEventListener('submit', function (e) {
      e.preventDefault();
      // Perform any necessary form validation here

      // Create and style a custom alert
      const alertContainer = document.createElement('div');
      alertContainer.classList.add('custom-alert');
      alertContainer.innerHTML = "<p style='font-size: 1.5em; color: #5c3d82;'>Thank you for your suggestion!</p>";

      // Append the alert to the body
      document.body.appendChild(alertContainer);

      // Remove the alert after 3 seconds
      setTimeout(function() {
        alertContainer.remove();
        // Redirect back to the main page
        window.location.href = "index.html";
      }, 3000);
    });
  </script>
</body>
</html>