buildHeader($componentId); $html .= '
'; // Columna izquierda $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildContactInfoGroup($componentId); $html .= $this->buildFormLabelsGroup($componentId); $html .= '
'; // Columna derecha $html .= '
'; $html .= $this->buildIntegrationGroup($componentId); $html .= $this->buildMessagesGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
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); // ============================================= // Checkboxes de visibilidad por tipo de página // Grupo especial: _page_visibility // ============================================= $html .= '
'; $html .= '

'; $html .= ' '; $html .= ' Mostrar en tipos de pagina'; $html .= '

'; $showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true); $showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true); $showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true); $showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false); $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('contactFormVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('contactFormVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('contactFormVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('contactFormVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('contactFormVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch); $html .= '
'; $html .= '
'; // ============================================= // Reglas de exclusion avanzadas // Grupo especial: _exclusions (Plan 99.11) // ============================================= $exclusionPartial = new ExclusionFormPartial($this->renderer); $html .= $exclusionPartial->render($componentId, 'contactForm'); $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; $sectionTitle = $this->renderer->getFieldValue($componentId, 'content', 'section_title', '¿Tienes alguna pregunta?'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $sectionDescription = $this->renderer->getFieldValue($componentId, 'content', 'section_description', 'Completa el formulario y nuestro equipo te responderá en menos de 24 horas.'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $submitButtonText = $this->renderer->getFieldValue($componentId, 'content', 'submit_button_text', 'Enviar Mensaje'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $submitButtonIcon = $this->renderer->getFieldValue($componentId, 'content', 'submit_button_icon', 'bi-send-fill'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildContactInfoGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Info de Contacto'; $html .= '
'; $showContactInfo = $this->renderer->getFieldValue($componentId, 'contact_info', 'show_contact_info', true); $html .= $this->buildSwitch('contactFormShowContactInfo', 'Mostrar info contacto', 'bi-eye', $showContactInfo); $html .= '
'; $html .= '

Telefono

'; $phoneLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'phone_label', 'Teléfono'); $html .= '
'; $html .= ' '; $html .= '
'; $phoneValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'phone_value', '+52 55 1234 5678'); $html .= '
'; $html .= ' '; $html .= '
'; $html .= '

Email

'; $emailLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'email_label', 'Email'); $html .= '
'; $html .= ' '; $html .= '
'; $emailValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'email_value', 'contacto@apumexico.com'); $html .= '
'; $html .= ' '; $html .= '
'; $html .= '

Ubicacion

'; $locationLabel = $this->renderer->getFieldValue($componentId, 'contact_info', 'location_label', 'Ubicación'); $html .= '
'; $html .= ' '; $html .= '
'; $locationValue = $this->renderer->getFieldValue($componentId, 'contact_info', 'location_value', 'Ciudad de México, México'); $html .= '
'; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildFormLabelsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Labels del Formulario'; $html .= '
'; $fullnamePlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'fullname_placeholder', 'Nombre completo *'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $companyPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'company_placeholder', 'Empresa'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $whatsappPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'whatsapp_placeholder', 'WhatsApp *'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $emailPlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'email_placeholder', 'Correo electrónico *'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $messagePlaceholder = $this->renderer->getFieldValue($componentId, 'form_labels', 'message_placeholder', '¿En qué podemos ayudarte?'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildIntegrationGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Integracion Webhook'; $html .= ' Privado'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' El webhook URL nunca se expone en el frontend. Los datos se envian de forma segura desde el servidor.'; $html .= '
'; $webhookUrl = $this->renderer->getFieldValue($componentId, 'integration', 'webhook_url', ''); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $errorMessage = $this->renderer->getFieldValue($componentId, 'messages', 'error_message', 'Hubo un error al enviar el mensaje. Por favor intenta de nuevo.'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $sendingMessage = $this->renderer->getFieldValue($componentId, 'messages', 'sending_message', 'Enviando...'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $validationRequired = $this->renderer->getFieldValue($componentId, 'messages', 'validation_required', 'Este campo es obligatorio'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $validationEmail = $this->renderer->getFieldValue($componentId, 'messages', 'validation_email', 'Por favor ingresa un email válido'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; // Seccion $html .= '

Seccion

'; $html .= '
'; $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 .= '
'; // Boton $html .= '

Boton

'; $html .= '
'; $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 .= '
'; $html .= '
'; $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 .= '
'; // Mensajes $html .= '

Mensajes

'; $html .= '
'; $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 .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; $sectionPaddingY = $this->renderer->getFieldValue($componentId, 'spacing', 'section_padding_y', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $sectionMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'section_margin_top', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '0.75rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $formGap = $this->renderer->getFieldValue($componentId, 'spacing', 'form_gap', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildEffectsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '
'; $html .= '
'; $inputBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'input_border_radius', '6px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $buttonBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_radius', '6px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $buttonPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_padding', '0.75rem 2rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $textareaRows = $this->renderer->getFieldValue($componentId, 'visual_effects', 'textarea_rows', '4'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSwitch(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; $html .= '
'; 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 = '
'; $html .= sprintf( ' ', esc_html($label) ); $html .= '
'; $html .= sprintf( ' ', esc_attr($id), esc_attr($colorValue) ); $html .= sprintf( ' ', esc_attr($id), esc_attr($value) ); $html .= '
'; $html .= '
'; return $html; } private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; return $html; } }