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> </div>
<div class="mb-3"> <label class="form-label">Image Check Radio</label> <div class="row g-2"> <div class="col-6 col-sm-4"> <label class="form-imagecheck mb-2"> <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="..." alt="Macbook, an iPhone, a coffee, a chocolate and a notebook in a 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-radio" type="radio" value="2" class="form-imagecheck-input" checked/> <span class="form-imagecheck-figure"> <img src="..." alt="Man and Woman Holding Ice Creams" class="form-imagecheck-image"> </span> </label> </div> <div class="col-6 col-sm-4"> <label class="form-imagecheck mb-2"> <input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="..." alt="Female hands typing on the remote wireless computer keyboard" class="form-imagecheck-image"> </span> </label> </div> <div class="col-6 col-sm-4"> <label class="form-imagecheck mb-2"> <input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked/> <span class="form-imagecheck-figure"> <img src="..." alt="Blonde woman in a black jacket and ripped jeans by a green handrail" class="form-imagecheck-image"> </span> </label> </div> <div class="col-6 col-sm-4"> <label class="form-imagecheck mb-2"> <input name="form-imagecheck-radio" type="radio" value="5" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="..." alt="Stylish workspace with Macbook Pro" class="form-imagecheck-image"> </span> </label> </div> <div class="col-6 col-sm-4"> <label class="form-imagecheck mb-2"> <input name="form-imagecheck-radio" type="radio" value="6" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="..." alt="Restaurants in old town of Nessebar, Bulgaria" 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>