<div class="w-full max-w-3xl mx-auto px-4">
<div id="div_id_email" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_email" class="label-class block text-gray-900 text-sm">
Email<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_password" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_password" class="label-class block text-gray-900 text-sm">
Password<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_address" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_address" class="label-class block text-gray-900 text-sm">
Address<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_address2" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_address2" class="label-class block text-gray-900 text-sm">
Address 2<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_city" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_city" class="label-class block text-gray-900 text-sm">
City<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_state" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_state" class="label-class block text-gray-900 text-sm">
State<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_zip_code" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
<label for="id_zip_code" class="label-class block text-gray-900 text-sm">
Zip<span class="asteriskField">*</span>
</label>
</div>
<div class="md:w-2/3">
<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 id="div_id_check_box" class="md:flex md:items-center mb-6">
<div class="md:w-1/3 md:flex md:flex-col md:items-center">
</div>
<div class="md:w-2/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>
<button
type="submit"
class="btn btn-primary transition-all"
data-form-target="submit"
>
<span class="when-enabled">Submit</span>
<span class="when-disabled">
<svg class="inline-block mr-2 w-4 h-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...
</span>
</button>
</div>def horizontal_form(self, **kwargs):
form = SignupForm()
form.formify_helper = FormifyHelper()
form.formify_helper.field_wrapper_class = "md:flex md:items-center mb-6"
form.formify_helper.label_container_class = (
"md:w-1/3 md:flex md:flex-col md:items-center"
)
form.formify_helper.label_class = "label-class block text-gray-900 text-sm"
form.formify_helper.field_container_class = "md:w-2/3"
template = Template(
"""
{% load formify %}
<div class="w-full max-w-3xl mx-auto px-4">
{% render_form form %}
{% render_submit %}
</div>
""",
)
return template.render(Context({"form": form}))