[IMP] website: update form section in building blocks

task-5003367

closes odoo/documentation#14678

Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>

content/applications/websites/website/structure/header_footer.rst

@@ -7,6 +7,8 @@ the :ref:`menu <website/header_footer/header-content>`, the search bar, the sign
 button, etc. The footer is displayed at the bottom of a web page and usually contains information
 such as contact details, links, legal notices, and other options.
 
+.. _website/header_footer/header-design:
+
 Header design
 =============
 
@@ -150,6 +152,8 @@ editor, then, in the :guilabel:`Mega Menu` section:
 
 To finalize changes, click on :guilabel:`Save`.
 
+.. _website/header_footer/footer-design:
+
 Footer design
 =============
 

content/applications/websites/website/web_design/building_blocks.rst

@@ -52,7 +52,8 @@ Form
 ----
 
 The :guilabel:`Form` block is used to collect information from website visitors and create records
-in your database, if applicable.
+in your database, if applicable. To add a form to a website page, drag and drop the
+:guilabel:`Contact & Forms` category, then select the :guilabel:`Form block`.
 
 .. image:: building_blocks/form-block.png
    :alt: Example of a form block
@@ -112,6 +113,40 @@ new (or any other) field on the form, select the field, then use the options ava
 
 Once you have made the desired changes, click :guilabel:`Save`.
 
+Add an Odoo contact form on a non-Odoo website
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+You can display an Odoo contact form on another website using an iframe. To do so, follow these
+steps:
+
+#. **Prepare the Odoo form:** Create a contact form on a page in Odoo Website and remove the
+   :ref:`header design <website/header_footer/header-design>` and the :ref:`footer design
+   <website/header_footer/footer-design>`. Make sure only the contact form remains on the page.
+#. **Generate an embeddable code:** Copy the URL of the Odoo form page and paste it into an iframe
+   generator, such as `La Digitale.dev <https://ladigitale.dev/digitools/generateur-iframe>`_ or
+   `iFrame Generator <https://www.iframe-generator.com/>`_ . Adjust the width and height for proper
+   display.
+#. **Add the embedded code to the non-Odoo website:** Open the relevant page’s HTML (in the code
+   editor or CMS) and insert the embedded code where the form should be displayed.
+
+.. example::
+   Example of an embedded code:
+
+   .. code-block:: html
+
+       <iframe src="https://example.com/odoo-form"
+               style="border:0;"
+               name="odooForm"
+               scrolling="no"
+               frameborder="0"
+               marginheight="0"
+               marginwidth="0"
+               height="400px"
+               width="600px"
+               allowfullscreen>
+        </iframe>
+
+
 .. _website/building_blocks/embed_code:
 
 Embed code