pre-booking form
<div class="formbold-main-wrapper">
<!-- Author: Ephraim Mundia -->
<!-- Ephraim Mundia -->
<div class="formbold-form-wrapper">
<img src="wysiwyg/Samsung/s23_Ultra_banner.jpg">
<form action="https://samsung.brandcart.co.ke//s/FORM_ID" method="POST">
<div class="formbold-input-wrapp formbold-mb-3">
<label for="firstname" class="formbold-form-label"> Name </label>
<div>
<input
type="text"
name="firstname"
id="firstname"
placeholder="First name"
class="formbold-form-input"
/>
<input
type="text"
name="lastname"
id="lastname"
placeholder="Last name"
class="formbold-form-input"
/>
</div>
</div>
<div class="formbold-mb-3">
<label for="age" class="formbold-form-label"> Preferred Color </label>
<input
type="text"
name="age"
id="age"
placeholder="ex:25"
class="formbold-form-input"
/>
<div class="formbold-mb-3">
<label for="email" class="formbold-form-label"> Email </label>
<input
type="email"
name="email"
id="email"
placeholder="example@email.com"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-3">
<label for="address" class="formbold-form-label"> Address </label>
<input
type="text"
name="address"
id="address"
placeholder="Street address"
class="formbold-form-input formbold-mb-3"
/>
<input
type="text"
name="address2"
id="address2"
placeholder="Street address line 2"
class="formbold-form-input"
/>
</div>
<div class="formbold-mb-3 formbold-input-wrapp">
<label for="phone" class="formbold-form-label"> Phone </label>
<div>
<input
type="text"
name="areacode"
id="areacode"
placeholder="Area code"
class="formbold-form-input formbold-w-45"
/>
<input
type="text"
name="phone"
id="phone"
placeholder="Phone number"
class="formbold-form-input"
/>
</div>
</div>
<div class="formbold-input-flex">
<div>
<label for="post" class="formbold-form-label"> Post/Zip code </label>
<input
type="text"
name="post"
id="post"
placeholder="ex:8976"
class="formbold-form-input"
/>
</div>
<div>
<label for="city" class="formbold-form-label"> City </label>
<input
type="text"
name="city"
id="city"
placeholder="ex: New York"
class="formbold-form-input"
/>
</div>
</div>
</div>
<div class="formbold-checkbox-wrapper">
<label for="supportCheckbox" class="formbold-checkbox-label">
<div class="formbold-relative">
<input
type="checkbox"
id="supportCheckbox"
class="formbold-input-checkbox"
/>
<div class="formbold-checkbox-inner">
<span class="formbold-opacity-0">
<svg
width="11"
height="8"
viewBox="0 0 11 8"
class="formbold-stroke-current"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.81868 0.688604L4.16688 5.4878L2.05598 3.29507C1.70417 2.92271 1.1569 2.96409 0.805082 3.29507C0.453266 3.66742 0.492357 4.24663 0.805082 4.61898L3.30689 7.18407C3.54143 7.43231 3.85416 7.55642 4.16688 7.55642C4.47961 7.55642 4.79233 7.43231 5.02688 7.18407L10.0696 2.05389C10.4214 1.68154 10.4214 1.10233 10.0696 0.729976C9.71776 0.357624 9.17049 0.357625 8.81868 0.688604Z"
fill="white"
/>
</svg>
</span>
</div>
</div>
I agree to the defined
<a href="#"> terms, conditions, and policies</a>
</label>
</div>
<button class="formbold-btn">Submit</button>
</form>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
}
.formbold-mb-3 {
margin-bottom: 15px;
}
.formbold-relative {
position: relative;
}
.formbold-opacity-0 {
opacity: 0;
}
.formbold-stroke-current {
stroke: #ffffff;
z-index: 999;
}
#supportCheckbox:checked ~ div span {
opacity: 1;
}
#supportCheckbox:checked ~ div {
background: #6a64f1;
border-color: #6a64f1;
}
.formbold-main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.formbold-form-wrapper {
margin: 0 auto;
max-width: 570px;
width: 100%;
background: white;
padding: 40px;
}
.formbold-img {
display: block;
margin: 0 auto 45px;
}
.formbold-input-wrapp > div {
display: flex;
gap: 20px;
}
.formbold-input-flex {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.formbold-input-flex > div {
width: 50%;
}
.formbold-form-input {
width: 100%;
padding: 13px 22px;
border-radius: 5px;
border: 1px solid #dde3ec;
background: #ffffff;
font-weight: 500;
font-size: 16px;
color: #536387;
outline: none;
resize: none;
}
.formbold-form-input::placeholder,
select.formbold-form-input,
.formbold-form-input[type='date']::-webkit-datetime-edit-text,
.formbold-form-input[type='date']::-webkit-datetime-edit-month-field,
.formbold-form-input[type='date']::-webkit-datetime-edit-day-field,
.formbold-form-input[type='date']::-webkit-datetime-edit-year-field {
color: rgba(83, 99, 135, 0.5);
}
.formbold-form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}
.formbold-form-label {
color: #536387;
font-size: 14px;
line-height: 24px;
display: block;
margin-bottom: 10px;
}
.formbold-checkbox-label {
display: flex;
cursor: pointer;
user-select: none;
font-size: 16px;
line-height: 24px;
color: #536387;
}
.formbold-checkbox-label a {
margin-left: 5px;
color: #6a64f1;
}
.formbold-input-checkbox {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.formbold-checkbox-inner {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 16px;
margin-top: 2px;
border: 0.7px solid #dde3ec;
border-radius: 3px;
}
.formbold-form-file {
padding: 12px;
font-size: 14px;
line-height: 24px;
color: rgba(83, 99, 135, 0.5);
}
</style>