Cafenapp: Thay đổi vị trí Contact Form

Khi bạn cần phải thay đổi vị trí của biểu mẫu liên hệ sang một trang mới bởi vì bạn không muốn nó hiện ở phía bên phải của trang. Chính xác hơn là hiện thị trên vị trí của widget. Bạn muốn nó phải riêng một mình một góc cơ. Bạn có thể theo những bước sau đây để thay đổi vị trí của nó:

1. Làm ẩn đi widget Contactform.

2. Điền đoạn code dưới vào một trang page mới.

<div class="widget ContactForm" id="ContactForm1" style="visibility: visible;">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""/>
E-mail*
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message*
<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" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form></div></div></div>

3. Thiết kế lại ContactForm

 /* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}