formulário de inscrição para newsletter

Abrir no Editor Video Publique Seu Código

Recomendado

18 July 2025

Painel de administração do AdminHub

1 January 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsletter Signup</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
        }

.container {
            width: 100%;
            max-width: 450px;
        }

.card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 40px;
            text-align: center;
        }

.logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: #6b46c1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 24px;
        }

h1 {
            color: #333;
            margin-bottom: 12px;
            font-size: 24px;
        }

.subheading {
            color: #666;
            margin-bottom: 32px;
            font-size: 16px;
            line-height: 1.5;
        }

.social-signup {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
        }

.social-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: white;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.social-btn:hover {
            background: #f7fafc;
            transform: translateY(-2px);
        }

.divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
            color: #a0aec0;
        }

.divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e2e8f0;
        }

.divider span {
            padding: 0 16px;
            font-size: 14px;
        }

.form-group {
            margin-bottom: 24px;
        }

input {
            width: 100%;
            padding: 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.2s;
        }

input:focus {
            outline: none;
            border-color: #6b46c1;
        }

.cta-button {
            width: 100%;
            padding: 16px;
            background: #6b46c1;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

.cta-button:hover {
            background: #553c9a;
            transform: translateY(-2px);
        }

.links {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 24px;
            font-size: 14px;
        }

.links a {
            color: #6b46c1;
            text-decoration: none;
        }

.links a:hover {
            text-decoration: underline;
        }

.footer {
            text-align: center;
            margin-top: 24px;
            color: #718096;
            font-size: 14px;
        }

.success-message {
            display: none;
            color: #38a169;
            margin-top: 16px;
            font-weight: 500;
        }

.error-message {
            display: none;
            color: #e53e3e;
            margin-top: 8px;
            font-size: 14px;
            text-align: left;
        }

@media (max-width: 480px) {
            .card {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="logo">M</div>
            <h1>Subscribe to Our Newsletter</h1>
            <p class="subheading">Get weekly insights, tips, and exclusive content directly to your inbox.</p>
            
            <div class="social-signup">
                <button class="social-btn">
                    <i class="fab fa-google"></i>
                </button>
                <button class="social-btn">
                    <i class="fab fa-facebook-f"></i>
                </button>
                <button class="social-btn">
                    <i class="fab fa-twitter"></i>
                </button>
            </div>
            
            <div class="divider">
                <span>or sign up with email</span>
            </div>
            
            <form id="newsletter-form">
                <div class="form-group">
                    <input type="email" id="email" placeholder="Your email address" required>
                    <div class="error-message" id="email-error">Please enter a valid email address</div>
                </div>
                
                <button type="submit" class="cta-button">Subscribe Now</button>
                <div class="success-message" id="success-message">Thanks for subscribing!</div>
            </form>
            
            <div class="links">
                <a href="#">Terms</a>
                <a href="#">Privacy</a>
                <a href="#">Help</a>
            </div>
        </div>
        
        <div class="footer">
            <p>We respect your privacy. Unsubscribe at any time.</p>
        </div>
    </div>

formulário de inscrição para newsletter

Recomendado

Ilusão de rolagem infinita

Painel de administração do AdminHub

Um código por codex

HTML

CSS

JS

Recomendado

Ilusão de rolagem infinita

Painel de administração do AdminHub

Um código por codex

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS