Skip to content

Commit dc178de

Browse files
faisaltheparttimecoderfaisaltheparttimecoder
committed
Completed the contact us page
+ Completed the contact page + Completed the demo website
1 parent 2eb3d60 commit dc178de

File tree

3 files changed

+180
-96
lines changed

3 files changed

+180
-96
lines changed

‎src/components/Contact.vue‎

Lines changed: 61 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div>
3+
34
<section class="hero is-danger is-medium">
45
<div class="hero-body">
56
<div class="container has-text-centered">
@@ -9,104 +10,57 @@
910
<p class="subtitle">
1011
{{ subtitle }}
1112
</p>
12-
<button class="button is-primary">Email Us</button>
13-
<button class="button is-info">Fill Survey</button>
1413
</div>
1514
</div>
1615
</section>
16+
1717
<section class="section">
1818
<div class="box">
1919

2020
<header class="title has-text-centered is-info">
21-
Contact Us
21+
Write to us
2222
</header>
2323

24-
<div class="field">
25-
<label class="label">Name</label>
26-
<div class="control">
27-
<input class="input" type="text" placeholder="Text input">
28-
</div>
29-
</div>
30-
31-
<div class="field">
32-
<label class="label">Username</label>
33-
<div class="control has-icons-left has-icons-right">
34-
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
35-
<span class="icon is-small is-left">
36-
<i class="fas fa-user"></i>
37-
</span>
38-
<span class="icon is-small is-right">
39-
<i class="fas fa-check"></i>
40-
</span>
24+
<article v-if="formError" class="message is-danger">
25+
<div class="message-header">
26+
<p>Form Error</p>
27+
<button v-on:click="formError = false" class="delete" aria-label="delete"></button>
4128
</div>
42-
<p class="help is-success">This username is available</p>
43-
</div>
44-
45-
<div class="field">
46-
<label class="label">Email</label>
47-
<div class="control has-icons-left has-icons-right">
48-
<input class="input is-danger" type="email" placeholder="Email input" value="hello@">
49-
<span class="icon is-small is-left">
50-
<i class="fas fa-envelope"></i>
51-
</span>
52-
<span class="icon is-small is-right">
53-
<i class="fas fa-exclamation-triangle"></i>
54-
</span>
29+
<div class="message-body">
30+
Please fill in your Name, Email & Message, The mandatory fields on the form..
5531
</div>
56-
<p class="help is-danger">This email is invalid</p>
57-
</div>
32+
</article>
5833

59-
<div class="field">
60-
<label class="label">Subject</label>
61-
<div class="control">
62-
<div class="select">
63-
<select>
64-
<option>Select dropdown</option>
65-
<option>With options</option>
66-
</select>
34+
<div v-if="showForm">
35+
<div v-for="formContent in formContents" class="field">
36+
<label class="label">{{ formContent }}</label>
37+
<div class="control">
38+
<input class="input" type="text" v-model="userInput[formContent]" :placeholder="'Enter your ' + formContent + '...'">
6739
</div>
6840
</div>
69-
</div>
70-
71-
<div class="field">
72-
<label class="label">Message</label>
73-
<div class="control">
74-
<textarea class="textarea" placeholder="Textarea"></textarea>
75-
</div>
76-
</div>
7741

78-
<div class="field">
79-
<div class="control">
80-
<label class="checkbox">
81-
<input type="checkbox">
82-
I agree to the <a href="#">terms and conditions</a>
83-
</label>
42+
<div class="field">
43+
<label class="label">Message</label>
44+
<div class="control">
45+
<textarea class="textarea" v-model="userInput.Message" type="text" rows=10 placeholder="Enter your message"></textarea>
46+
</div>
8447
</div>
85-
</div>
8648

87-
<div class="field">
88-
<div class="control">
89-
<label class="radio">
90-
<input type="radio" name="question">
91-
Yes
92-
</label>
93-
<label class="radio">
94-
<input type="radio" name="question">
95-
No
96-
</label>
49+
<div class="field is-grouped">
50+
<div class="control">
51+
<button v-on:click="sumbitPost" class="button is-primary">Submit</button>
52+
</div>
53+
<div class="control">
54+
<button v-on:click="clearPost" class="button is-info">Clear</button>
55+
</div>
9756
</div>
9857
</div>
9958

100-
<div class="field is-grouped">
101-
<div class="control">
102-
<button class="button is-primary">Send Email</button>
103-
</div>
104-
<div class="control">
105-
<button class="button is-info">Preview Email</button>
106-
</div>
107-
<div class="control">
108-
<button class="button is-danger">Cancel</button>
109-
</div>
59+
<div v-if="!showForm">
60+
<h1 class="heading has-text-centered">
61+
<i class="far fa-thumbs-up fa-6x"></i> <br /> <br /> <br />
62+
Thanks for your message, our team will reach back in 2 business working day ...
63+
</h1>
11064
</div>
11165

11266
</div>
@@ -121,24 +75,35 @@
12175
return {
12276
title: "Send us some love !!!",
12377
subtitle: "We love to hear your feedback, why don't you fill up the below form...",
124-
teamNavs: [
125-
{
126-
team: 'Leadership Team',
127-
icon: 'fas fa-user',
128-
start: 0,
129-
end: 4
130-
}, {
131-
team: 'Managers',
132-
icon: 'fas fa-users',
133-
start: 4,
134-
end: 8
135-
}, {
136-
team: 'Contributors',
137-
icon: 'fas fa-street-view',
138-
start: 6,
139-
end: 11
140-
},
141-
]
78+
formContents:['Name', 'Email', 'Phone Number', 'Company', 'Subject'],
79+
orgUserInput: {
80+
'Name': '', 'Email': '', 'Phone Number': '', 'Company': '', 'Subject': '', 'Message': ''
81+
},
82+
userInput: {
83+
'Name': '', 'Email': '', 'Phone Number': '', 'Company': '', 'Subject': '', 'Message': ''
84+
},
85+
formError: false,
86+
showForm: true
87+
}
88+
},
89+
methods: {
90+
clearPost: function() {
91+
return this.userInput = this.orgUserInput
92+
},
93+
sumbitPost: function() {
94+
if (this.userInput.Message == '' || this.userInput.Name == '' || this.userInput.Email == '') {
95+
return this.formError = true
96+
} else {
97+
this.formError = false
98+
this.$http.post('https://jsonplaceholder.typicode.com/posts', {
99+
title: this.userInput.Subject,
100+
body: this.userInput.Message,
101+
userId: 1
102+
}).then(function(data){
103+
this.showForm = false
104+
this.clearPost()
105+
})
106+
}
142107
}
143108
}
144109
}

‎src/components/ContactEmail.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<div>
3+
4+
<section class="hero is-danger is-medium">
5+
<div class="hero-body">
6+
<div class="container has-text-centered">
7+
<p class="title">
8+
{{ title }}
9+
</p>
10+
<p class="subtitle">
11+
{{ subtitle }}
12+
</p>
13+
</div>
14+
</div>
15+
</section>
16+
17+
<section class="section">
18+
<div class="box">
19+
20+
<header class="title has-text-centered is-info">
21+
Write to us
22+
</header>
23+
24+
<article v-if="formError" class="message is-danger">
25+
<div class="message-header">
26+
<p>Form Error</p>
27+
<button class="delete" aria-label="delete"></button>
28+
</div>
29+
<div class="message-body">
30+
Please fill in your Name, Email & Message, The mandatory fields on the form..
31+
</div>
32+
</article>
33+
34+
<div v-if="showForm">
35+
<div v-for="formContent in formContents" class="field">
36+
<label class="label">{{ formContent }}</label>
37+
<div class="control">
38+
<input class="input" type="text" v-model="userInput[formContent]" :placeholder="'Enter your ' + formContent + '...'">
39+
</div>
40+
</div>
41+
42+
<div class="field">
43+
<label class="label">Message</label>
44+
<div class="control">
45+
<textarea class="textarea" v-model="userInput.Message" type="text" rows=10 placeholder="Enter your message"></textarea>
46+
</div>
47+
</div>
48+
49+
<div class="field is-grouped">
50+
<div class="control">
51+
<button v-on:click="sumbitPost" class="button is-primary">Submit</button>
52+
</div>
53+
<div class="control">
54+
<button v-on:click="clearPost" class="button is-info">Clear</button>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<div v-if="!showForm">
60+
<h1 class="heading has-text-centered">
61+
<i class="far fa-thumbs-up fa-6x"></i> <br /> <br /> <br />
62+
Thanks for your message, our team will reach back in 2 business working day ...
63+
</h1>
64+
</div>
65+
66+
</div>
67+
</section>
68+
69+
</div>
70+
</template>
71+
72+
<script>
73+
export default {
74+
data: function () {
75+
return {
76+
title: "Send us some love !!!",
77+
subtitle: "We love to hear your feedback, why don't you fill up the below form...",
78+
formContents:['Name', 'Email', 'Phone Number', 'Company', 'Subject'],
79+
orgUserInput: {
80+
'Name': '', 'Email': '', 'Phone Number': '', 'Company': '', 'Subject': '', 'Message': ''
81+
},
82+
userInput: {
83+
'Name': '', 'Email': '', 'Phone Number': '', 'Company': '', 'Subject': '', 'Message': ''
84+
},
85+
formError: false,
86+
showForm: true
87+
}
88+
},
89+
methods: {
90+
clearPost: function() {
91+
return this.userInput = this.orgUserInput
92+
},
93+
sumbitPost: function() {
94+
if (this.userInput.Message === '' && this.userInput.Name === '' && this.userInput.Email === '') {
95+
return this.formError = true
96+
} else {
97+
this.formError = false
98+
this.$http.post('https://jsonplaceholder.typicode.com/posts', {
99+
title: this.userInput.Subject,
100+
body: this.userInput.Message,
101+
userId: 1
102+
}).then(function(data){
103+
this.showForm = false
104+
this.clearPost()
105+
})
106+
}
107+
}
108+
}
109+
}
110+
111+
</script>
112+
113+
<style scoped>
114+
.section {
115+
padding: 1rem 1.5rem;
116+
margin-top: -50px;
117+
}
118+
119+
</style>

‎src/components/ContactSurvey.vue‎

Whitespace-only changes.

0 commit comments

Comments
 (0)