Skip to content

Commit c3847b4

Browse files
ChlaegerIOChlaegerIO
committed
contact formular
1 parent 2ab3816 commit c3847b4

File tree

4 files changed

+182
-0
lines changed

4 files changed

+182
-0
lines changed

‎Contact.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
html {
2+
font: 300 100%/1.5 Ubuntu, sans-serif;
3+
color: #333;
4+
overflow-x: hidden;
5+
}
6+
h2 {
7+
margin: 0;
8+
color: #8495a5;
9+
font-size: 2.5em;
10+
font-weight: 300;
11+
}
12+
#contact-form {
13+
max-width: 1208px;
14+
max-width: 75.5rem;
15+
margin: 0 auto;
16+
margin-bottom: 5em;
17+
}
18+
#contact, label, input[name="submit"] {
19+
position: relative;
20+
}
21+
label > span, input, textarea, button {
22+
box-sizing: border-box;
23+
}
24+
label {
25+
display: block;
26+
}
27+
label > span {
28+
display: none;
29+
}
30+
input, textarea, button {
31+
width: 100%;
32+
padding: 0.5em;
33+
border: none;
34+
font: 300 100%/1.2 Ubuntu, sans-serif;
35+
}
36+
input[type="text"], input[type="email"], textarea {
37+
margin: 0 0 1em;
38+
border: 1px solid #ccc;
39+
outline: none;
40+
}
41+
input.invalid, textarea.invalid {
42+
border-color: #d5144d;
43+
}
44+
textarea {
45+
height: 6em;
46+
}
47+
input[type="submit"], button {
48+
background: #a7cd80;
49+
color: #333;
50+
}
51+
input[type="submit"]:hover, button:hover {
52+
background: #91b36f;
53+
}
54+
@media screen and (min-width: 30em) {
55+
#contact-form h2 {
56+
margin-left: 26.3736%;
57+
font-size: 2em;
58+
line-height: 1.5;
59+
}
60+
label > span {
61+
vertical-align: top;
62+
display: inline-block;
63+
width: 26.3736%;
64+
padding: 0.5em;
65+
border: 1px solid transparent;
66+
text-align: right;
67+
}
68+
input, textarea, button {
69+
width: 73.6263%;
70+
line-height: 1.5;
71+
}
72+
textarea {
73+
height: 10em;
74+
}
75+
input[type="submit"], button {
76+
margin-left: 26.3736%;
77+
}
78+
}
79+
@media screen and (min-width: 48em) {
80+
#contact-form {
81+
text-align: justify;
82+
line-height: 0;
83+
}
84+
#contact-form:after {
85+
content: '';
86+
display: inline-block;
87+
width: 100%;
88+
}
89+
#contact-form h2 {
90+
margin-left: 26.3736%;
91+
}
92+
#contact-form form, #contact-form aside {
93+
vertical-align: top;
94+
display: inline-block;
95+
width: 65.4676%;
96+
text-align: left;
97+
line-height: 1.5;
98+
}
99+
#contact-form aside {
100+
width: 30.9353%;
101+
}
102+
}

‎Contact.html

+16
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,22 @@
170170
</div>
171171
</header>
172172

173+
<section id="contact-form">
174+
<form action="https://form.taxi/s/e1rpdiv1" method="POST">
175+
<h2>Gerne antworte ich auf Anfragen</h2>
176+
<form id="contact" name="contact" accept-charset="utf-8">
177+
<label><span></span><input name="name" type="text" placeholder="Name"/></label>
178+
<label><span></span><input name="email" type="email" placeholder="Ihre Email Adresse"/></label>
179+
<label><span></span><textarea name="message" placeholder="Nachricht"></textarea></label>
180+
<input name="submit" type="submit" value="Send"/>
181+
</form>
182+
<!-- <aside>
183+
<p>Just hit Send on an empty form to see the invalid input animation</p>
184+
<p>Fill in the form fields to see the success animation (no real validation, any random input will do)</p>
185+
</aside> -->
186+
</form>
187+
</section>
188+
173189
<footer
174190
class="u-align-center u-clearfix u-footer u-grey-80 u-footer"
175191
id="sec-7782"

‎contact.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
var form = $('#contact'),
2+
submit = form.find('[name="submit"]');
3+
4+
form.on('submit', function(e) {
5+
e.preventDefault();
6+
7+
// avoid spamming buttons
8+
if (submit.attr('value') !== 'Send')
9+
return;
10+
11+
var valid = true;
12+
form.find('input, textarea').removeClass('invalid').each(function() {
13+
if (!this.value) {
14+
$(this).addClass('invalid');
15+
valid = false;
16+
}
17+
});
18+
19+
if (!valid) {
20+
form.animate({left: '-3em'}, 50)
21+
.animate({left: '3em'}, 100)
22+
.animate({left: '0'}, 50);
23+
} else {
24+
submit.attr('value', 'Sending...')
25+
.css({boxShadow: '0 0 200em 200em rgba(225, 225, 225, 0.6)',
26+
backgroundColor: '#ccc'});
27+
// simulate AJAX response
28+
setTimeout(function() {
29+
// step 1: slide labels and inputs
30+
// when AJAX responds with success
31+
// no animation for AJAX failure yet
32+
form.find('label')
33+
.animate({left: '100%'}, 500)
34+
.animate({opacity: '0'}, 500);
35+
}, 1000);
36+
setTimeout(function() {
37+
// step 2: show thank you message after step 1
38+
submit.attr('value', 'Thank you :)')
39+
.css({boxShadow: 'none'});
40+
}, 2000);
41+
setTimeout(function() {
42+
// step 3: reset
43+
form.find('input, textarea').val('');
44+
form.find('label')
45+
.css({left: '0'})
46+
.animate({opacity: '1'}, 500);
47+
submit.attr('value', 'Send')
48+
.css({backgroundColor: ''});
49+
}, 4000);
50+
}
51+
});

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,14 @@
9393
<!-- For desktop website -->
9494
<div class="u-nav-container">
9595
<ul class="u-nav u-unstyled u-nav-1">
96+
<li class="u-nav-item">
97+
<a
98+
class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
99+
href="index.html"
100+
style="padding: 10px 20px"
101+
>Home</a
102+
>
103+
</li>
96104
<li class="u-nav-item">
97105
<a
98106
class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
@@ -137,6 +145,11 @@
137145
<ul
138146
class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"
139147
>
148+
<li class="u-nav-item">
149+
<a class="u-button-style u-nav-link" href="index.html"
150+
>Home</a
151+
>
152+
</li>
140153
<li class="u-nav-item">
141154
<a class="u-button-style u-nav-link" href="Weather.html"
142155
>Wetter</a

0 commit comments

Comments
 (0)