kompass/settings/views/mail-settings.php

<form action="<?php echo esc_url(admin_url('options-general.php?page=kompass-mail-settings')); ?>" method="post">
    <input type="hidden" name="save" value="1">
    <h2>E-Mail Einstellungen</h2>
    <table>
        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP zum senden Verwenden</td>
            <td>
        <div class="switch-container">
            <input name="use_smtp" <?php if (false !== (bool)get_option( 'kompass_use_smtp', false )) echo ' checked ';?> type="checkbox" id="use_smtp" class="switch">
            <label for="use_smtp" class="switch-label">
                <span class="switch-inner" data-on="ON" data-off="OFF"></span>
                <span class="switch-switch"></span>
            </label>
        </div>
            </td>
        </tr>
    </table>

    <table id="smtp_settings" <?php if (false === (bool)get_option( 'kompass_use_smtp', false )) echo ' style="display: none;" ';?>>
        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP-Host</td>
            <td>
                <input style="width: 500px;" type="text" name="smtp-host" value="<?php echo esc_html(get_option('kompass_smtp_host', '')); ?>" /> :
                <input style="width: 50px;" type="text" name="smtp-port" value="<?php echo esc_html(get_option('kompass_smtp_port', '25')); ?>" />
            </td>
        </tr>

        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP-User</td>
            <td>
                <input style="width: 562px;" type="text" name="smtp-user" value="<?php echo esc_html(get_option('kompass_smtp_user', '')); ?>" />
            </td>
        </tr>

        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP-Passwort</td>
            <td>
                <input style="width: 562px;" type="text" name="smtp-pass" value="<?php echo esc_html(get_option('kompass_smtp_pass', '')); ?>" />
            </td>
        </tr>

        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP-Sender email</td>
            <td>
                <input style="width: 562px;" type="text" name="smtp-sender" value="<?php echo esc_html(get_option('kompass_smtp_sender', '')); ?>" />
            </td>
        </tr>

        <tr>
            <td style="font-weight: bold; padding: 10px;">SMTP-Sender name</td>
            <td>
                <input style="width: 562px;" type="text" name="smtp-sender-name" value="<?php echo esc_html(get_option('kompass_smtp_sender-name', '')); ?>" />
            </td>
        </tr>
    </table>
<br /><br />
    <input type="submit" class="button-primary" value="Speichern">
</form>
<style>
    .switch-container {
        position: relative;
        padding: 0;
    }

    .switch {
        visibility: hidden; /* Checkbox unsichtbar machen */
    }

    .switch-label {
        display: block;
        width: 70px;
        height: 34px;
        background-color: #ccc;
        border-radius: 34px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .switch-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 12px;
        color: white;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    }

    .switch-inner::before,
    .switch-inner::after {
        content: attr(data-off);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .switch-inner::after {
        content: attr(data-on);
        right: 10px;
        opacity: 0;
    }

    .switch-switch {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 28px;
        height: 28px;
        background-color: #fff;
        border-radius: 50%;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .switch:checked + .switch-label {
        background-color: #4CAF50;
    }

    .switch:checked + .switch-label .switch-inner::before {
        opacity: 0;
    }

    .switch:checked + .switch-label .switch-inner::after {
        opacity: 1;
    }

    .switch:checked + .switch-label .switch-switch {
        transform: translateX(36px);
    }
</style>

<script>
    // script.js
    document.getElementById('use_smtp').addEventListener('change', function() {
        if (this.checked) {
            document.getElementById('smtp_settings').style.display='block';
        } else {
            document.getElementById('smtp_settings').style.display='none';
        }
    });

</script>