khanh.pndc/odoo-docs
1
0
Fork 0
mirror of https://github.com/odoo/documentation.git synced 2026-01-04 10:46:04 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] Website Themes - Forms

Browse Source 
[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>
This commit is contained in:
Brandon Mercier
2025-02-28 09:43:12 +00:00
parent 4513b6fedd
commit d4369e7132
1 changed files with 30 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
content/developer/howtos/website_themes/forms.rst
View File

@@ -11,24 +11,34 @@ In this chapter, you will discover how to:
- 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 your page, you can simply copy and paste the code generated by the Website Builder
in your view.
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">
<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 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
=======
@@ -71,10 +81,22 @@ Create a task.
<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
=======
You can also define what happens once the form is submitted thanks to the `data-success-mode`.
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`.
@@ -88,8 +110,8 @@ Show a message (on the same page).
<form data-success-mode="message">
You can add your success message directly under the form tag. Always add the `d-none` class to make
sure that your success message is hidden if the form hasn't been submitted.
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
@@ -102,33 +124,3 @@ sure that your success message is hidden if the form hasn't been submitted.
</section>
</div>
</div>
Bootstrap variables
===================
As you already know, the Website Builder creates content based on Bootstrap. This is also true for
forms. Below you can find a selection of Bootstrap variables, or check out the `full list of
variables <https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss>`_.
.. code-block:: scss
:caption: ``/website_airproof/static/src/scss/bootstrap_overridden.scss``
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
$input-border-radius: $border-radius !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;