Can someone help me design my form to look like option B, as shown in the image? Currently, my form looks like A. I am only using a CreateView and not any Form or ModelForm. I do not want to modify my Views or add a new FormClass. Any suggestions on how to achieve the desired result would be appreciated.
https://i.sstatic.net/yNzjM.png
Below is my Model:
class InfluencerModel(models.Model):
full_name = models.CharField(max_length=255, null=False, blank=False)
email = models.EmailField(max_length=255, null=False, blank=False)
contact_number = models.CharField(max_length=10, null=False, blank=False)
instagram_id = models.CharField(max_length=50, null=False, blank=False)
message = models.TextField(null=True, blank=True)
visited_on = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.email
def get_absolute_url(self):
return reverse("influencers")
Views.py
class InfluencersPageView(CreateView):
model = InfluencerModel
template_name = 'home/influencers.html'
fields = ['full_name', 'email', 'contact_number', 'instagram_id', 'message']
def get_context_data(self, *args, **kwargs):
context = super(InfluencersPageView, self).get_context_data(*args, **kwargs)
return context
Here is the Template:
<form action="" role="form" class="php-email-form" method="post"> {% csrf_token %}
<div class="row">
<div class="col-md-6 form-group">
{{ form.full_name.errors }}
{{form.full_name|as_crispy_field}}
</div>
<div class="col-md-6 form-group mt-3 mt-md-0">
{{ form.email.errors }}
{{form.email|as_crispy_field}}
</div>
<div class="form-group col-md-6">
{{ form.contact_number.errors }}
{{form.contact_number|as_crispy_field}}
</div>
<div class="form-group col-md-6">
{{ form.instagram_id.errors }}
{{form.instagram_id|as_crispy_field}}
</div>
</div>
<div class="form-group mt-3" rows="7">
{{ form.message.errors }}
{{form.message|as_crispy_field}}
</div>
<div class="text-center">
<button type="submit" class="btn btn-outline-secondary" style="background-color:#FF512F; color: white">Send Message</button>
</div>
</form>