Enable Dark Mode!
how-to-create-a-website-form-in-odoo-15.jpg
By: Sagarika

How to Create a Website Form in Odoo 15

Functional Odoo 15 Website&E-commerce

A website form in Odoo allows you to collect information from the users. You can use this input data to create a new record in the back-end. This data can also be used to perform any computations or can achieve any kind of information from this. As a result, forms play an integral role in user interactions and thus improve user experience and satisfaction. It is possible to create websites from the front-end as well as from the back-end by using code. 

In this blog, let’s discuss how to create website forms in Odoo 15 via code with the help of a custom module.

Consider a module that allows users to create appointment requests through the website. For that, let us create an Appointment menu on the website. The XML code below will create a new menu called Appointment since it uses the website. The main_menu as parent one should add a website module depending on this custom module.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <data noupdate="1">
       <record id="menu_appointment" model="website.menu">
           <field name="name">Appointment</field>
           <field name="url">/appointment</field>
           <field name="parent_id" ref="website.main_menu"/>
           <field name="sequence">55</field>
       </record>
   </data>
</odoo>

how-to-create-a-website-form-in-odoo-15

Name: Specifies the name of the newly created menu

URL: Redirecting URL(route) on the menu click

Parent: Specifies the parent menu for the creating menu

Sequence: Sequence for the menu.Used to determine the position of the menu

The URL specified for the menu will help to call the corresponding controller with the given route. In this controller method, it is possible to pass values to the form template. In this case, an appointment is created by a website user by selecting any Partner for the appointments. Hence it is necessary to pass all partners created inside our database.

from odoo import http
From odoo.http import request
class WebsiteForm(http.Controller):
   @http.route(['/appointment'], type='http', auth="user", website=True)
   def appointment(self):
       partners = request.env['res.partner'].sudo().search([])
       values = {}
       values.update({
           'partners': partners
       })
       return request.render("website_form.online_appointment_form", values)

The next step is to create the template with the ID specified in the controller method. This template displays a simple form with all input fields which is needed to make an appointment.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <template id="online_appointment_form">
       <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="/appointment/submit/" method="post" 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_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">Partner</span>
                                           <span class="s_website_form_mark"> *</span>
                                       </label>
                                       <div class="col-sm">
                                           <select name="partner_id" t-attf-class="form-control s_website_form_input" required="1">
                                               <t t-foreach="partners or []" t-as="partner">
                                                   <option t-att-value="partner.id">
                                                       <t t-esc="partner.name" />
                                                   </option>
                                               </t>
                                           </select>
                                       </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">Date</span>
                                           <span class="s_website_form_mark"> *</span>
                                       </label>
                                       <div class="col-sm">
                                       <input id="appointment_date" type="date" class="form-control s_website_form_input" name="appointment_date" 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>
</odoo>

The website form will take all input values and pass them to the controller specified in the form action. Then these values can be used to create a new record in the appointment model.

how-to-create-a-website-form-in-odoo-15


how-to-create-a-website-form-in-odoo-15

In this manner, you will be able to create a website form for your eCommerce as well as company website operations to be run effectively.


If you need any assistance in odoo, we are online, please chat with us.



1
Comments

Julio

I've a question: How can i validate a field of the web form, in the backend? For example: that the email has not been previously entered? or, any other validation? Regards.

31/05/2023

-

4:55PM



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message