Cài đặt Contact Form trên Static Pages

Installing the Contact Form On Static Pages

• DEMO

Cài đặt Contact Form trên Static Pages

Bước 1. Đầu tiên bạn cần thêm widget Contact Form. Vào Bố cục >> Thêm tiện ích >> Tiện ích khác >> Biểu mẫu liên hệ

Bước 2. Thêm Font Awesome, thêm đoạn code sau trước thẻ </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> 

Bước 3. Tiếp theo vào Mẫu >> Chỉnh sửa HTML, thêm đoạn code sau trước thẻ </style> hoặc ]]></b:skin>

 #ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
} 

Lưu template của bạn lại.

Bước 4. Vào Trang >> Trang mới copy dòng code dưới đây vào

 <form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Name</span><br/>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br/>

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Email Address <span style="color: red; font-weight: bolder;">*</span></span> <br/>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br/>

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Your Message <span style="color: red; font-weight: bolder;">*</span></span><br/>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br/>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form> 

Chúc bạn thành công!

Created by kangismet/Edited by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm