[IMP] Website Themes - Forms

[IMP] Website Themes - Forms
[FIX] Anchors + Modifications after code review

closes #12224

Signed-off-by: Brandon Mercier (bram) <[email protected]>

Author: bram-odoo

content/developer/howtos/website_themes/forms.rst

@@ -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;