Forms

Form blocks are used to collect information from website visitors and, if applicable, create records in the database. To add a form to a website page, drag and drop the Contact & Forms categorical building block, then select a block in the pop-up window.

Aktion

By default, submitting a form sends an email containing the visitor’s submitted information. Depending on the apps installed on the database, additional actions that can automatically create records may become available. To choose a different action, click Edit, select a form field, navigate to the Style tab, and, in the Form section, select the desired Action:

By default, submitting the form redirects visitors to a Thank you page. Use the URL field to send them to a different page. Alternatively, select Nothing or Show Message in the On Success field to keep visitors on the form’s page.

You can also define the Labels Position and Labels Width, and specify whether Marked Fields are Required or Optional. Select None to indicate that no fields are marked. Additionally, define the Marker used to identify marked fields.

Siehe auch

Configure the visibility settings for forms.

Felder

To add a new field to the form, navigate to the Style tab and click the + Field button in the Form or Field header section. To edit any field on the form, select the field, then modify and format its label directly on the form and use the options available in the Field section of the Style tab. For example, you can:

  • Ändern Sie den Feld-Typ.

    Tipp

    It is also possible to select an Existing Field from the database and use the data it contains. The fields available depend on the selected action. Property fields added to the database can also be used depending on the selected action.

    Alle Arten von Formularfeldern

    Einige Felder sind optisch ähnlich, aber die eingegebenen Daten müssen einem bestimmten Format entsprechen.

  • Geben Sie an, ob das Feld erforderlich ist.

  • Enable a field Description. Toggle the switch on and click the default description on the form to modify it.

  • Use the Requirement field to add validation Conditions to ensure visitors enter valid information. For example, set the condition requiring the Email field to contain an @ symbol or matching a specific domain.

  • Fügen Sie eine Animation hinzu.

  • Edit the field’s visibility settings.

Depending on the selected field, the following options are available:

For text and string fields, such as Text, Long Text, Email, and Url, as well as numerical fields, such as Telephone, Number, and Decimal Number, you can define a Placeholder and a Default Value.

For the Long Text field, you can also specify the field’s Height.

Additionally, you can set character limits for string fields and the Telephone field. To do so, enable the Character Limit option, then set the minimum and maximum character counts using the Min Characters and Max Characters fields.

To apply the changes, click Save.

Tipp

  • Drag and drop inner content snippets inside forms to create sections, add images, set titles, and include other content elements.

  • Modify the text of the Submit button by clicking it and entering the desired text. You can also change the button’s Type, Size, Shape, and Animation in the Button section of the Style tab.

Ein Odoo-Kontaktformular auf einer Nicht-Odoo-Website hinzufügen

Sie können ein Odoo-Kontaktformular auf einer anderen Website mithilfe eines iFrames anzeigen. Gehen Sie dazu folgendermaßen vor:

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer design. Make sure only the contact form remains on the page.

  2. Einbettbaren Code generieren: Kopieren Sie die URL der Odoo-Formularseite und fügen Sie sie in einen iFrame-Generator ein, z. B. La Digitale.dev oder iFrame Generator. Passen Sie Breite und Höhe für die richtige Anzeige an.

  3. 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

Beispiel eines eingebetteten Codes:

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