+91 9818211679, +91 9998040067       [email protected]

How to Create a Form on Website in Odoo

What is a Form on 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 check boxes, 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 very useful 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:

How to Create a Form on Website in Odoo

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

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

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

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

2) Create an odoo controller to be redirected on the website.

3) Create a template for the form.

4) Create another odoo controller to submit data into the database after the submit button is clicked.

5) Create a template for 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:

How to Create a Form on Website in Odoo
 <?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <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

How to Create a Form on Website in Odoo

Now we’ll create the url through 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 form on web page.

In the controller, we’ll create a record, or in this case a partner by passing data into the controller using 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.

How to Create a Form on Website in Odoo
  # -*- 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'].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 2 controllers. One for the menu to redirect to the form template.

And second one to process the data into the database on form action or we can say, when the 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.

How to Create a Form on Website in Odoo
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <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>
                            <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 which will display the thank you message after the form is successfully submitted. And the partner record is created.

How to Create a Form on Website in Odoo

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.

How to Create a Form on Website in Odoo

After filling 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:

How to Create a Form on Website in Odoo

We can check that a new contact has been created.

How to Create a Form on Website in Odoo

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

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


I hope this blog 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 via fill the Contact Form or simple write us at [email protected]

 

There are no comments for now.

There are no comments for now.


There are no comments for now.