mirror of
https://github.com/odoo/documentation.git
synced 2026-01-04 02:36:32 +07:00
d4369e7132
[IMP] Website Themes - Forms
[FIX] Anchors + Modifications after code review
closes odoo/documentation#12444
X-original-commit: 88301e22ea
Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>
127 lines
3.1 KiB
ReStructuredText
127 lines
3.1 KiB
ReStructuredText
=====
|
|
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.
|
|
|
|
.. _website_themes/forms/default_forms :
|
|
|
|
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.
|
|
|
|
.. code-block:: xml
|
|
|
|
<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>
|
|
|
|
.. _website_themes/forms/actions :
|
|
|
|
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).
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="mail.mail">
|
|
|
|
Apply for a job.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="hr.applicant">
|
|
|
|
Create a customer.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="res.partner">
|
|
|
|
Create a ticket.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="helpdesk.ticket">
|
|
|
|
Create an opportunity.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="crm.lead">
|
|
|
|
Create a task.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-model_name="project.task">
|
|
|
|
.. note::
|
|
|
|
The default action is :guilabel:`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.
|
|
|
|
.. _website_themes/forms/success :
|
|
|
|
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`.
|
|
|
|
.. code-block:: xml
|
|
|
|
<form data-success-mode="redirect" data-success-page="/contactus-thank-you">
|
|
|
|
Show a message (on the same page).
|
|
|
|
.. code-block:: xml
|
|
|
|
<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.
|
|
|
|
.. code-block:: xml
|
|
|
|
<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>
|