移动端表单网页制作demo

index.html

    
    
    
    
    
    
    
    



    

        
Web前端开发技术交流博客
        

            

                
Web前端开发技术交流博客
                

                    
北京市昌平区
                    
博客：hr226
                    
[email protected]
                
            
            

                
邮件联系
                
信息发送成功！
                

                    

                        姓名
                        
                    
                    

                        公司
                        
                    
                    

                        邮件
                        
                    
                    

                        电话
                        
                    
                    

                        信息
                        
                    
                    

                        提交
                    
                
            
        
    
    
    
    
    

style.css

* {
    box-sizing: border-box;
}

body {
    background: #92bde7;
    color: #485e74;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

ul {
    list-style: none;
    padding: 0;
}

.brand {
    text-align: center;
}

.brand span {
    color: #fff;
}

.wrapper {
    box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7);
}

.wrapper>* {
    padding: 1em;
}

.company-info {
    background: #c9e6ff;
}

.company-info h3,
.company-info ul {
    text-align: center;
    margin: 0 0 1rem 0;
}


/* form */

.contact {
    background: #f9feff;
}

.contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.contact form label {
    display: block;
}

.contact form p {
    margin: 0;
}

.contact form button,
.contact form input,
.contact form textarea {
    width: 100%;
    padding: 1em;
    border: 1px solid #c9e6ff;
}

.contact form button {
    background: #c9e6ff;
    border: 0;
}

.contact form button:hover,
.contact form button:focus {
    background: #92bde7;
    color: #fff;
    outline: 0;
    transition: background-color 2s ease-out;
}

.contact form .full {
    grid-column: 1/3;
}

.alert {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    color: #fff;
    background: #79c879;
    display: none;
}


/* 大屏幕尺寸下的样式 */

@media(min-width:700px) {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
    .wrapper>* {
        padding: 2em;
    }
    .company-info h3,
    .company-info ul,
    .brand {
        text-align: left;
    }
}

main.js

// 初始化firebase对象
var firebaseConfig = {
    apiKey: "AIzaSyCm3OWWSvoYR8cvtRrXdmOk7A78pGHe128",
    authDomain: "contactform-63c92.firebaseapp.com",
    databaseURL: "https://contactform-63c92.firebaseio.com",
    projectId: "contactform-63c92",
    storageBucket: "",
    messagingSenderId: "318791736483",
    appId: "1:318791736483:web:d038d5377f405e84c9f316"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// 创建一个collection
var messageRef = firebase.database().ref('message');

// 1-17行代码涉及到firebase，此处不详解，若有需要联系博主QQ：2108123704

// 添加submit事件
document.getElementById("contactForm").addEventListener("submit", submitForm);

function submitForm(e) {
    e.preventDefault();
    // console.log(123);

    // 获取input中的值
    var name = getInputVal('name');
    var company = getInputVal('company');
    var email = getInputVal('email');
    var phone = getInputVal('phone');
    var message = getInputVal('message');
    // console.log(name);

    // 存储数据
    saveMessage(name, company, email, phone, message);

    // 展示alert
    document.querySelector('.alert').style.display = 'block';

    // 2秒后消失alert
    setTimeout(function() {
        document.querySelector('.alert').style.display = 'none';
    }, 2000);

    // 清除表单
    document.getElementById('contactForm').reset();
}

function getInputVal(id) {
    return document.getElementById(id).value;
}

function saveMessage(name, company, email, phone, message) {
    messageRef.push({
        name: name,
        company: company,
        email: email,
        phone: phone,
        message: message
    });
}