Δημιουργια φορμας επικοινωνιας σε ξεχωριστη σελιδα

Ο blogger λανσαρισε τη δικη του φορμα επικοινωνιας η οποια μπαινει σα gadget στη sidebar του blog μας. Τι γινεται ομως αν εμεις θελουμε μια φορμα επικοινωνιας σε ξεχωριστη σελιδα γιατι δεν εχουμε χωρο για αλλα gadgets η για οποιοδηποτε αλλο λογο?

Πως να βαλω φορμα επικοινωνιας σε ξεχωριστη σελιδα

Πρωτα απο ολα πρεπει να βαλουμε το widget της φορμας επικοινωνιας στη sidebar μας οποτε παμε πινακα ελεγχου-διαταξη-προσθηκη gadget και διαλεγουμε τη φορμα επικοινωνιας

  Τωρα θα πρεπει να φτιαξουμε μια καινουρια σελιδα

να την ονομασουμε επικοινωνια η οπως αλλιως θελουμε να απενεργοποιησουμε τα σχολια
 στο html της μερος να επικολησουμε τον παρακατω κωδικα και αμεσως μετα παταμε δημοσιευση

<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<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>
</div>
</form>

 Τωρα θα πρεπει να παμε στο προτυπο επεξεργασια html

και απο τη μεταφορα στο γραφικο στοιχειο επιλεγουμε contact form1

σε αυτο το σημειο παταμε το βελακι για να ανοιξει ο κωδικας ολης της φορμας επικοινωνιας οπως δειχνει και η παρακατω φωτο

ανοιγουμε και το δευτερο βελακι που μας εμφανιζεται

και διαγραφουμε ολο το παρακατω κωδικο ο οποιος ειναι και μαρκαρισμενος με μπλε στη φωτο

μετα απο τη διαγραφη θα εχουμε αυτο το αποτελεσμα

αυτο ηταν και το τελευταιο βημα. Η  φορμα επικοινωνιας ειναι πλεον σε δικη της σελιδα και το gadget απο την αρχικη εχει εξαφανιστει. Δε θα πρεπει να διαγραψετε το gadget απο την διαταξη για τι θα χαθει και απο τη σελιδα.

Αν θελουμε να της δωσουμε λιγο  στυλ πρεπει να αντιγραψουμε τον παρακατω κωδικο και να τον βαλουμε στο προτυπο μας ακριβως πανω απο το ]]></b:skin>

 /* 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;
}

Το αποτελεσμα φενεται στη δικη μου φορμα επικοινωνιας. Καλη επιτυχια