Bước 1: vào Blog -> Mẫu -> Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm
và chèn đoạn mã CSS sau đây ở trên ]]b:skin;. Sau đó Lưu lại là xong!/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}
.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }
.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}
.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}
.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}
.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px;
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center;
}
/* END CUSTOM CONTACT FORM BY XOMISSE */
Bước 2: Blog => Trang => Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML => Xuất bản!
<div id='ContactForm1' class='widget ContactForm'>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>Name:</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-mail: <span id="required">*</span></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Message: <span id="required">*</span></p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>
No comments:
Post a Comment