Add an image check to your form and give users visually attractive options to choose from.
<div class= "mb-3" >
<label class= "form-label" > Image Check</label>
<div class= "row g-2" >
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "1" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Breakfast served with tea, bread and eggs" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "2" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Book, fairy lights" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "3" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Healthy Dinner" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "4" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "5" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Beautiful blonde woman on a wooden pier by the lake" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "6" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Still life of mandarin oranges with leaves" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "7" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Blonde woman having a healthy snack at the wooden pier" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "8" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class= "form-imagecheck-image" >
</span>
</label>
</div>
<div class= "col-6 col-sm-4" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "9" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<img src= "..." alt= "Overhead view of macarons on a marble slab" class= "form-imagecheck-image" >
</span>
</label>
</div>
</div>
</div>
<div class= "mb-3" >
<label class= "form-label" > Person Check</label>
<div class= "row g-2" >
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "1" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "2" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" > HS</span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "3" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "4" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "5" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "6" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" > SA</span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "7" class= "form-imagecheck-input" checked />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "8" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-imagecheck mb-2" >
<input name= "form-imagecheck" type= "checkbox" value= "9" class= "form-imagecheck-input" />
<span class= "form-imagecheck-figure" >
<span class= "form-imagecheck-image" >
<span class= "avatar avatar-md" style= "background-image: url(...)" ></span>
</span>
</span>
</label>
</div>
</div>
</div>