<div class="w-full max-w-3xl mx-auto px-4">
<div class="grid grid-cols-12 gap-3" >
<div class="col-span-12 md:col-span-6" >
<div id="div_id_email" class="field-wrapper mb-3">
<label for="id_email" class="label-class block text-gray-900 mb-2">
Email<span class="asteriskField">*</span>
</label>
<input type="email" name="email" maxlength="320" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_email">
</div>
</div>
<div class="col-span-12 md:col-span-6" >
<div id="div_id_password" class="field-wrapper mb-3">
<label for="id_password" class="label-class block text-gray-900 mb-2">
Password<span class="asteriskField">*</span>
</label>
<input type="password" name="password" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_password">
</div>
</div>
<div class="col-span-12" >
<div id="div_id_address" class="field-wrapper mb-3">
<label for="id_address" class="label-class block text-gray-900 mb-2">
Address<span class="asteriskField">*</span>
</label>
<input type="text" name="address" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_address">
</div>
</div>
<div class="col-span-12" >
<div id="div_id_address2" class="field-wrapper mb-3">
<label for="id_address2" class="label-class block text-gray-900 mb-2">
Address 2<span class="asteriskField">*</span>
</label>
<input type="text" name="address2" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_address2">
</div>
</div>
<div class="col-span-12 md:col-span-6" >
<div id="div_id_city" class="field-wrapper mb-3">
<label for="id_city" class="label-class block text-gray-900 mb-2">
City<span class="asteriskField">*</span>
</label>
<input type="text" name="city" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_city">
</div>
</div>
<div class="col-span-12 md:col-span-4" >
<div id="div_id_state" class="field-wrapper mb-3">
<label for="id_state" class="label-class block text-gray-900 mb-2">
State<span class="asteriskField">*</span>
</label>
<div >
<div class="relative">
<select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="state" id="id_state" required>
<option value="" selected
>Choose...</option>
<option value="option1"
>Option 1</option>
<option value="option2"
>Option 2</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-2" >
<div id="div_id_zip_code" class="field-wrapper mb-3">
<label for="id_zip_code" class="label-class block text-gray-900 mb-2">
Zip<span class="asteriskField">*</span>
</label>
<input type="text" name="zip_code" class=" bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" required id="id_zip_code">
</div>
</div>
<div class="col-span-12" >
<div id="div_id_check_box" class="field-wrapper mb-3">
<label for="id_check_box" class="inline-flex items-center gap-2 text-gray-700">
<input type="checkbox" name="check_box" class=" " id="id_check_box">
Check me out
</label>
</div>
</div>
<div class="col-span-12" >
<button
class="btn btn-primary"
type="submit"
>
Sign in
</button>
</div>
</div>
</div>def form_grid(self, **kwargs):
form = SignupForm()
template = Template(
"""
{% load formify %}
<div class="w-full max-w-3xl mx-auto px-4">
{% render_form form %}
</div>
""",
)
return template.render(Context({"form": form}))