General-Projects/Payment gateway/Components/contact.html at 72bbb3d88e3799031970f4c85bd5f5477cdde3d5 · codemistic/General-Projects · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
        <link href="https://fonts.googleapis.com/
        css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
    <title>Contact Us</title>

    <style>
        .h1-tag{
            text-align: center;
            margin-top: 4%;
        }
        .form-content-section{
            width: 50%;
            margin-top: 3%;
            margin-left: 25%;
        }
        @media screen and (max-width: 600px){
            .form-content-section{
                width: 100%;
                margin-top: 10%;
                margin-left: 0;
            }
        }

        @media screen and (max-width: 800px){
            .form-content-section{
                width: 100%;
                margin-top: 10%;
                margin-left: 0;
            }
        }

        @media screen and (max-width: 600px){
            .form-group{
                margin-left: 10px;
                margin-right: 10px;
            }
            .btn-primary{
                margin-left: 10px;
            }
        }
        @media screen and (max-width: 800px){
            .form-group{
                margin-left: 20px;
                margin-right: 20px;
            }
            .btn-primary{
                margin-left: 20px;
            }
        }
        .myclass{
            border-radius: 20px;
            margin-top: 10px;
        }
    </style>

</head>

<body>
    <main>
        <div class="container py-4">
            <span id="head-container"></span>
            <section id="form-section">
                <h1 class="h1-tag text-primary">Your Feedback Is important For Us</h1>
                <p class="text-primary" style="text-align: center;">We would love to hear your thoughts, concerns or problem with anything so we can improve!</p>
                <form method="POST" autocomplete="off" name="google-sheet" class="form-content-section">
                    <div class="form-group">
                        <label for="exampleInputText">Name</label>
                        <input type="text" name="name" class="form-control" id="exampleInputText" placeholder="Enter Your Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                            placeholder="Enter email">
                        <small id="emailHelp" class="form-text text-muted">
                            We'll never share your email with anyone
                            else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputText">Contact Number(Optional)
                        </label>
                        <input type="text" name="contact" class="form-control" id="exampleInputText">
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Describe Feedback
                        </label>
                        <textarea name="feedback" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary myclass">
                        Post Comment</button>
                </form>
            </section>

            <span id="foot-container"></span>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="/scripts/index.js"></script>
        </div>
        </div>


    </main>
    <!-- submit on google sheet -->
    <script>
        const scriptURL = 'https://script.google.com/macros/s/AKfycbzv-_6af1iiMjRouD9WeMRWbRVztTf1kp0EGs8Q0uVvFTWT3P8/exec'
        const form = document.forms['google-sheet']

        form.addEventListener('submit', e => {
          e.preventDefault()
          fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .then(response => alert("Thanks for Contacting us..! We Will Contact You Soon..."))
            .catch(error => console.error('Error!', error.message))
        })
      </script>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>
    <!-- jQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</body>

</html>