4c807e1cf2
Cambios incluidos: - Actualización de copy/textos en 7 schemas JSON - Mejoras en AdminAjaxHandler con mapeos adicionales - Refactorización de FormBuilders y Renderers - Correcciones en dashboard admin JS - Nuevo ContactFormRenderer funcional NOTA: Este commit sirve como respaldo antes de corregir inconsistencias de case en namespaces (API→Api, WordPress→Wordpress) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
602 lines
33 KiB
PHP
602 lines
33 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Admin\ContactForm\Infrastructure\Ui;
|
|
|
|
use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
|
|
|
|
/**
|
|
* FormBuilder para Contact Form
|
|
*
|
|
* RESPONSABILIDAD: Generar formulario de configuracion del Contact Form
|
|
*
|
|
* SEGURIDAD: El webhook_url se muestra como input type="password" para evitar
|
|
* que sea visible accidentalmente en pantalla compartida.
|
|
*
|
|
* @package ROITheme\Admin\ContactForm\Infrastructure\Ui
|
|
*/
|
|
final class ContactFormFormBuilder
|
|
{
|
|
public function __construct(
|
|
private AdminDashboardRenderer $renderer
|
|
) {}
|
|
|
|
public function buildForm(string $componentId): string
|
|
{
|
|
$html = '';
|
|
|
|
$html .= $this->buildHeader($componentId);
|
|
|
|
$html .= '<div class="row g-3">';
|
|
|
|
// Columna izquierda
|
|
$html .= '<div class="col-lg-6">';
|
|
$html .= $this->buildVisibilityGroup($componentId);
|
|
$html .= $this->buildContentGroup($componentId);
|
|
$html .= $this->buildContactInfoGroup($componentId);
|
|
$html .= $this->buildFormLabelsGroup($componentId);
|
|
$html .= '</div>';
|
|
|
|
// Columna derecha
|
|
$html .= '<div class="col-lg-6">';
|
|
$html .= $this->buildIntegrationGroup($componentId);
|
|
$html .= $this->buildMessagesGroup($componentId);
|
|
$html .= $this->buildColorsGroup($componentId);
|
|
$html .= $this->buildSpacingGroup($componentId);
|
|
$html .= $this->buildEffectsGroup($componentId);
|
|
$html .= '</div>';
|
|
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildHeader(string $componentId): string
|
|
{
|
|
$html = '<div class="rounded p-4 mb-4 shadow text-white" ';
|
|
$html .= 'style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">';
|
|
$html .= ' <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">';
|
|
$html .= ' <div>';
|
|
$html .= ' <h3 class="h4 mb-1 fw-bold">';
|
|
$html .= ' <i class="bi bi-envelope-paper me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Configuracion de Formulario de Contacto';
|
|
$html .= ' </h3>';
|
|
$html .= ' <p class="mb-0 small" style="opacity: 0.85;">';
|
|
$html .= ' Seccion de contacto antes del footer con envio a webhook';
|
|
$html .= ' </p>';
|
|
$html .= ' </div>';
|
|
$html .= ' <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="contact-form">';
|
|
$html .= ' <i class="bi bi-arrow-counterclockwise me-1"></i>';
|
|
$html .= ' Restaurar valores por defecto';
|
|
$html .= ' </button>';
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildVisibilityGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Visibilidad';
|
|
$html .= ' </h5>';
|
|
|
|
$enabled = $this->renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
|
|
$html .= $this->buildSwitch('contactFormEnabled', 'Activar componente', 'bi-power', $enabled);
|
|
|
|
$showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
|
|
$html .= $this->buildSwitch('contactFormShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop);
|
|
|
|
$showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true);
|
|
$html .= $this->buildSwitch('contactFormShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile);
|
|
|
|
$showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'all');
|
|
$html .= ' <div class="mb-0 mt-3">';
|
|
$html .= ' <label for="contactFormShowOnPages" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-file-earmark-text me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Mostrar en';
|
|
$html .= ' </label>';
|
|
$html .= ' <select id="contactFormShowOnPages" class="form-select form-select-sm">';
|
|
$html .= ' <option value="all"' . ($showOnPages === 'all' ? ' selected' : '') . '>Todos</option>';
|
|
$html .= ' <option value="posts"' . ($showOnPages === 'posts' ? ' selected' : '') . '>Solo posts</option>';
|
|
$html .= ' <option value="pages"' . ($showOnPages === 'pages' ? ' selected' : '') . '>Solo paginas</option>';
|
|
$html .= ' </select>';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildContentGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-card-text me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Contenido';
|
|
$html .= ' </h5>';
|
|
|
|
$sectionTitle = $this->renderer->getFieldValue($componentId, 'content', 'section_title', '¿Tienes alguna pregunta?');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormSectionTitle" class="form-label small mb-1 fw-semibold">Titulo de seccion</label>';
|
|
$html .= ' <input type="text" id="contactFormSectionTitle" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($sectionTitle) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$sectionDescription = $this->renderer->getFieldValue($componentId, 'content', 'section_description', 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormSectionDescription" class="form-label small mb-1 fw-semibold">Descripcion</label>';
|
|
$html .= ' <textarea id="contactFormSectionDescription" class="form-control form-control-sm" rows="2">';
|
|
$html .= esc_textarea($sectionDescription);
|
|
$html .= '</textarea>';
|
|
$html .= ' </div>';
|
|
|
|
$submitButtonText = $this->renderer->getFieldValue($componentId, 'content', 'submit_button_text', 'Enviar Mensaje');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormSubmitButtonText" class="form-label small mb-1 fw-semibold">Texto boton enviar</label>';
|
|
$html .= ' <input type="text" id="contactFormSubmitButtonText" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($submitButtonText) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$submitButtonIcon = $this->renderer->getFieldValue($componentId, 'content', 'submit_button_icon', 'bi-send-fill');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="contactFormSubmitButtonIcon" class="form-label small mb-1 fw-semibold">Icono boton (Bootstrap Icons)</label>';
|
|
$html .= ' <input type="text" id="contactFormSubmitButtonIcon" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($submitButtonIcon) . '" placeholder="bi-send-fill">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildContactInfoGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-person-lines-fill me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Info de Contacto';
|
|
$html .= ' </h5>';
|
|
|
|
$showContactInfo = $this->renderer->getFieldValue($componentId, 'contact_info', 'show_contact_info', true);
|
|
$html .= $this->buildSwitch('contactFormShowContactInfo', 'Mostrar info contacto', 'bi-eye', $showContactInfo);
|
|
|
|
$html .= ' <hr class="my-3">';
|
|
$html .= ' <p class="small fw-semibold mb-2">Telefono</p>';
|
|
|
|
$phoneLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'phone_label', 'Teléfono');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <input type="text" id="contactFormPhoneLabel" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($phoneLabel) . '" placeholder="Label">';
|
|
$html .= ' </div>';
|
|
|
|
$phoneValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'phone_value', '+52 55 1234 5678');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <input type="text" id="contactFormPhoneValue" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($phoneValue) . '" placeholder="Numero">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' <p class="small fw-semibold mb-2">Email</p>';
|
|
|
|
$emailLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'email_label', 'Email');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <input type="text" id="contactFormEmailLabel" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($emailLabel) . '" placeholder="Label">';
|
|
$html .= ' </div>';
|
|
|
|
$emailValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'email_value', 'contacto@apumexico.com');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <input type="email" id="contactFormEmailValue" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($emailValue) . '" placeholder="Direccion">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' <p class="small fw-semibold mb-2">Ubicacion</p>';
|
|
|
|
$locationLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'location_label', 'Ubicación');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <input type="text" id="contactFormLocationLabel" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($locationLabel) . '" placeholder="Label">';
|
|
$html .= ' </div>';
|
|
|
|
$locationValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'location_value', 'Ciudad de México, México');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <input type="text" id="contactFormLocationValue" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($locationValue) . '" placeholder="Direccion">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildFormLabelsGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-input-cursor-text me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Labels del Formulario';
|
|
$html .= ' </h5>';
|
|
|
|
$fullnamePlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'fullname_placeholder', 'Nombre completo *');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="contactFormFullnamePlaceholder" class="form-label small mb-1 fw-semibold">Placeholder nombre</label>';
|
|
$html .= ' <input type="text" id="contactFormFullnamePlaceholder" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($fullnamePlaceholder) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$companyPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'company_placeholder', 'Empresa');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="contactFormCompanyPlaceholder" class="form-label small mb-1 fw-semibold">Placeholder empresa</label>';
|
|
$html .= ' <input type="text" id="contactFormCompanyPlaceholder" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($companyPlaceholder) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$whatsappPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'whatsapp_placeholder', 'WhatsApp *');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="contactFormWhatsappPlaceholder" class="form-label small mb-1 fw-semibold">Placeholder WhatsApp</label>';
|
|
$html .= ' <input type="text" id="contactFormWhatsappPlaceholder" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($whatsappPlaceholder) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$emailPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'email_placeholder', 'Correo electrónico *');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="contactFormEmailPlaceholder" class="form-label small mb-1 fw-semibold">Placeholder email</label>';
|
|
$html .= ' <input type="text" id="contactFormEmailPlaceholder" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($emailPlaceholder) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$messagePlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'message_placeholder', '¿En qué podemos ayudarte?');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="contactFormMessagePlaceholder" class="form-label small mb-1 fw-semibold">Placeholder mensaje</label>';
|
|
$html .= ' <input type="text" id="contactFormMessagePlaceholder" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($messagePlaceholder) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildIntegrationGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #FF8600;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-link-45deg me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Integracion Webhook';
|
|
$html .= ' <span class="badge bg-warning text-dark ms-2">Privado</span>';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="alert alert-info py-2 small mb-3">';
|
|
$html .= ' <i class="bi bi-shield-lock me-1"></i>';
|
|
$html .= ' El webhook URL nunca se expone en el frontend. Los datos se envian de forma segura desde el servidor.';
|
|
$html .= ' </div>';
|
|
|
|
$webhookUrl = $this->renderer->getFieldValue($componentId, 'integration', 'webhook_url', '');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormWebhookUrl" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-link me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' URL del Webhook';
|
|
$html .= ' </label>';
|
|
$html .= ' <textarea id="contactFormWebhookUrl" class="form-control form-control-sm" rows="2" ';
|
|
$html .= ' placeholder="https://tu-webhook.com/endpoint">';
|
|
$html .= esc_textarea($webhookUrl);
|
|
$html .= '</textarea>';
|
|
$html .= ' <small class="text-muted">Deja vacio si no deseas enviar a un webhook externo.</small>';
|
|
$html .= ' </div>';
|
|
|
|
$webhookMethod = $this->renderer->getFieldValue($componentId, 'integration', 'webhook_method', 'POST');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormWebhookMethod" class="form-label small mb-1 fw-semibold">Metodo HTTP</label>';
|
|
$html .= ' <select id="contactFormWebhookMethod" class="form-select form-select-sm">';
|
|
$html .= ' <option value="POST"' . ($webhookMethod === 'POST' ? ' selected' : '') . '>POST</option>';
|
|
$html .= ' <option value="GET"' . ($webhookMethod === 'GET' ? ' selected' : '') . '>GET</option>';
|
|
$html .= ' </select>';
|
|
$html .= ' </div>';
|
|
|
|
$includePageUrl = $this->renderer->getFieldValue($componentId, 'integration', 'include_page_url', true);
|
|
$html .= $this->buildSwitch('contactFormIncludePageUrl', 'Incluir URL de pagina', 'bi-link', $includePageUrl);
|
|
|
|
$includeTimestamp = $this->renderer->getFieldValue($componentId, 'integration', 'include_timestamp', true);
|
|
$html .= $this->buildSwitch('contactFormIncludeTimestamp', 'Incluir timestamp', 'bi-clock', $includeTimestamp);
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildMessagesGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-chat-quote me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Mensajes';
|
|
$html .= ' </h5>';
|
|
|
|
$successMessage = $this->renderer->getFieldValue($componentId, 'messages', 'success_message', '¡Gracias por contactarnos! Te responderemos pronto.');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormSuccessMessage" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-check-circle me-1 text-success"></i>';
|
|
$html .= ' Mensaje de exito';
|
|
$html .= ' </label>';
|
|
$html .= ' <textarea id="contactFormSuccessMessage" class="form-control form-control-sm" rows="2">';
|
|
$html .= esc_textarea($successMessage);
|
|
$html .= '</textarea>';
|
|
$html .= ' </div>';
|
|
|
|
$errorMessage = $this->renderer->getFieldValue($componentId, 'messages', 'error_message', 'Hubo un error al enviar el mensaje. Por favor intenta de nuevo.');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormErrorMessage" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-x-circle me-1 text-danger"></i>';
|
|
$html .= ' Mensaje de error';
|
|
$html .= ' </label>';
|
|
$html .= ' <textarea id="contactFormErrorMessage" class="form-control form-control-sm" rows="2">';
|
|
$html .= esc_textarea($errorMessage);
|
|
$html .= '</textarea>';
|
|
$html .= ' </div>';
|
|
|
|
$sendingMessage = $this->renderer->getFieldValue($componentId, 'messages', 'sending_message', 'Enviando...');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="contactFormSendingMessage" class="form-label small mb-1 fw-semibold">Mensaje enviando</label>';
|
|
$html .= ' <input type="text" id="contactFormSendingMessage" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($sendingMessage) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$validationRequired = $this->renderer->getFieldValue($componentId, 'messages', 'validation_required', 'Este campo es obligatorio');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="contactFormValidationRequired" class="form-label small mb-1 fw-semibold">Error campo requerido</label>';
|
|
$html .= ' <input type="text" id="contactFormValidationRequired" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($validationRequired) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$validationEmail = $this->renderer->getFieldValue($componentId, 'messages', 'validation_email', 'Por favor ingresa un email válido');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="contactFormValidationEmail" class="form-label small mb-1 fw-semibold">Error email invalido</label>';
|
|
$html .= ' <input type="text" id="contactFormValidationEmail" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($validationEmail) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildColorsGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-palette me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Colores';
|
|
$html .= ' </h5>';
|
|
|
|
// Seccion
|
|
$html .= ' <p class="small fw-semibold mb-2">Seccion</p>';
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$sectionBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'section_bg_color', 'rgba(108, 117, 125, 0.25)');
|
|
$html .= $this->buildColorPicker('contactFormSectionBgColor', 'Fondo seccion', $sectionBgColor);
|
|
|
|
$titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#212529');
|
|
$html .= $this->buildColorPicker('contactFormTitleColor', 'Color titulo', $titleColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
// Boton
|
|
$html .= ' <p class="small fw-semibold mb-2">Boton</p>';
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$buttonBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'button_bg_color', '#FF8600');
|
|
$html .= $this->buildColorPicker('contactFormButtonBgColor', 'Fondo boton', $buttonBgColor);
|
|
|
|
$buttonTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'button_text_color', '#ffffff');
|
|
$html .= $this->buildColorPicker('contactFormButtonTextColor', 'Texto boton', $buttonTextColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$buttonHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'button_hover_bg', '#e67a00');
|
|
$html .= $this->buildColorPicker('contactFormButtonHoverBg', 'Hover boton', $buttonHoverBg);
|
|
|
|
$iconColor = $this->renderer->getFieldValue($componentId, 'colors', 'icon_color', '#FF8600');
|
|
$html .= $this->buildColorPicker('contactFormIconColor', 'Iconos', $iconColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
// Mensajes
|
|
$html .= ' <p class="small fw-semibold mb-2">Mensajes</p>';
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
$successBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'success_bg_color', '#d1e7dd');
|
|
$html .= $this->buildColorPicker('contactFormSuccessBgColor', 'Fondo exito', $successBgColor);
|
|
|
|
$errorBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'error_bg_color', '#f8d7da');
|
|
$html .= $this->buildColorPicker('contactFormErrorBgColor', 'Fondo error', $errorBgColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildSpacingGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-arrows-move me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Espaciado';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$sectionPaddingY = $this->renderer->getFieldValue($componentId, 'spacing', 'section_padding_y', '3rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormSectionPaddingY" class="form-label small mb-1 fw-semibold">Padding vertical</label>';
|
|
$html .= ' <input type="text" id="contactFormSectionPaddingY" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($sectionPaddingY) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '3rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormSectionMarginTop" class="form-label small mb-1 fw-semibold">Margen superior</label>';
|
|
$html .= ' <input type="text" id="contactFormSectionMarginTop" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($sectionMarginTop) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
$titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '0.75rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormTitleMarginBottom" class="form-label small mb-1 fw-semibold">Margen titulo</label>';
|
|
$html .= ' <input type="text" id="contactFormTitleMarginBottom" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($titleMarginBottom) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$formGap = $this->renderer->getFieldValue($componentId, 'spacing', 'form_gap', '1rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormFormGap" class="form-label small mb-1 fw-semibold">Espacio campos</label>';
|
|
$html .= ' <input type="text" id="contactFormFormGap" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($formGap) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildEffectsGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-magic me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Efectos Visuales';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$inputBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'input_border_radius', '6px');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormInputBorderRadius" class="form-label small mb-1 fw-semibold">Radio inputs</label>';
|
|
$html .= ' <input type="text" id="contactFormInputBorderRadius" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($inputBorderRadius) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$buttonBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_radius', '6px');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormButtonBorderRadius" class="form-label small mb-1 fw-semibold">Radio boton</label>';
|
|
$html .= ' <input type="text" id="contactFormButtonBorderRadius" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($buttonBorderRadius) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' <div class="row g-2 mb-3">';
|
|
|
|
$buttonPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_padding', '0.75rem 2rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormButtonPadding" class="form-label small mb-1 fw-semibold">Padding boton</label>';
|
|
$html .= ' <input type="text" id="contactFormButtonPadding" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($buttonPadding) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="contactFormTransitionDuration" class="form-label small mb-1 fw-semibold">Duracion transicion</label>';
|
|
$html .= ' <input type="text" id="contactFormTransitionDuration" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($transitionDuration) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$textareaRows = $this->renderer->getFieldValue($componentId, 'visual_effects', 'textarea_rows', '4');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="contactFormTextareaRows" class="form-label small mb-1 fw-semibold">Filas textarea</label>';
|
|
$html .= ' <input type="number" id="contactFormTextareaRows" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($textareaRows) . '" min="2" max="10">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildSwitch(string $id, string $label, string $icon, mixed $checked): string
|
|
{
|
|
$checked = $checked === true || $checked === '1' || $checked === 1;
|
|
|
|
$html = ' <div class="mb-2">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= sprintf(
|
|
' <input class="form-check-input" type="checkbox" id="%s" %s>',
|
|
esc_attr($id),
|
|
$checked ? 'checked' : ''
|
|
);
|
|
$html .= sprintf(
|
|
' <label class="form-check-label small" for="%s">',
|
|
esc_attr($id)
|
|
);
|
|
$html .= sprintf(' <i class="bi %s me-1" style="color: #FF8600;"></i>', esc_attr($icon));
|
|
$html .= sprintf(' <strong>%s</strong>', esc_html($label));
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildColorPicker(string $id, string $label, string $value): string
|
|
{
|
|
// Manejar colores rgba
|
|
$colorValue = $value;
|
|
if (strpos($value, 'rgba') === 0 || strpos($value, 'rgb') === 0) {
|
|
// Para rgba usamos un color aproximado en el picker
|
|
$colorValue = '#6c757d';
|
|
}
|
|
|
|
$html = ' <div class="col-6">';
|
|
$html .= sprintf(
|
|
' <label class="form-label small fw-semibold">%s</label>',
|
|
esc_html($label)
|
|
);
|
|
$html .= ' <div class="input-group input-group-sm">';
|
|
$html .= sprintf(
|
|
' <input type="color" class="form-control form-control-color" id="%s" value="%s">',
|
|
esc_attr($id),
|
|
esc_attr($colorValue)
|
|
);
|
|
$html .= sprintf(
|
|
' <input type="text" class="form-control" id="%sText" value="%s" style="font-size: 0.75rem;">',
|
|
esc_attr($id),
|
|
esc_attr($value)
|
|
);
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
return $html;
|
|
}
|
|
}
|