How to insert data in MySQL database from an HTML form using Django

In this article, you will learn how to insert contact form data into a MySQL database using Django. Django is a free, open-source Python based framework. It enables fast development of any type of web application. Like other programming languages, it can easily connect with a database. Django opens a connection to the database when it first makes a database query. It keeps this connection open and reuses it in subsequent requests. Here, we have explained the insertion process in detail. For this, we have created an HTML template file that contains a 'Contact' form.

Create a Django project and application

For creating a new Django project, open your terminal window and activate the virtual environment. If you want to know more about how to install and activate the virtual environment, you can look at this article, Install Virtual Environment. The following command creates a new Django project 'contactform' and an application 'contact'.

(env) c:\python37\Scripts\projects>django-admin startproject contactform

(env) c:\python37\Scripts\projects>cd contactform

(env) c:\python37\Scripts\projects\contactform>django-admin startapp contact

You can see a folder in your current project containing the Django files named 'contactform'.

Changes in 'settings.py'

Suppose we have a MySQL database name 'employee'. To connect to MySQL with Django, we will have to make database configuration changes in 'settings.py'. Make sure to replace 'NAME', 'USER', 'PASSWORD' and 'HOST' with your database configurations.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'employee',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"
         }   
    }
}

Create a Model

The Model helps to map the fields to the database. It represents a database table. To do this, look for the file 'models.py' in your app folder and place the following code. It has five fields- cid, fullname, email, contact, and message.

from django.db import models

class ContactForm(models.Model):
    fullname= models.CharField(max_length=100)
    email= models.EmailField()
    contact= models.CharField(max_length=50)
    message= models.CharField(max_length=200)

Create a ModelForm

The ModelForm is required to collect the form data. So, we have created a ModelForm 'forms.py' in the app directory, whose fields are taken from the database table.

from django import forms
from .models import ContactForm

class FormContactForm(forms.ModelForm):
    class Meta:
        model= ContactForm
        fields= ["fullname", "email", "contact", "message"]

Create a View

We have placed the following code in 'views.py'. It takes the data that the user has entered into the contact form fields and inserts it into a database. The 'form.save()' method is responsible for saving the form data to the database.

from django.shortcuts import render
from .forms import FormContactForm

def showform(request):
    form= FormContactForm(request.POST or None)
    if form.is_valid():
        form.save()
  
    context= {'form': form }
        
    return render(request, 'contactform.html', context)

Create a Template file

Next, we should have a user interface where user can submit a form. So, we have created an HTML template file 'contactform.html'.

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Django Contact Form</title>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
</head>  
<body>  
<form method="POST" class="post-form" action="#">  
{% csrf_token %}  
<div class="container">  
<div class="form-group">
	<label for="fullname" class="control-label col-sm-2">Full Name</label>
	<div class="col-sm-10">
	<input type="text" name="fullname" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="email" class="control-label col-sm-2">Email</label>
	<div class="col-sm-10">
	<input type="text" name="email" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="contact" class="control-label col-sm-2">Contact</label>
	<div class="col-sm-10">
	<input type="text" name="contact" value=""/>
	</div>
</div> 
<div class="form-group">
	<label for="message" class="control-label col-sm-2">Message</label>
	<div class="col-sm-10">
	<input type="text" name="message" value=""/>
	</div>
</div> 
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button> 
</div>
</div> 
</form>  
</body>  
</html>

Add link in 'urls.py'

At last, we have added a path to the route page to the particular link.

from django.contrib import admin
from django.urls import path
from contact import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('showform', views.showform),
]

Django ajax GET and POST request
Django Simple File Upload
Django Pagination with Ajax and jQuery
How to add image in Django model
Django send email on contact form submission
Get data from MySQL in Django View with Models
Django upload image to database
Django pass variable from view to HTML template
Django queryset to CSV
How to generate and download CSV file in Django
How to get data from database in django
How to create your first Django app on Windows
Django send email on form submission
Crud Operations in Python
Fibonacci series in Python using function
File Handling in Python
Python convert XML to JSON
Python convert list to numpy array
How to shuffle a list in Python
Print hollow diamond pattern in Python
Python *args **kwargs