Skip to content

Commit 44e6bbc

Browse files
Parv-gugnaniParv-gugnani
committed
fail\
1 parent 9246ee8 commit 44e6bbc

File tree

3 files changed

+283
-0
lines changed

3 files changed

+283
-0
lines changed

‎Contact Form/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Contact Form in PHP | CodingNepal</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
12+
/>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
16+
/>
17+
</head>
18+
<body>
19+
<div class="wrapper">
20+
<header>Send us a Message</header>
21+
<form action="#">
22+
<div class="dbl-field">
23+
<div class="field">
24+
<input type="text" name="name" placeholder="Enter your name" />
25+
<i class="fas fa-user"></i>
26+
</div>
27+
<div class="field">
28+
<input type="text" name="email" placeholder="Enter your email" />
29+
<i class="fas fa-envelope"></i>
30+
</div>
31+
</div>
32+
<div class="dbl-field">
33+
<div class="field">
34+
<input type="text" name="phone" placeholder="Enter your phone" />
35+
<i class="fas fa-phone-alt"></i>
36+
</div>
37+
<div class="field">
38+
<input
39+
type="text"
40+
name="website"
41+
placeholder="Enter your website"
42+
/>
43+
<i class="fas fa-globe"></i>
44+
</div>
45+
</div>
46+
<div class="message">
47+
<textarea placeholder="Write your message" name="message"></textarea>
48+
<i class="material-icons">message</i>
49+
</div>
50+
<div class="button-area">
51+
<button type="submit">Send Message</button>
52+
<span></span>
53+
</div>
54+
</form>
55+
</div>
56+
57+
<script src="script.js"></script>
58+
</body>
59+
</html>

‎Contact Form/script.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
//Contact Form in PHP
2+
const form = document.querySelector("form"),
3+
statusTxt = form.querySelector(".button-area span");
4+
form.onsubmit = (e) => {
5+
e.preventDefault();
6+
statusTxt.style.color = "#0D6EFD";
7+
statusTxt.style.display = "block";
8+
statusTxt.innerText = "Sending your message...";
9+
form.classList.add("disabled");
10+
11+
let xhr = new XMLHttpRequest();
12+
xhr.open("POST", "message.php", true);
13+
xhr.onload = () => {
14+
if (xhr.readyState == 4 && xhr.status == 200) {
15+
let response = xhr.response;
16+
if (
17+
response.indexOf("required") != -1 ||
18+
response.indexOf("valid") != -1 ||
19+
response.indexOf("failed") != -1
20+
) {
21+
statusTxt.style.color = "red";
22+
} else {
23+
form.reset();
24+
setTimeout(() => {
25+
statusTxt.style.display = "none";
26+
}, 3000);
27+
}
28+
statusTxt.innerText = response;
29+
form.classList.remove("disabled");
30+
}
31+
};
32+
let formData = new FormData(form);
33+
xhr.send(formData);
34+
};

‎Contact Form/style.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: "Poppins", sans-serif;
9+
}
10+
11+
body {
12+
display: flex;
13+
padding: 0 10px;
14+
min-height: 100vh;
15+
background: #0D6EFD;
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
20+
::selection {
21+
color: #fff;
22+
background: #0D6EFD;
23+
}
24+
25+
.wrapper {
26+
width: 715px;
27+
background: #fff;
28+
border-radius: 5px;
29+
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
30+
}
31+
32+
.wrapper header {
33+
font-size: 22px;
34+
font-weight: 600;
35+
padding: 20px 30px;
36+
border-bottom: 1px solid #ccc;
37+
}
38+
39+
.wrapper form {
40+
margin: 35px 30px;
41+
}
42+
43+
.wrapper form.disabled {
44+
pointer-events: none;
45+
opacity: 0.7;
46+
}
47+
48+
form .dbl-field {
49+
display: flex;
50+
margin-bottom: 25px;
51+
justify-content: space-between;
52+
}
53+
54+
.dbl-field .field {
55+
height: 50px;
56+
display: flex;
57+
position: relative;
58+
width: calc(100% / 2 - 13px);
59+
}
60+
61+
.wrapper form i {
62+
position: absolute;
63+
top: 50%;
64+
left: 18px;
65+
color: #ccc;
66+
font-size: 17px;
67+
pointer-events: none;
68+
transform: translateY(-50%);
69+
}
70+
71+
form .field input,
72+
form .message textarea {
73+
width: 100%;
74+
height: 100%;
75+
outline: none;
76+
padding: 0 18px 0 48px;
77+
font-size: 16px;
78+
border-radius: 5px;
79+
border: 1px solid #ccc;
80+
}
81+
82+
.field input::placeholder,
83+
.message textarea::placeholder {
84+
color: #ccc;
85+
}
86+
87+
.field input:focus,
88+
.message textarea:focus {
89+
padding-left: 47px;
90+
border: 2px solid #0D6EFD;
91+
}
92+
93+
.field input:focus~i,
94+
.message textarea:focus~i {
95+
color: #0D6EFD;
96+
}
97+
98+
form .message {
99+
position: relative;
100+
}
101+
102+
form .message i {
103+
top: 30px;
104+
font-size: 20px;
105+
}
106+
107+
form .message textarea {
108+
min-height: 130px;
109+
max-height: 230px;
110+
max-width: 100%;
111+
min-width: 100%;
112+
padding: 15px 20px 0 48px;
113+
}
114+
115+
form .message textarea::-webkit-scrollbar {
116+
width: 0px;
117+
}
118+
119+
.message textarea:focus {
120+
padding-top: 14px;
121+
}
122+
123+
form .button-area {
124+
margin: 25px 0;
125+
display: flex;
126+
align-items: center;
127+
}
128+
129+
.button-area button {
130+
color: #fff;
131+
border: none;
132+
outline: none;
133+
font-size: 18px;
134+
cursor: pointer;
135+
border-radius: 5px;
136+
padding: 13px 25px;
137+
background: #0D6EFD;
138+
transition: background 0.3s ease;
139+
}
140+
141+
.button-area button:hover {
142+
background: #025ce3;
143+
}
144+
145+
.button-area span {
146+
font-size: 17px;
147+
margin-left: 30px;
148+
display: none;
149+
}
150+
151+
@media (max-width: 600px) {
152+
.wrapper header {
153+
text-align: center;
154+
}
155+
156+
.wrapper form {
157+
margin: 35px 20px;
158+
}
159+
160+
form .dbl-field {
161+
flex-direction: column;
162+
margin-bottom: 0px;
163+
}
164+
165+
form .dbl-field .field {
166+
width: 100%;
167+
height: 45px;
168+
margin-bottom: 20px;
169+
}
170+
171+
form .message textarea {
172+
resize: none;
173+
}
174+
175+
form .button-area {
176+
margin-top: 20px;
177+
flex-direction: column;
178+
}
179+
180+
.button-area button {
181+
width: 100%;
182+
padding: 11px 0;
183+
font-size: 16px;
184+
}
185+
186+
.button-area span {
187+
margin: 20px 0 0;
188+
text-align: center;
189+
}
190+
}

0 commit comments

Comments
 (0)