<div class="container">
<form class="form" method="POST" action="https://api.formjam.io/form/e2535831-b3d4-4f74-8b20-f9495684915c">
<input type="hidden" name="_honeypot" value="" />
<h1>Contact Us</h1>
<div class="row">
<div class="input-group">
<label for="firstName">First Name</label>
<input name="firstName" id="firstName" required pattern="^\w+[\w\s]*\w+$" maxlength="50" autofocus placeholder="e.g. John" />
</div>
<div class="input-group">
<label for="lastName">Last Name</label>
<input name="lastName" id="lastName" required pattern="^\w+[\w\s]*\w+$" maxlength="100" placeholder="e.g. Doe" />
</div>
</div>
<div class="input-group">
<label for="email">E-mail</label>
<input name="email" type="email" id="email" maxlength="200" required placeholder="e.g. john.doe@example.com" />
</div>
<div class="input-group">
<label for="subject">Subject</label>
<input name="subject" id="subject" required pattern="^\w+[\w\s]*\w+$" maxlength="50" placeholder="e.g. John's Enquiry" />
</div>
<div class="input-group">
<label for="reason">Which of the following best describes your enquiry?</label>
<select name="reason" id="reason">
<option>-</option>
<option>I want to buy</option>
<option>I want more information</option>
</select>
</div>
<div class="input-group">
<label for="message">Message</label>
<textarea name="message" id="message" maxlength="4000" required placeholder="e.g. Hello..."></textarea>
</div>
<div class="row input-group">
<input name="consentGiven" id="consentGiven" type="checkbox" required>
<label for="consentGiven">I agree to the Privacy Policy</label>
</div>
<div class="row input-group">
<input name="marketingConsentGiven" id="marketingConsentGiven" type="checkbox">
<label for="marketingConsentGiven">I agree to being contacted for marketing purposes</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
body
background-color: #333
max-width: 100vw
min-height: 100vh
overflow-x: hidden
.container
display: flex
justify-content: center
align-items: center
width: 100%
height: 100%
padding: 20px 10px
.form
background-color: #555
padding: 20px
display: flex
flex-direction: column
gap: 1.5rem
color: #eee
min-width: 340px
.input-group
display: flex
flex-direction: column
gap: 0.5rem
.row
display: flex
flex-direction: row
gap: 1rem
width: 100%
align-items: center
input, textarea, button, select
display: block
border: 1px solid #333
border-radius: 5px
padding: 0.5rem 1rem
&::placeholder
color: inherit
opacity: 0.3
textarea
min-height: 5rem
button
background-color: #87CEEB
color: #fff
font-weight: 700
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.