Templates

Bei den Vorlagen für die Generierung der Lead-Formulare (Rahmen und Elemente) handelt es sich um reguläre PHP-Dateien im Unterordner templates des Plugin-Verzeichnisses:

/pfad/zur/wp-installation/wp-content/plugins/immonex-lead-generator
╷
├── /templates
│   ╷
│   ├── element_card_select.php ← Element Auswahlkarten
│   ├── element_contact_data.php ← Element Kontaktdatenformular
│   ├── element_dropdown_select.php ← Element Dropdown-Auswahlbox
│   ├── element_flex.php ← Element Flexible Eingaben/Auswahl
│   ├── element_google_location_selection.php ← Element Google-Map-Standortauswahl (VERALTET)
│   ├── element_location.php ← Element Standort-Auswahl/Eingabe
│   ├── element_single_input_field.php ← Element Einzelnes Eingabefeld
│   ├── element_value_slider.php ← Element Wertebereich-Slider
│   ├── main_wrap.php ← Rahmen (Containerelement für Formulare)
│   ├── property_type_form.php ← Objekttyp-Formular (Rahmen für Elemente)
│   └── property_type_selection.php ← Objekttyp-Auswahl
…

Die Templates der Formularelemente (element_...) enthalten – neben dem Elementnamen und Pflichtfeldern – sowohl Angaben zur Konfiguration via Formulareditor als auch den Code für die eigentliche Ausgabe im Frontend.

Die Konfigurationsdaten sind auf folgende Arrays aufgeteilt:

* Der obligatorische Parameter scope enthält hier einen der folgenden Werte:

• admin → nur für das Backend relevant, keine Übersetzung nötig
• frontend → später per Formulargenerator erfasster Wert wird im Frontend angezeigt und soll übersetzbar sein

Individuelle Anpassung

Analog zu den Frontend-Themes können auch eigene Varianten der PHP-Templates im Child-Theme-Ordner unter …

/pfad/zur/wp-installation/wp-content/themes/[CHILD-THEME-NAME]/immonex-lead-generator

… hinterlegt werden, die anstelle der gleichnamigen Original-Templates eingebunden werden.

Custom Templates

Auch zusätzliche, benutzerdefinierte Templates können über den o. g. Ordner ergänzt werden, deren Dateiname ebenfalls mit element_ beginnen muss.

?> Mit Flex-Elementen können beliebige Eingabefelder und Auswahlboxen in einer Formularseite kombiniert werden. Hierfür ist kein Custom Template erforderlich!

Beispiel

Der Code eines einfachen Element-Templates namens "Foobar", mit dem eine Dropdown-Auswahlliste mit frei definierbaren Optionen (Formulareditor) eingefügt werden kann:

<?php
$info = [
    'title'                               => 'Foobar',
    'required_by_default'                 => false,
    'required_user_input_fields'          => [],
    'optional_required_user_input_fields' => [],
];
$config = [
    'internal_field_label' => [
        'type'          => 'text',
        'scope'         => 'admin',
        'required'      => true,
        'label'         => 'Interne Feldbezeichnung',
        'instructions'  => 'Die Bezeichnung wird bei der Ausgabe der zugehörigen Angabe (Wert/Auswahl) in den Backend-Lead-Formularen sowie in Benachrichtigungsmails übernommen.',
        'default_value' => 'Foobar',
    ],
    'required' => [
        'type'     => 'true_false',
        'scope'    => 'admin',
        'required' => false,
        'label'    => 'Pflichtangabe?'
    ],
    'element_title' => [
        'type'         => 'text',
        'scope'        => 'frontend',
        'required'     => true,
        'label'        => 'Formularelement-Titel',
        'instructions' => 'Diese Bezeichnung wird in der Formularschritt-Übersicht am unteren Rand jeder Formularseite angezeigt.',
    ],
    'headline' => [
        'type'     => 'text',
        'scope'    => 'frontend',
        'required' => true,
        'label'    => 'Überschrift',
    ],
    'foo' => [
        'type'         => 'text_array',
        'scope'        => 'frontend',
        'label'        => 'Optionen',
        'instructions' => 'Auswahloptionen',
    ],
];
if ( ! empty( $template_data ) ) :
    $field_id              = 'immonex_lead_gen_field_' . $template_data['element_number'] . '_foobar';
    $is_required           = ! empty( $template_data['config_admin']['required'] );
    $additional_attributes = $template_data['plugin']->template_utils->get_attr_from_template_var(
        $template_data,
        [
            'config_admin',
            'internal_field_label',
        ],
        'data-internal-field-label'
    );
    ?>
    <div class="immonex-lead-gen-element--intro">
        <?php if ( ! empty( $template_data['config_frontend']['headline'] ) ) : ?>
        <h3 class="immonex-lead-gen-element--headline"><?php echo $template_data['config_frontend']['headline']; ?></h3>
        <?php endif; ?>
    </div>
    <?php if ( ! empty( $template_data['config_frontend']['foo'] ) > 0 ) : ?>
    <div class="immonex-lead-gen-element--dropdown-select<?php if ( $is_required ) echo ' is-required'; ?>">
        <el-select
            v-model="dropdown"
            placeholder="Bitte auswählen...<?php if ( $is_required ) echo ' *'; ?>"
            v-on:change="transferValue( '<?php echo $field_id; ?>', $event )"
            <?php if ( $is_required ) : ?>
            @input="updateSlideNav"
            <?php endif; ?>
        >
        <?php foreach ( $template_data['config_frontend']['foo'] as $i => $item ) : ?>
        <el-option label="<?php echo $item['title']; ?>" value="<?php echo $item['title']; ?>"></el-option>
        <?php endforeach; ?>
        </el-select>
        <?php if ( $is_required ) : ?>
        <div class="immonex-lead-gen-field--required-field-notice">
            <span class="immonex-lead-gen-field--required">*</span> Das ist eine Pflichtangabe!
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>
    <input id="<?php echo $field_id; ?>" name="<?php echo $field_id; ?>" type="hidden" value="0"<?php echo $additional_attributes; ?>>
    <?php
endif;

Wird dieser Code unter …

/pfad/zur/wp-installation/wp-content/themes/[CHILD-THEME-NAME]/immonex-lead-generator/element_foobar.php

… gespeichert, können anschließend Elemente auf dieser Basis im Formulareditor erstellt werden:

Das Ergebnis im Frontend:

Hier geht's weiter ≫

• JavaScript-Events
• Mehrsprachigkeit & Übersetzungen