Home Blog How To Create A Form On Website In Odoo
How To Create A Form  On Website In Odoo

How To Create a Form on Website In Odoo

What is a Form on a Website?

A Webform, HTML form, or form on a website allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.

For example, forms can be used to enter shipping or credit card data to order a product or can be used to retrieve search results from a search engine.

These forms are a handy utility for any website. In this blog, we are going to discuss how to create a form using controllers in Odoo.

A form on your website in Odoo looks something like this:

What is a Form on a W​ebs​ite

You can create your form or customize the already present form in Odoo.

These forms can be used to show data from the database or to enter data into the database. So, let us start.

 Subscribe for Odoo tips, technical insights, and more!

We’ll follow these basic steps for creating a simple form using Controller in Odoo.

1) Add Dependency 'website' under depends in manifest.py file.

Create a simple Odoo form with these basic Controller steps

2) Create a menu for the form on the website using a data file.

3) Create an odoo controller to be redirected to the website.

4) Create a template for the form.

5) Create another odoo controller to submit data into the database after clicking the submit button.

6) Create a template for the controller to redirect after the submit button is clicked and the form is submitted successfully.

First of all, we’ll create a menu for this form on the website. You can do this by creating a record in the data file of your custom module. Simply create a record like this:

Create a simple Odoo form with these basic Controller steps
<?xml version="1.0" encoding="utf-8"?>
        <record id="menu_partner_form" model="website.menu">
        #here record id is the unique id of your record & model is the ‘website.menu’ of the          website.
            <field name="name">Create Customer</field>
            #here mention the name of the menu to appear.
            <field name="url">/customer/form</field>
            #here mention the url of the website to be redirected after clicking. This is a 
             controller. <field name="parent_id" ref="website.main_menu"/> #here mention the parent id of the menu which we are inheriting. <field name="sequence" type="int">22</field> </record> </data> </odoo>

Now install your module or upgrade your module. After that, you can see that a menu appears on the website

Create a simple Odoo form with these basic Controller steps

Now we’ll create the URL through the controller on which the web page will be redirected.

This controller will redirect the data to the database.

In this case, we are creating a customer through the form on the web page.

In the controller, we’ll create a record, or in this case a partner by passing data into the controller using a form created through the XML record.

A controller is created using python in the module.

This controller.py file needs to be present in the controller folder in your custom module.

Read Here: How To Create Custom Module In Odoo

And make sure to call the file and folder in the __init__.py file like the models.

Create a simple Odoo form with these basic Controller steps
  # -*- coding: utf-8 -*-
from odoo import http
from odoo.http import request
class PartnerForm(http.Controller):
    #mention class name
    @http.route(['/customer/form'], type='http', auth="public", website=True)
    #mention a url for redirection.
    #define the type of controller which in this case is ‘http’.
    #mention the authentication to be either public or user.
    def partner_form(self, **post):
    #create method
    #this will load the form webpage
        return request.render("create_partner_by_website.tmp_customer_form", {})
    @http.route(['/customer/form/submit'], type='http', auth="public", website=True)
    #next controller with url for submitting data from the form#
    def customer_form_submit(self, **post):
        partner = request.env['res.partner'].sudo().create({
            'name': post.get('name'),
            'email': post.get('email'),
            'phone': post.get('phone')
        vals = {
            'partner': partner,
        #inherited the model to pass the values to the model from the form#
        return request.render("create_partner_by_website.tmp_customer_form_success", vals)
        #finally send a request to render the thank you page#

We have created two controllers—one for the menu to redirect to the form template.

And the second one is to process the data into the database on form action, or we can say when the to submit button is clicked.

After creating the controller in the .py file, we’ll create a template for the form.

This template will be rendered when our first controller is called.

We have mentioned the url of the second controller so that the action of this form calls that particular controller.

Create a simple Odoo form with these basic Controller steps
<?xml version="1.0" encoding="UTF-8"?>
    <template id="tmp_customer_form" name="Partner Form">
        <t t-call="website.layout">
            <div id="wrap">
                <div class="container">
                    <div class="col-md-12">
                       <form action="/customer/form/submit">
                         #url/controller to called on the form action.
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" name="name" id="name"                                 required="true" />
                          #label and id of the fields to be created in the form.These fields                 should be present in the model for the entry of the data into the database.#          
                            <div class="form-group">
                                <label for="email">Email address:</label>
                                <input type="email" class="form-control" name="email" 
                                 id="email" required="true" /> </div> <div class="form-group"> <label for="name">Phone:</label> <input type="text" class="form-control" name="phone"
                                id="phone" required="true" /> </div> <button type="submit" class="btn btn-primary">Create</button> </form> </div> </div> </div> </t> </template>

Now the form is ready, at last, we’ll just create another template that will display the thank you message after the form is successfully submitted. And the partner record is created.

Create a simple Odoo form with these basic Controller steps

This will display a message after the form is successfully submitted from your web page.

<template id="tmp_customer_form_success" name="Customer Form Successfully Submitted"> <t t-call="website.layout"> <div id="wrap"> <div class="container"> <div class="col-md-12"> <div class="alert alert-success"> Customer created successfully. </div> </div> </div> </div> </t> </template </odoo>

After this we’ll upgrade the module and navigate to the website. After clicking on the menu, this form will open up.

Create a simple Odoo form with these basic Controller steps

After filling out this form and clicking on the submit button. The controller will send a request along with data from the form to the database and a new contact will be created and the user will get a message:

Create a simple Odoo form with these basic Controller steps

We can check that a new contact has been created.

Create a simple Odoo form with these basic Controller steps

Thus, using controller & templates, we can create a form on the website following these simple steps in Odoo.

You can also check our other Blog: How To Change Home Action In Odoo

I hope this blog is helpful to you. Do let us know about your thoughts or queries that you have in the comment section.  

For any Odoo Customization or Implementation, services, contact us by filling the Contact Form or simply write us at [email protected]

Book an Odoo Demo Now


 Check out our related blog posts:-

How To Replace Header and Footer In Odoo Website

How To Create Smart Button In Odoo

A Key To Odoo Web Hosting Provider

Get In Touch with Us

Leave a Comment

Your email address will not be published.

Your comment is under review by our moderation team.