Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 34429d5

Browse files
nisarhassan12jankeromnes
nisarhassan12
authored and
jankeromnes
committed
fix the contact form layout.
1 parent e300c31 commit 34429d5

File tree

1 file changed

+183
-178
lines changed

1 file changed

+183
-178
lines changed

‎src/pages/contact.tsx

Lines changed: 183 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -76,197 +76,202 @@ const StyledContactPage = styled.div`
7676
`
7777

7878
const subjects: string[] = [
79-
'Question about Gitpod\'s Plans / Pricing',
80-
'Student Unlimited: Get Verified as a Student',
81-
'Applying for Professional Open Source',
82-
'Applying for the Custom IDE Support Beta',
83-
'Applying for a Job at Gitpod',
84-
'Other',
79+
'Question about Gitpod\'s Plans / Pricing',
80+
'Student Unlimited: Get Verified as a Student',
81+
'Applying for Professional Open Source',
82+
'Applying for the Custom IDE Support Beta',
83+
'Applying for a Job at Gitpod',
84+
'Other',
8585
]
8686

8787
export default function ContactPage(props: any) {
88-
const [state, setState] = React.useState<{
89-
name?: string
90-
consent?: boolean
91-
email?: string
92-
subject?: string
93-
message?: string
94-
messageSent?: boolean
95-
errorMessage?: string
96-
}>({ subject: props && props.location && props.location.state && props.location.state.subject })
97-
if (typeof window !== 'undefined' && window.location.hash && state.message === undefined) {
98-
setState({
99-
...state,
100-
message: decodeURIComponent(window.location.hash.substr(1))
101-
})
102-
}
103-
104-
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
105-
setState({
106-
...state,
107-
errorMessage: undefined,
108-
[e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
109-
})
110-
}
111-
112-
const handleChangeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
113-
setState({ ...state, [e.target.name]: e.target.value })
114-
}
115-
116-
const handleChangeSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
117-
setState({
118-
...state,
119-
errorMessage: undefined,
120-
[e.target.name]: e.target.value
121-
})
122-
}
88+
const [state, setState] = React.useState<{
89+
name?: string
90+
consent?: boolean
91+
email?: string
92+
subject?: string
93+
message?: string
94+
messageSent?: boolean
95+
errorMessage?: string
96+
}>({ subject: props && props.location && props.location.state && props.location.state.subject })
97+
if (typeof window !== 'undefined' && window.location.hash && state.message === undefined) {
98+
setState({
99+
...state,
100+
message: decodeURIComponent(window.location.hash.substr(1))
101+
})
102+
}
123103

124-
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
125-
e.preventDefault()
126-
if (!state.email) {
127-
setState({
128-
...state,
129-
errorMessage: 'Please provide a valid email address so that we can reply to you.'
130-
})
131-
return
104+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
105+
setState({
106+
...state,
107+
errorMessage: undefined,
108+
[e.target.name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
109+
})
132110
}
133-
if (!state.message) {
134-
setState({
135-
...state,
136-
errorMessage: "Sorry! The message can't be empty, please type a message."
137-
})
138-
return
111+
112+
const handleChangeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
113+
setState({ ...state, [e.target.name]: e.target.value })
139114
}
140-
if (state.consent !== true) {
141-
setState({
142-
...state,
143-
errorMessage: 'Please agree to us storing your provided information so that we can reply to you.'
144-
})
145-
return
115+
116+
const handleChangeSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
117+
setState({
118+
...state,
119+
errorMessage: undefined,
120+
[e.target.name]: e.target.value
121+
})
146122
}
147123

148-
const email: Email = {
149-
from: {
150-
email: state.email,
151-
name: state.name
152-
},
153-
subject: state.subject + ' (from ' + state.email + ')',
154-
message: state.message
155-
};
124+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
125+
e.preventDefault()
126+
if (!state.email) {
127+
setState({
128+
...state,
129+
errorMessage: 'Please provide a valid email address so that we can reply to you.'
130+
})
131+
return
132+
}
133+
if (!state.message) {
134+
setState({
135+
...state,
136+
errorMessage: "Sorry! The message can't be empty, please type a message."
137+
})
138+
return
139+
}
140+
if (state.consent !== true) {
141+
setState({
142+
...state,
143+
errorMessage: 'Please agree to us storing your provided information so that we can reply to you.'
144+
})
145+
return
146+
}
156147

157-
fetch('/.netlify/functions/submit-form', {
158-
method: 'POST',
159-
body: JSON.stringify(email)
160-
})
161-
.then(() =>
162-
setState({
163-
...state,
164-
messageSent: true
148+
const email: Email = {
149+
from: {
150+
email: state.email,
151+
name: state.name
152+
},
153+
subject: state.subject + ' (from ' + state.email + ')',
154+
message: state.message
155+
};
156+
157+
fetch('/.netlify/functions/submit-form', {
158+
method: 'POST',
159+
body: JSON.stringify(email)
165160
})
166-
)
167-
.catch((error) => alert(error))
168-
}
169-
return (
170-
<IndexLayout canonical="/contact/">
171-
<StyledContactPage className="pattern">
172-
<div className="row">
173-
{state.messageSent ? (
174-
<SubmissionSucess />
175-
) : (
176-
<form
177-
className="form"
178-
method="POST"
179-
name="Contact"
180-
onSubmit={handleSubmit}
181-
>
182-
<input type="hidden" name="form-name" value="contact" />
183-
<div style={{ visibility: 'hidden' }}>
184-
<label>
185-
Don’t fill this out if you're human: <input name="bot-field" />
186-
</label>
187-
</div>
161+
.then(() =>
162+
setState({
163+
...state,
164+
messageSent: true
165+
})
166+
)
167+
.catch((error) => alert(error))
168+
}
169+
return (
170+
<IndexLayout canonical="/contact/">
171+
<StyledContactPage className="pattern">
172+
<div className="row">
173+
{state.messageSent ? (
174+
<SubmissionSucess />
175+
) : (
176+
<form
177+
className="form"
178+
method="POST"
179+
name="Contact"
180+
onSubmit={handleSubmit}
181+
>
182+
<input
183+
type="hidden"
184+
name="form-name"
185+
value="contact"
186+
/>
187+
<div style={{ visibility: 'hidden' }}>
188+
<label>
189+
Don’t fill this out if you're human: <input name="bot-field" />
190+
</label>
191+
</div>
188192

189-
<h1 style={{ marginBottom: '2rem' }}>Contact</h1>
193+
<h1 style={{ marginBottom: '2rem' }}>
194+
Contact
195+
</h1>
190196

191-
<div className="form__container">
192-
<label className="visually-hidden" htmlFor="Name">
193-
{' '}
194-
Name
195-
</label>
196-
<input
197-
autoFocus
198-
name="name"
199-
className="form__input form__input--half"
200-
type="text"
201-
placeholder="Name"
202-
id="Name"
203-
onChange={handleChange}
204-
/>
205-
<label className="visually-hidden" htmlFor="email">
206-
E-Mail
207-
</label>
208-
<input
209-
name="email"
210-
className="form__input form__input--half"
211-
type="email"
212-
placeholder="E-mail"
213-
id="email"
214-
onChange={handleChange}
215-
/>
216-
<div className="subject">
217-
<label htmlFor="subject">Please choose a subject</label>
218-
<select value={state.subject} onChange={handleChangeSelect} name="subject" id="subject">
219-
<option>{state.subject ? state.subject : '-- Subject --'}</option>
220-
{subjects
221-
.filter((subject) => subject !== state.subject)
222-
.map((subject, i) => (
223-
<option key={i} value={subject}>
224-
{subject}
225-
</option>
226-
))}
227-
</select>
228-
</div>
229-
<div>
230-
<p>Looking for help with a common request?</p>
231-
<ul>
232-
<li><a href="https://community.gitpod.io/">Get help from the Gitpod Community</a></li>
233-
</ul>
234-
</div>
235-
<label style={{ marginTop: 15, marginBottom: 10 }}>How can we help?</label>
236-
<label className="visually-hidden" htmlFor="message">
237-
Please type your message
238-
</label>
239-
<textarea
240-
name="message"
241-
className="form__textarea"
242-
placeholder="Please type your message"
243-
id="message"
244-
onChange={handleChangeTextArea}
245-
value={state.message}
246-
></textarea>
247-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '0px 0px 20px 0px' }}>
248-
<input
249-
name="consent"
250-
id="consent"
251-
type="checkbox"
252-
onChange={handleChange}
253-
style={{ margin: '0px 10px', transform: 'translateY(.5rem)' }}
254-
/>
255-
<label htmlFor="consent">
256-
I consent to having this website store my submitted information so that a support staff can respond to my inquiry.
197+
<div className="form__container">
198+
<label className="visually-hidden" htmlFor="Name">
199+
{' '}
200+
Name
201+
</label>
202+
<input
203+
autoFocus
204+
name="name"
205+
className="form__input form__input--half"
206+
type="text"
207+
placeholder="Name"
208+
id="Name"
209+
onChange={handleChange}
210+
/>
211+
<label className="visually-hidden" htmlFor="email">
212+
E-Mail
213+
</label>
214+
<input
215+
name="email"
216+
className="form__input form__input--half"
217+
type="email"
218+
placeholder="E-mail"
219+
id="email"
220+
onChange={handleChange}
221+
/>
222+
<div className="subject">
223+
<label htmlFor="subject">Please choose a subject</label>
224+
<select value={state.subject} onChange={handleChangeSelect} name="subject" id="subject">
225+
<option>{state.subject ? state.subject : '-- Subject --'}</option>
226+
{subjects
227+
.filter((subject) => subject !== state.subject)
228+
.map((subject, i) => (
229+
<option key={i} value={subject}>
230+
{subject}
231+
</option>
232+
))}
233+
</select>
234+
</div>
235+
<div>
236+
<p style={{marginBottom: '.5rem'}}>Looking for help with a common request?</p>
237+
<ul>
238+
<li><a href="https://community.gitpod.io/">Get help from the Gitpod Community</a></li>
239+
</ul>
240+
</div>
241+
<div style={{ flex: '0 0 100%', marginTop: '1.5rem' }}>
242+
<label style={{ display: 'block', marginBottom: 10 }}>How can we help?</label>
243+
<textarea
244+
name="message"
245+
className="form__textarea"
246+
placeholder="Please type your message"
247+
id="message"
248+
onChange={handleChangeTextArea}
249+
value={state.message}
250+
></textarea>
251+
</div>
252+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '0px 0px 20px 0px' }}>
253+
<input
254+
name="consent"
255+
id="consent"
256+
type="checkbox"
257+
onChange={handleChange}
258+
style={{ margin: '0px 10px', transform: 'translateY(.5rem)' }}
259+
/>
260+
<label htmlFor="consent">
261+
I consent to having this website store my submitted information so that a support staff can respond to my inquiry.
257262
</label>
258-
</div>
259-
{state.errorMessage ? <p className="error">{state.errorMessage}</p> : null}
260-
<div>
261-
<button type="submit" className="btn btn--cta" style={{ cursor: 'pointer' }}>
262-
Send
263+
</div>
264+
{state.errorMessage ? <p className="error">{state.errorMessage}</p> : null}
265+
<div>
266+
<button type="submit" className="btn btn--cta" style={{ cursor: 'pointer' }}>
267+
Send
263268
</button>
269+
</div>
270+
</div>
271+
</form>
272+
)}
264273
</div>
265-
</div>
266-
</form>
267-
)}
268-
</div>
269-
</StyledContactPage>
270-
</IndexLayout>
271-
)
274+
</StyledContactPage>
275+
</IndexLayout>
276+
)
272277
}

0 commit comments

Comments
 (0)