How to Create a Custom Web Form View in Odoo 18

Creating user-friendly and functional web forms is a common need in business applications, and Odoo 18 makes it easier than ever to design and integrate custom web forms into your system. Whether you're looking to capture customer inquiries, collect feedback, or streamline internal data collection, building a custom web form can significantly enhance your workflow. In this blog, we'll walk you through the step-by-step process of creating a custom web form view in Odoo 18, covering both the technical setup and practical tips to ensure your form works seamlessly with the Odoo backend.

We’ll guide you through each step of the process to help you confidently create effective and customized web forms tailored to your needs.

1. Creating the Model

To begin, you'll need to define the data model that your web form will be based on. In this tutorial, we’ll create a basic model named Booking, which will store key details like the user's name, email address, and phone number.

from odoo import models, fields
class Booking(models.Model):
   _name = 'custom.web.form.booking'
   _description = 'Booking Form'
   name = fields.Char(string='Name')
   email = fields.Char(string='Email')
   phone = fields.Char(string='Phone')
   date = fields.Date(string='Date')

This model acts as the foundation for storing form submissions and will be used later when rendering the form on the website.

2. Adding a Menu Item

To make your custom web form easily accessible on the website, the next step is to create a navigation menu item called "Booking." This menu will appear under the website's main menu and link directly to the form page. To do this, you'll need to define the menu in an XML file.

Note: Your module must depend on the 'website' module for this to work correctly.

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
   <record id="website_booking_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>

This XML snippet creates a menu item named Booking that links to the URL path '/webform'.

3. Creating the Controller

With the model and menu in place, we now need to build a controller that handles the front-end and back-end logic of our form. The controller will manage rendering the form page and handling data when users submit it.

from odoo import http
from odoo.http import request
class WebFormController(http.Controller):
   @http.route('/webform', auth='public', website=True)
   def display_web_form(self, **kwargs):
       return request.render('custom_web_form.web_form_template')
   @http.route('/webform/submit', type='http', auth='public', website=True, methods=['POST'])
   def handle_web_form_submission(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')

This controller includes two routes:

* One to render the form at '/webform'

* Another to handle the form submission at '/webform/submit'

4. Designing the Form Template

With the model, menu, and controller set up, it’s time to build the user interface — the web form itself. This is done by creating an XML template that defines the layout and input fields users will interact with on the website.

The following XML snippet shows how to structure the form. It includes fields for name, phone number, and email, along with a submit button.

<template id="web_form_template">
   <t t-call="website.layout">
       <div id="wrap" class="oe_structure oe_empty">
           <section class="s_website_form">
               <div class="container">
                   <form action="/webform/submit" enctype="multipart/form-data" class="o_mark_required" method="POST">
                       <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                       <div class="row">
                           <!-- Name Field -->
                           <div class="form-group col-12">
                               <div class="row">
                                   <label class="col-form-label col-sm-auto" style="width: 200px;" for="name">
                                       Name<span class="text-danger"> *</span>
                                   </label>
                                   <div class="col-sm">
                                       <input id="name" type="text" class="form-control" name="name" required="1"/>
                                   </div>
                               </div>
                           </div>
                           <!-- Phone Field -->
                           <div class="form-group col-12">
                               <div class="row">
                                   <label class="col-form-label col-sm-auto" style="width: 200px;" for="phone">
                                       Phone<span class="text-danger"> *</span>
                                   </label>
                                   <div class="col-sm">
                                       <input id="phone" type="text" class="form-control" name="phone" required="1"/>
                                   </div>
                               </div>
                           </div>
                           <!-- Email Field -->
                           <div class="form-group col-12">
                               <div class="row">
                                   <label class="col-form-label col-sm-auto" style="width: 200px;" for="email">
                                       Email<span class="text-danger"> *</span>
                                   </label>
                                   <div class="col-sm">
                                       <input id="email" type="email" class="form-control" name="email" required="1"/>
                                   </div>
                               </div>
                           </div>
                           <!-- Submit Button -->
                           <div class="form-group col-12">
                               <div style="width: 200px;"></div>
                               <button type="submit" class="btn btn-primary">Submit</button>
                           </div>
                       </div>
                   </form>
               </div>
           </section>
       </div>
   </t>
</template>

request.env['custom.web.form.booking'].sudo().create({
   'name': post.get('name'),
   'phone': post.get('phone'),
   'email': post.get('email'),
})

Here’s what happens:

* post.get('field_name') extracts the values entered by the user in the form.

* request.env['custom.web.form.booking'].sudo().create({...}) creates a new record in the Booking model using those values.

* sudo() is used to bypass access rights and ensure the form submission works for public users.

By implementing these steps, businesses can effortlessly design custom forms to serve a variety of needs, whether it's capturing leads, gathering feedback, or handling customer inquiries. With Odoo’s adaptable framework, organizations can enhance their digital presence, boost engagement, and build stronger relationships with their audience.

To read more about How to Create a Custom Web Form View in Odoo 17, refer to our blog How to Create a Custom Web Form View in Odoo 17.