fix: contact form
Disable gmail addresses.
This commit is contained in:
@@ -1,75 +1,108 @@
|
|||||||
import React from 'react'
|
import React, { useState } from 'react'
|
||||||
import { Link } from 'gatsby'
|
|
||||||
|
|
||||||
// import dcLogo from "../../images/dclogo.png";
|
import { Section } from '../shared'
|
||||||
|
|
||||||
import { Container, Section } from '../shared'
|
|
||||||
import { SolidButton } from '../shared/styledComponents'
|
import { SolidButton } from '../shared/styledComponents'
|
||||||
import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
|
import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
|
||||||
|
|
||||||
const anchorStyles = {
|
const Footer = () => {
|
||||||
color: '#888'
|
const [email, setEmail] = useState('')
|
||||||
|
const [emailError, setEmailError] = useState('')
|
||||||
|
|
||||||
|
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = e.target.value
|
||||||
|
setEmail(value)
|
||||||
|
|
||||||
|
if (
|
||||||
|
value &&
|
||||||
|
(value.toLowerCase().includes('@gmail.com') ||
|
||||||
|
value.toLowerCase().includes('@googlemail.com'))
|
||||||
|
) {
|
||||||
|
setEmailError('Gmail addresses are not allowed.')
|
||||||
|
} else {
|
||||||
|
setEmailError('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
if (emailError) {
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Section bottomArrow={false}>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-3 me-md-5">
|
||||||
|
<StyledHeading>Data Controller</StyledHeading>
|
||||||
|
<StyledDesc>
|
||||||
|
Data Controller is a product of 4GL Apps, a brand of Bowe IO Ltd,
|
||||||
|
which is a UK company with a focus on SAS Software,{' '}
|
||||||
|
<StyledAnchor href="https://sasapps.io">Apps</StyledAnchor>, and
|
||||||
|
Services.
|
||||||
|
</StyledDesc>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
|
<StyledHeading>Newsletter</StyledHeading>
|
||||||
|
<form
|
||||||
|
className="kwes-form"
|
||||||
|
method="POST"
|
||||||
|
action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
>
|
||||||
|
<div className="mb-3">
|
||||||
|
<InputStyled
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
className="form-control"
|
||||||
|
aria-describedby="emailHelp"
|
||||||
|
placeholder="Email Address*"
|
||||||
|
value={email}
|
||||||
|
onChange={handleEmailChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{emailError && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: 'red',
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
marginTop: '0.25rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{emailError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<InputStyled
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="First Name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<InputStyled
|
||||||
|
type="text"
|
||||||
|
name="lastName"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Last Name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<SolidButton>Subscribe</SolidButton>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3">
|
||||||
|
<StyledHeading>Other Resources</StyledHeading>
|
||||||
|
<StyledDesc>
|
||||||
|
Visit our educational and fun SAS® software quiz{' '}
|
||||||
|
<StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor>{' '}
|
||||||
|
and test your knowledge of SAS topics.
|
||||||
|
</StyledDesc>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Footer = () => (
|
|
||||||
<Section bottomArrow={false}>
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-3 me-md-5">
|
|
||||||
<StyledHeading>Data Controller</StyledHeading>
|
|
||||||
<StyledDesc>
|
|
||||||
Data Controller is a product of 4GL Apps, a brand of Bowe IO Ltd,
|
|
||||||
which is a UK company with a focus on SAS Software,{' '}
|
|
||||||
<StyledAnchor href="https://sasapps.io">Apps</StyledAnchor>, and
|
|
||||||
Services.
|
|
||||||
</StyledDesc>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-3">
|
|
||||||
<StyledHeading>Newsletter</StyledHeading>
|
|
||||||
<form
|
|
||||||
className="kwes-form"
|
|
||||||
method="POST"
|
|
||||||
action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
|
|
||||||
>
|
|
||||||
<div className="mb-3">
|
|
||||||
<InputStyled
|
|
||||||
type="email"
|
|
||||||
name="email"
|
|
||||||
className="form-control"
|
|
||||||
aria-describedby="emailHelp"
|
|
||||||
placeholder="Email Address*"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-3">
|
|
||||||
<InputStyled
|
|
||||||
type="text"
|
|
||||||
name="name"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="First Name"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mb-3">
|
|
||||||
<InputStyled
|
|
||||||
type="text"
|
|
||||||
name="lastName"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Last Name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<SolidButton>Subscribe</SolidButton>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-3">
|
|
||||||
<StyledHeading>Other Resources</StyledHeading>
|
|
||||||
<StyledDesc>
|
|
||||||
Visit our educational and fun SAS® software quiz{' '}
|
|
||||||
<StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor> and
|
|
||||||
test your knowledge of SAS topics.
|
|
||||||
</StyledDesc>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Footer
|
export default Footer
|
||||||
|
|||||||
Reference in New Issue
Block a user