Φόρμα επικοινωνίας της Google (html)

Αν ψάχνετε κάποια σελίδα που να σας παρέχει μια φόρμα επικοινωνίας για το site/ blog σας εδώ υπάρχει μια καλή λύση. Αν και μίνιμαλ και χωρίς πολλές δυνατότητες παραμετροποίησης καλύπτει την δυνατότητα επικοινωνίας των επισκεπτών της σελίδας σας με εσάς.

Σε αυτό λοιπόν το πολύ σύντομο άρθρο σας παραθέτουμε τον κώδικα (html) για την φόρμα Μη δοκιμάσετε να παραμετροποιήσετε τον κώδικα ακόμη και αν γνωρίζετε html. Αντιθέτως με ευκολία και χωρίς να επηρεάζεται η λειτουργικότητα της φόρμας μπορείτε να αλλάξετε τις φράσεις που είναι μαρκαρισμένες με κίτρινο χρώμα και το "Send" που είναι γραμμένο με μπλέ γράμματα.

1. Πρώτα πρέπει να προσθέσετε την φόρμα επικοινωνίας που βρίσκετε στα έτοιμα html/widgets του blogger στην συνέχεια κάνετε ένα Edit στον κώδικα του blog τοποθετώντας πρίν το ]]></b:skin>  (βρές το Ctrl + F) τον παρακάτω κώδικα ώστε να μην εμφανίζεται η φόρμα στην αρχική μας:

 #ContactForm1
{
display: none ! important;
}

2. Τώρα μπορείτε να κάνετε επικόλληση τον παρακάτω κώδικα σε κάποια σελίδα που έχετε δημιουργήσει ώστε να μπορούν οι επισκέπτες να επικοινωνήσουν μαζί σας.

form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; 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>


Πηγή κώδικα: www.problogtricks.com


# Το έψαξα για το B4Share επειδή βαριέμαι (πάλι) να κάνω λογαριασμό σε σελίδες τρίτων για μια φόρμα επικοινωνίας το βρήκα και το κοινοποίησα μήπως το χρειαστεί και κάποιος άλλος. Αν αντιμετωπίσετε κάποιο πρόβλημα με την ενσωμάτωση της φόρμας αφήστε σχόλιο παρακάτω.