In today's digital era, businesses require flexible and user-friendly tools to streamline their operations and engage with customers effectively. Odoo, an open-source ERP system, offers a powerful platform for businesses to manage various aspects of their operations, including sales, inventory, and customer relationship management. One key feature of Odoo is its ability to create custom web form views, allowing businesses to collect data from website visitors, customers, or internal users seamlessly.
This blog post will serve as your comprehensive guide to creating custom web forms in Odoo 17.
We'll walk you through the process step-by-step, ensuring you have the necessary knowledge to build efficient and informative forms for your specific needs.
1. Defining the Model:
Our first step involves defining the model for which we intend to create the web form. In this example, let's create a simple model named "Booking" with fields for capturing essential details such as name, email, and phone number.
Python
from odoo import models, fields
class Contact(models.Model):
_name = 'custom.web.form.booking'
name = fields.Char(string='Name')
email = fields.Char(string='Email')
phone = fields.Char(string='Phone')
date = fields.Date(string='Date')
2. Creating a Menu:
Next, let's create a dedicated "Booking" menu on the website for easy access. The following XML code demonstrates how to achieve this. It's important to note that adding a website module is necessary for this custom module to function correctly.
XML
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<record id="website_partner_menu" model="website.menu">
<field name="name">Booking</field>
<field name="url">/webform</field>
<field name="parent_id" ref="website.main_menu"/>
<field name="sequence" type="int">90</field>
</record>
</odoo>
3. Building the Controller:
Now, we need to create a controller to handle HTTP requests for our custom web form. This controller will include methods to render the form and process form submissions effectively.
Python
from odoo.http import request, Controller, route
class WebFormController(Controller):
@route('/webform', auth='public', website=True)
def web_form(self, **kwargs):
return request.render('custom_web_form.web_form_template')
@route('/webform/submit', type='http', auth='public', website=True, methods=['POST'])
def web_form_submit(self, **post):
request.env['custom.web.form.booking'].sudo().create({
'name': post.get('name'),
'phone': post.get('phone'),
'email': post.get('email'),
})
return request.redirect('/thank-you-page')
4. Designing the Template:
Now, let's create an XML template file to define the structure and layout of our web form. This will determine how the form appears to users.
<template id="web_form_template">
<t t-call="website.layout">
<div id="wrap" class="oe_structure oe_empty">
<section class="s_website_form" data-vcss="001" data-snippet="s_website_form">
<div class="container">
<form action="/webform/submit" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="" data-success-page="">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
<div class="row s_col_no_resize s_col_no_bgcolor">
<label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="studio1">
<span class="s_website_form_label_content">Name</span>
<span class="s_website_form_mark"> *</span>
</label>
<div class="col-sm">
<input id="name" type="text" class="form-control s_website_form_input" name="name" required="1"/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
<div class="row s_col_no_resize s_col_no_bgcolor">
<label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="studio1">
<span class="s_website_form_label_content">Phone</span>
<span class="s_website_form_mark"> *</span>
</label>
<div class="col-sm">
<input id="phone" type="text" class="form-control s_website_form_input" name="phone" required="1"/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
<div class="row s_col_no_resize s_col_no_bgcolor">
<label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="studio1">
<span class="s_website_form_label_content">Email</span>
<span class="s_website_form_mark"> *</span>
</label>
<div class="col-sm">
<input id="email" type="email" class="form-control s_website_form_input" name="email" required="1"/>
</div>
</div>
</div>
<div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
<div style="width: 200px;" class="s_website_form_label"/>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</section>
</div>
</t>
</template>
In the web_form_submit method of the controller, the following line is responsible for creating a new record in the backend upon form submission: It retrieves the submitted data from the form using the post.get() method and creates a new record in the Odoo database using the create method on the custom.web.form.booking model.
request.env['custom.web.form.booking'].sudo().create({
'name': post.get('name'),
'phone': post.get('phone'),
'email': post.get('email'),
}) By following the outlined steps, organizations can easily create tailored forms for various purposes, such as lead generation, feedback collection, or inquiries. Leveraging Odoo's flexible platform, businesses can stay ahead in the digital landscape, driving growth and fostering lasting connections with their audience.