Forms

Forms in Odoo are very powerful. They are directly integrated with other applications and can be used for many different purposes.

In this chapter, you will discover how to:

• Add a form in your custom theme.

• Change the action of the form.

• Stylize the form thanks to Bootstrap variables.

Default form

To add a form to a page, copy and paste the code generated by the Website Builder in the page.

It should look something like the following.

<form
   action="/website/form/" method="post"
   enctype="multipart/form-data"
   class="o_mark_required"
   data-mark="*" data-pre-fill="true"
   data-success-mode="redirect"
   data-success-page="/contactus-thank-you"
   data-model_name="mail.mail">
     <div class="s_website_form_rows row s_col_no_bgcolor">
          <div class="form-group s_website_form_field col-12 s_website_form_dnone" data-name="Field">
               <!-- Form fields -->
           </div>
     </div>
</form>

Actions

There is a data-model_name in the form tag. It enables you to define different actions for your form.

Send an email (this action is used by default).

<form data-model_name="mail.mail">

Apply for a job.

<form data-model_name="hr.applicant">

Create a customer.

<form data-model_name="res.partner">

Create a ticket.

<form data-model_name="helpdesk.ticket">

Create an opportunity.

<form data-model_name="crm.lead">

Create a task.

<form data-model_name="project.task">

注解

The default action is Send an E-mail but following the Apps installed on the database, some other options can be found, such as: Apply for a job, create a customer, create a ticket, create an opportunity, etc.

Please, note that some of these actions may need specific required fields in order to be functional. To not forget some requirements, we highly recommend to preset the form snippet with the Website Builder and copy/paste the generated source code.

Success

Define what happens once the form is submitted thanks to the data-success-mode attribute.

Redirect the user to a page defined in the data-success-page.

<form data-success-mode="redirect" data-success-page="/contactus-thank-you">

Show a message (on the same page).

<form data-success-mode="message">

Add a success message directly under the form tag. Always add the d-none class to make sure that the success message is hidden if the form hasn’t been submitted.

<div class="s_website_form_end_message d-none">
     <div class="oe_structure">
          <section class="s_text_block pt64 pb64" data-snippet="s_text_block">
               <div class="container">
                     <h2 class="text-center">This is a success!</h2>
               </div>
          </section>
     </div>
</div>