Creating a custom look for your Django CreateView Form

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>

Answer №1

It seems like you have implemented the crispy forms pack. Make sure to load it above any form where it is used, as shown below:

{% load crispy_forms_tags %}

{{form.some_field|as_crispy_field}}

In addition to that, there are other techniques you can use to achieve the desired outcome by applying custom CSS to the form fields. For instance, if you are utilizing bootstrap,

<style>
.form-control {
    background-color: rgb(200,200,200);
}
.form-control:focus {
    background-color: yellow; 
}
</style>

...will introduce different styles for the inputs. Moreover, you can utilize a form class and modify the height of text boxes directly on your field widget, such as:


class SomeFormClass(forms.ModelForm):

    class Meta:
       model = MyModelClass
       fields = ['message'] # add more as needed

   message = forms.CharField(required=False, widget=forms.Textarea(attrs={"rows":3, "cols":20})) # rows adjust the height of the message field.

These methods offer various ways to customize form inputs.

Answer №2

The output was obtained by utilizing the form-control method

Below is the modified CSS code:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Design a custom icon for uploading multiple files

Looking to create a bootstrap-4 icon for multi-file upload. I've got the code reference for single file upload, but now I need to know how to create an icon for multi file upload. <!DOCTYPE html> <html> <head> & ...

What is the process for accessing an uploaded file in Django Rest Framework?

I am currently working on a library application using Django REST framework with two models: File and Book. class File(models.Model): file = models.FileField(upload_to="books//%Y/%m/") class Book(models.Model): filename = models.CharField(m ...

Troubleshooting PHP code: resolving issues with images not appearing in forwarded emails

Currently, I am utilizing HTML email templates to send emails with images. However, when I forward the email to another recipient, the HTML template format gets disrupted. My method of using HTML templates is as follows - $message = file_get_contents(&apo ...

Exploring the Terrain: Troubleshooting Meteor CSS with Twitter Bootstrap

Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...

Creating users with varying levels of access using a Django form

In the Django system I'm currently developing, I've implemented four levels of users: 1. Basic (limited access) 2. Admin (full access for updates/changes/deletes) 3. Gatekeeper (can only create Admin users, no other permissions) 4. Developer (ful ...

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

support for wavesurfer.js in IE10 is not compatible with angular

In the process of developing an Angular application, I am utilizing the wavesurfer.js plugin to display media in wave format. While this functionality works smoothly in Chrome, it encounters issues in IE10 and IE11. Any assistance would be greatly apprecia ...

Displaying three tables in each row using ng-repeat, with the ability to repeat the process multiple times

Is it possible to repeat a table multiple times with each set of three tables in the same line using AngularJS and Bootstrap? I am unsure how this can be achieved with ng-repeat. table 1 | table 2 | table 3 table 4 | table 5 | ... <div ng-repeat="zo ...

Employ the Bootstrap "prepend" feature in combination with react-select

When attempting to integrate Bootstrap's input-group-prepend with react-select, a style inconsistency is encountered. React-select does not align perfectly with the current bootstrap/reactstrap styling, causing some elements to not work together as in ...

The website's text content loads first, allowing for images to take their time and load afterwards

My priority is to ensure that my images load as quickly as HTML and CSS. Currently, the loading time for images (all in .svg format and small) exceeds 2 seconds after other content loads, despite HTML and CSS loading swiftly. Is there a method to expedite ...

The inefficacy of the JQUERY validation plugin, AJAX, and PHP integration

After diving into learning AJAX for submitting forms, I've encountered a roadblock. The data I submit doesn't seem to reach the PHP file as expected, and I can't figure out why it's failing. Here's my HTML: <div class="col-md- ...

JavaScript code for displaying mouse positions and Geolocation using OpenLayers, along with a Geocodezip demonstration

I have attempted to merge Geolocation and Mouse Position Display (longitude/latitude; outside of map) from the OpenLayers and geocodezip site, but I am facing issues. The Mouse Position Display works correctly, however, Geolocation does not seem to work. U ...

Accessing a model's proxy object from its parent in a template

Below is an example of a Django model that extends the Post model from the django basic blog: from django.basic.blog.models import Post from l10n.utils import lookup_translation class ExtendedPost(Post): class Meta: proxy = True def trans ...

One XMLHTTPRequest with multiple replies

My requirement is to have a consolidated XMLHttpRequest call that returns three unique items. These items consist of an HTML formatted table and two separate sets of JSON data for Google Charts. The reason behind this design is that the chart data relies o ...

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

Enhancing your Django unit tests with a refined touch

Currently, I am working on writing tests with Django’s unit tests (which are based on the Python standard library module: unittest). The test I have written for my Contact model is passing successfully: class ContactTestCase(TestCase): def setUp(self ...

Exploring Navigation Options in Django

How can I properly set up the navigation on my website to allow users to easily go back to the homepage or navigate to other sections such as "contact" or "prices"? To illustrate, here is a quick example: Home -- Prices -- Contact When I am on the homep ...

The dropdown in the UIB Typehead is not displaying

I am facing an issue with the UI-Bootstrap typeahead where the dropdown does not display when the data is received. $scope.obtainUsers = function (valor) { console.log(valor) $http({ method: "POST", url ...

Arranging elements in a Material-UI card in a horizontal layout

I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image. Despite trying to giv ...

CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its i ...