cf-style.php

<?php
/**
 * Plugin Name: CF7 Visual Styler
 * Description: Adds visual themes and styles to Contact Form 7.
 * Version: 1.0.0
 * Author: Hasin Hayder
 * Text Domain: cf7-visual-styler
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class CF7_Visual_Styler {

	private static $instance = null;

	public static function get_instance() {
		if ( null === self::$instance ) {
			self::$instance = new self();
		}
		return self::$instance;
	}

	private function __construct() {
		add_action( 'admin_menu', array( $this, 'add_admin_menu' ), 20 );
		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_frontend_styles' ) );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );
		add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), array( $this, 'add_settings_link' ) );
	}

	/**
	 * Enqueue admin assets
	 */
	public function enqueue_admin_assets( $hook ) {
		if ( 'contact_page_cf7-styler' !== $hook ) {
			return;
		}
		wp_enqueue_style( 'cf7-styler-admin', plugin_dir_url( __FILE__ ) . 'assets/css/admin.css', array(), '1.0.0' );
	}

	/**
	 * Add settings link to plugins page
	 */
	public function add_settings_link( $links ) {
		$settings_link = '<a href="admin.php?page=cf7-styler">' . __( 'Settings', 'cf7-visual-styler' ) . '</a>';
		array_unshift( $links, $settings_link );
		return $links;
	}

	/**
	 * Add admin menu under Contact Form 7
	 */
	public function add_admin_menu() {
		add_submenu_page(
			'wpcf7',
			__( 'Form Styles', 'cf7-visual-styler' ),
			__( 'Form Styles', 'cf7-visual-styler' ),
			'wpcf7_edit_contact_forms',
			'cf7-styler',
			array( $this, 'render_admin_page' )
		);
	}

	/**
	 * Register plugin settings
	 */
	public function register_settings() {
		register_setting( 'cf7_styler_settings', 'cf7_styler_theme' );
	}

	/**
	 * Render the admin settings page
	 */
	public function render_admin_page() {
		$current_theme = get_option( 'cf7_styler_theme', 'default' );
		$themes = array(
			'default' => array(
				'label' => __( 'Default (None)', 'cf7-visual-styler' ),
				'desc'  => __( 'No extra styling, uses your theme defaults.', 'cf7-visual-styler' ),
			),
			'modern' => array(
				'label' => __( 'Modern Blue', 'cf7-visual-styler' ),
				'desc'  => __( 'Clean, professional design with blue accents.', 'cf7-visual-styler' ),
			),
			'dark' => array(
				'label' => __( 'Dark Elegance', 'cf7-visual-styler' ),
				'desc'  => __( 'Sophisticated dark mode for high contrast.', 'cf7-visual-styler' ),
			),
			'minimal' => array(
				'label' => __( 'Minimalist Gray', 'cf7-visual-styler' ),
				'desc'  => __( 'Elegant underline inputs and serif fonts.', 'cf7-visual-styler' ),
			),
			'glassmorphism' => array(
				'label' => __( 'Glassmorphism', 'cf7-visual-styler' ),
				'desc'  => __( 'Translucent glass effect with soft blur.', 'cf7-visual-styler' ),
			),
			'neo-brutalism' => array(
				'label' => __( 'Neo-Brutalism', 'cf7-visual-styler' ),
				'desc'  => __( 'Bold colors and thick black borders.', 'cf7-visual-styler' ),
			),
			'soft-pastel' => array(
				'label' => __( 'Soft Pastel', 'cf7-visual-styler' ),
				'desc'  => __( 'Gentle colors and playful rounded corners.', 'cf7-visual-styler' ),
			),
		);
		?>
		<div class="cf7-styler-admin-wrap">
			<div class="cf7-styler-header">
				<h1><?php _e( 'CF7 Visual Styler', 'cf7-visual-styler' ); ?></h1>
				<p><?php _e( 'Choose a professional theme to instantly transform your contact forms.', 'cf7-visual-styler' ); ?></p>
			</div>

			<form method="post" action="options.php">
				<?php
				settings_fields( 'cf7_styler_settings' );
				?>
				<div class="cf7-styler-grid">
					<?php foreach ( $themes as $value => $data ) : 
						$is_active = ( $current_theme === $value );
						?>
						<label class="cf7-styler-card theme-<?php echo esc_attr( $value ); ?> <?php echo $is_active ? 'active' : ''; ?>">
							<input type="radio" name="cf7_styler_theme" value="<?php echo esc_attr( $value ); ?>" <?php checked( $current_theme, $value ); ?>>
							<div class="cf7-styler-card-preview">
								<span class="active-badge"><?php _e( 'Active', 'cf7-visual-styler' ); ?></span>
							</div>
							<div class="cf7-styler-card-info">
								<span class="cf7-styler-card-title"><?php echo esc_html( $data['label'] ); ?></span>
								<span class="cf7-styler-card-desc"><?php echo esc_html( $data['desc'] ); ?></span>
							</div>
						</label>
					<?php endforeach; ?>
				</div>

				<div class="cf7-styler-footer">
					<p class="description"><?php _e( 'Click on a card to select a theme, then save your changes.', 'cf7-visual-styler' ); ?></p>
					<?php submit_button( __( 'Save Changes', 'cf7-visual-styler' ), 'primary', 'submit', false ); ?>
				</div>
			</form>
		</div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				const cards = document.querySelectorAll('.cf7-styler-card');
				cards.forEach(card => {
					card.addEventListener('click', function() {
						cards.forEach(c => c.classList.remove('active'));
						this.classList.add('active');
						this.querySelector('input').checked = true;
					});
				});
			});
		</script>
		<?php
	}

	/**
	 * Enqueue frontend styles based on selected theme
	 */
	public function enqueue_frontend_styles() {
		$theme = get_option( 'cf7_styler_theme', 'default' );

		if ( 'default' === $theme ) {
			return;
		}

		$theme_url = plugin_dir_url( __FILE__ ) . 'assets/css/' . $theme . '.css';
		$theme_path = plugin_dir_path( __FILE__ ) . 'assets/css/' . $theme . '.css';

		if ( file_exists( $theme_path ) ) {
			wp_enqueue_style( 'cf7-styler-' . $theme, $theme_url, array(), '1.0.0' );
		}
	}
}

// Initialize the plugin
CF7_Visual_Styler::get_instance();