Files
WP-Multi-Formular/templates/admin/page-builder.php
2026-04-13 18:52:50 +02:00

181 lines
11 KiB
PHP

<?php if(!defined('ABSPATH')) exit;
$form_id = isset($_GET['edit']) ? intval($_GET['edit']) : 0;
$form = $form_id ? get_post($form_id) : null;
$meta = wmf_get_form_meta($form_id ?: 0);
$title = $form ? $form->post_title : '';
$fields = $meta['fields'] ?? array();
$sc = $form_id ? wmf_get_shortcode($form_id) : '';
$categories = array(
'standard' => array('label'=>'Standard-Felder','icon'=>'dashicons-forms'),
'auswahl' => array('label'=>'Auswahl & Bewertung','icon'=>'dashicons-list-view'),
'layout' => array('label'=>'Layout & Inhalt','icon'=>'dashicons-layout'),
);
?>
<div class="wrap wmf-admin-wrap wmf-builder-wrap">
<h1 class="wmf-page-title">
<?php echo $form_id ? 'Formular bearbeiten' : 'Neues Formular'; ?>
<?php if($sc): ?><span class="wmf-sc-copy wmf-sc-badge"><?php echo esc_html($sc); ?></span><?php endif; ?>
<button type="button" id="wmf-preview-btn" class="page-title-action button" style="margin-left:auto;">👁 Vorschau</button>
</h1>
<!-- VORSCHAU-OVERLAY -->
<div id="wmf-preview-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;overflow-y:auto;">
<div style="max-width:700px;margin:40px auto;background:#fff;border-radius:8px;padding:32px;position:relative;">
<button id="wmf-preview-close" style="position:absolute;top:12px;right:12px;font-size:20px;background:none;border:none;cursor:pointer;">✕</button>
<h2 style="margin-top:0;">Vorschau</h2>
<div id="wmf-preview-content"><p style="color:#999;">Lade Vorschau …</p></div>
</div>
</div>
<form method="post" id="wmf-builder-form" action="<?php echo esc_url(admin_url('admin.php')); ?>">
<?php wp_nonce_field('wmf_save_form'); ?>
<input type="hidden" name="wmf_admin_action" value="save_form">
<input type="hidden" name="form_id" value="<?php echo intval($form_id); ?>">
<input type="hidden" name="wmf_form_fields" id="wmf-form-fields-json" value="<?php echo esc_attr(wp_json_encode($fields)); ?>">
<div class="wmf-form-title-row">
<input type="text" name="form_title" id="wmf-form-title" value="<?php echo esc_attr($title); ?>" placeholder="Formular-Titel …" class="wmf-title-input" required>
<button type="submit" class="button button-primary wmf-save-top">✓ Speichern</button>
</div>
<div class="wmf-builder-layout">
<!-- PALETTE (links) -->
<div class="wmf-palette" id="wmf-palette">
<div class="wmf-palette-search-wrap">
<input type="text" id="wmf-palette-search" placeholder="Feld suchen …" class="wmf-palette-search">
</div>
<?php foreach($categories as $cat_key=>$cat): ?>
<?php $cat_fields=array_filter(wmf_get_fields(),fn($f)=>$f->category===$cat_key); if(empty($cat_fields)) continue; ?>
<div class="wmf-palette-cat">
<h4 class="wmf-palette-cat-title"><span class="dashicons <?php echo esc_attr($cat['icon']); ?>"></span> <?php echo esc_html($cat['label']); ?></h4>
<?php foreach($cat_fields as $fo): ?>
<div class="wmf-palette-item" data-type="<?php echo esc_attr($fo->type); ?>" data-label="<?php echo esc_attr($fo->label); ?>" draggable="true">
<span class="dashicons <?php echo esc_attr($fo->icon); ?>"></span>
<span><?php echo esc_html($fo->label); ?></span>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<!-- CANVAS (mitte) -->
<div class="wmf-canvas-col">
<div class="wmf-canvas" id="wmf-canvas" data-fields="<?php echo esc_attr(wp_json_encode($fields)); ?>">
<div id="wmf-canvas-empty" class="wmf-canvas-empty <?php echo !empty($fields)?'wmf-hidden':''; ?>">
<span class="dashicons dashicons-plus-alt2" style="font-size:48px;width:48px;height:48px;margin-bottom:12px;color:#c3c4c7;"></span>
<p>Felder aus der linken Palette hierher ziehen oder anklicken</p>
</div>
<div id="wmf-field-list" class="wmf-field-list"></div>
</div>
<div class="wmf-canvas-footer">
<button type="submit" class="button button-primary button-large">✓ Formular speichern</button>
<a href="<?php echo esc_url(admin_url('admin.php?page=wp-multi-formular')); ?>" class="button button-secondary button-large">Abbrechen</a>
</div>
</div>
<!-- SETTINGS (rechts) -->
<div class="wmf-settings-col" id="wmf-settings-col">
<!-- Feld-Einstellungen -->
<div id="wmf-field-settings-panel" class="wmf-panel" style="display:none;">
<div class="wmf-panel-head">
<span id="wmf-field-settings-title">Feld-Einstellungen</span>
<button type="button" id="wmf-field-settings-close" class="wmf-panel-close">✕</button>
</div>
<div id="wmf-field-settings-body" class="wmf-panel-body">
<p class="wmf-loading-msg">Einstellungen werden geladen …</p>
</div>
<div class="wmf-panel-foot">
<button type="button" id="wmf-delete-field-btn" class="button wmf-btn-delete" style="width:100%;">🗑 Feld löschen</button>
</div>
</div>
<!-- Formular-Einstellungen -->
<div id="wmf-form-settings-panel" class="wmf-panel">
<div class="wmf-panel-head"><span>Formular-Einstellungen</span></div>
<div class="wmf-panel-body" style="padding:0;">
<div class="wmf-tabs">
<button type="button" class="wmf-tab active" data-tab="general">Allgemein</button>
<button type="button" class="wmf-tab" data-tab="email">E-Mails</button>
<button type="button" class="wmf-tab" data-tab="steps">Schritte</button>
<button type="button" class="wmf-tab" data-tab="advanced">Erweitert</button>
</div>
<!-- TAB: Allgemein -->
<div class="wmf-tab-pane active" data-tab="general">
<div class="wmf-sg"><label>Button-Beschriftung</label>
<input type="text" name="submit_label" value="<?php echo esc_attr($meta['submit_label']); ?>" class="widefat"></div>
<div class="wmf-sg"><label>Erfolgsmeldung</label>
<textarea name="success_message" class="widefat" rows="3"><?php echo esc_textarea($meta['success_message']); ?></textarea></div>
<div class="wmf-sg"><label>Fehlermeldung</label>
<textarea name="error_message" class="widefat" rows="2"><?php echo esc_textarea($meta['error_message']); ?></textarea></div>
<div class="wmf-sg"><label><input type="checkbox" name="save_submissions" value="1" <?php checked($meta['save_submissions'],'1'); ?>> Einreichungen in DB speichern</label></div>
<div class="wmf-sg"><label><input type="checkbox" name="honeypot_enabled" value="1" <?php checked($meta['honeypot_enabled'],'1'); ?>> Honeypot Anti-Spam aktivieren</label></div>
<div class="wmf-sg"><label><input type="checkbox" name="recaptcha_enabled" value="1" <?php checked($meta['recaptcha_enabled'],'1'); ?>> reCAPTCHA aktivieren</label></div>
</div>
<!-- TAB: E-Mails -->
<div class="wmf-tab-pane" data-tab="email">
<div class="wmf-sg wmf-sg-head">Absender</div>
<div class="wmf-sg"><label>Von: Name</label><input type="text" name="from_name" value="<?php echo esc_attr($meta['from_name']); ?>" class="widefat"></div>
<div class="wmf-sg"><label>Von: E-Mail</label><input type="email" name="from_email" value="<?php echo esc_attr($meta['from_email']); ?>" class="widefat"></div>
<hr>
<div class="wmf-sg wmf-sg-head">Admin-Benachrichtigung</div>
<div class="wmf-sg"><label><input type="checkbox" name="notify_admin" value="1" <?php checked($meta['notify_admin'],'1'); ?>> Admin benachrichtigen</label></div>
<div class="wmf-sg"><label>An E-Mail</label><input type="email" name="admin_email" value="<?php echo esc_attr($meta['admin_email']); ?>" class="widefat"></div>
<div class="wmf-sg"><label>Betreff</label><input type="text" name="admin_subject" value="<?php echo esc_attr($meta['admin_subject']); ?>" class="widefat"></div>
<div class="wmf-sg"><label><input type="checkbox" name="admin_reply_to" value="1" <?php checked($meta['admin_reply_to']??'1','1'); ?>> Reply-To auf Absender setzen</label></div>
<hr>
<div class="wmf-sg wmf-sg-head">Absender-Bestätigung</div>
<div class="wmf-sg"><label><input type="checkbox" name="notify_sender" value="1" <?php checked($meta['notify_sender'],'1'); ?>> Bestätigungs-E-Mail senden</label></div>
<div class="wmf-sg"><label>Betreff</label><input type="text" name="sender_subject" value="<?php echo esc_attr($meta['sender_subject']); ?>" class="widefat"></div>
<div class="wmf-sg"><label>Nachricht</label><textarea name="sender_message" class="widefat" rows="4"><?php echo esc_textarea($meta['sender_message']); ?></textarea></div>
</div>
<!-- TAB: Schritte -->
<div class="wmf-tab-pane" data-tab="steps">
<div class="wmf-sg"><label><input type="checkbox" name="multi_step" value="1" id="wmf-multistep-toggle" <?php checked($meta['multi_step']??'0','1'); ?>> Mehrstufiges Formular aktivieren</label>
<p class="description" style="margin:4px 0 0;">Weisen Sie jedem Feld im Canvas einen Schritt zu.</p>
</div>
<div class="wmf-sg"><label><input type="checkbox" name="show_progress" value="1" <?php checked($meta['show_progress']??'1','1'); ?>> Fortschrittsleiste anzeigen</label></div>
<hr>
<div class="wmf-sg wmf-sg-head">Schritt-Bezeichnungen</div>
<div id="wmf-step-labels">
<?php
$max_step=0;
foreach($fields as $f) { $s=intval($f['step']??0); if($s>$max_step) $max_step=$s; }
for($i=0;$i<=$max_step;$i++): ?>
<div class="wmf-sg">
<label>Schritt <?php echo $i+1; ?></label>
<input type="text" name="step_labels[]" value="<?php echo esc_attr($meta['step_labels'][$i]??''); ?>" placeholder="Schritt <?php echo $i+1; ?>" class="widefat">
</div>
<?php endfor; ?>
</div>
<button type="button" class="button" id="wmf-add-step-label">+ Schritt hinzufügen</button>
</div>
<!-- TAB: Erweitert -->
<div class="wmf-tab-pane" data-tab="advanced">
<div class="wmf-sg"><label>Weiterleitungs-URL nach Absenden</label>
<input type="url" name="redirect_url" value="<?php echo esc_attr($meta['redirect_url']); ?>" class="widefat" placeholder="https://…">
<p class="description">Leer lassen für Erfolgsmeldung.</p></div>
<div class="wmf-sg"><label>CSS-Klasse</label>
<input type="text" name="css_class" value="<?php echo esc_attr($meta['css_class']); ?>" class="widefat"></div>
<?php if($sc): ?>
<div class="wmf-sg"><label>Shortcode</label>
<code class="wmf-sc-copy" style="display:block;padding:8px;background:#f6f7f7;border:1px solid #dcdcde;border-radius:3px;cursor:pointer;"><?php echo esc_html($sc); ?></code>
<p class="description">Klicken zum Kopieren</p></div>
<?php endif; ?>
</div>
</div><!-- .wmf-panel-body -->
</div><!-- #wmf-form-settings-panel -->
</div><!-- .wmf-settings-col -->
</div><!-- .wmf-builder-layout -->
</form>
</div>