Πανέμορφη φόρμα επικοινωνίας για τον Blogger

TetsiTech
3

Βάλτε στο blog σας αυτή την κομψή φόρμα επικοινωνίας έτσι ώστε να μπορεί κάποιος να σας στέλνει μήνυμα από ένα πολύ όμορφο περιβάλλον.


Σε παλιότερο άρθρο (εδώ), είδαμε ότι στον blogger πλέον μπορούμε να βάλουμε μια φόρμα επικοινωνίας και να την ομορφύνουμε με CSS. Εδώ θα βρείτε μία πολύ εντυπωσιακή έκδοση αυτής της φόρμας και μάλιστα σε δύο εκδοχές.

Βήμα 1: Προσθήκη Φόρμα Επικοινωνίας

Ξεκινάμε λοιπόν να εγκαταστήσουμε την φόρμα μας σαν ένα widget σε όποια θέση της διάταξής μας θέλουμε. Πηγαίνουμε στη [Διάταξη] , [Προσθήκη gadget] σε ένα οποιαδήποτε σημείο και στο νέο παράθυρο που θα εμφανιστεί επιλέξτε [Περισσότερα gadgets]. Κάπου εκεί θα βρείτε το [Φόρμα επικοινωνίας]. Πατήστε [Προσθήκη] και κατόπιν στην διάταξη, σύρετε το widget σας κάτω από τις [Αναρτήσεις ιστολογίου]. Πατήστε [Αποθήκευση διάταξης] και τελειώσατε.

Κάντε κλικ στις δύο παρακάτω εικόνες για να τις δείτε σε μεγέθυνση.

Βήμα 2: Δημιουργήστε μια νέα σελίδα

Δημιουργούμε λοιπόν μία νέα σελίδα με τίτλο «Επικοινωνήστε μαζί μας» και σε λειτουργία HTML, επικολλήστε τον παρακάτω κώδικα:

<div id="contact_wrap">
<h3>
Φόρμα επικοινωνίας</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Όνομα" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Μήνυμα" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Αποστολή" />
<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>
</div>

Ανάλογα τώρα με την επιλογή σας, επικολλήστε και ένα από τα παρακάτω:

Δείτε demo
<style type="text/css">
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4WADg4aBw-_jIn_2m0zZWERsyK7betOKQ_qHpS2XJz5gxJS2DF9TO4Lo3kFopuQqm_XjghPGKJuAapMd_et7vHGqFDNBmMD5OQ6rAUSv3jkAyet39c1Ilyp3kVKnx8SOcIHbJ-K7ygM/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZ160PmMAAW-FjhBlZZJqbLP6voS5zlZHrGpKPp5JG5qw_RKFxGPaGoFfaXKTDh89UrVcjrg6d4hRN6uEeIK8nkxKgzBI5sRnUiuDirUhWRONDYHetChqHUlWV6SJImR1t6V4q8cYV_Q/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9veVaxjuSmFqc15i-V1DkLtk2_AmiQn-JS9XI3pHvjg_BsNUD2fBEs6zyhyToSJMKjhNZw8NvIygCtW6TySr7tkc3tgNkT6lTfD0athubIVkF1uLkJEgElE-fS6Mz4Cgy_P-yJBd5prE/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Δείτε demo
<style type="text/css">
#ContactForm1{
display:none;
} 
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border: #600 solid 1px;
border-bottom: #420000 solid 1px;
background-color:#983738;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');
background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
}
#contact_wrap h3{
color: #fff;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #3b5931;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
background-color: #659156;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #000 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #000;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4WADg4aBw-_jIn_2m0zZWERsyK7betOKQ_qHpS2XJz5gxJS2DF9TO4Lo3kFopuQqm_XjghPGKJuAapMd_et7vHGqFDNBmMD5OQ6rAUSv3jkAyet39c1Ilyp3kVKnx8SOcIHbJ-K7ygM/s1600/user.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZ160PmMAAW-FjhBlZZJqbLP6voS5zlZHrGpKPp5JG5qw_RKFxGPaGoFfaXKTDh89UrVcjrg6d4hRN6uEeIK8nkxKgzBI5sRnUiuDirUhWRONDYHetChqHUlWV6SJImR1t6V4q8cYV_Q/s1600/pen.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipw45i5OzbLIbhinA9wIkWDkBSOt7T6nrCDq68k5Se7GdxaGR0sHnjVi6SULQRlSoHtSTX8sFQPCd7CPBmmPzYpCEdb2tvGcpz0bdnt3mLO9JIrUNc0pEEeUO-dnBFVNB5cMqEcmoe8p8/s1600/msg.png)no-repeat 10px 10px; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #659156;
border:1px solid #333;
}
#ContactForm1_contact-form-submit:hover {
background:#5d894d;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Αρχική πηγή
Tags
Κοινοποίηση σε άλλες εφαρμογές

Εμφάνιση περισσότερων

Δημοσίευση σχολίου

3 Σχόλια
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. TheoMezCrochet9 Φεβρουαρίου 2020 στις 9:56 μ.μ.

    Οχι μόνο πανέμορφη, αλλά και λειτουργική ακόμα και σήμερα 9/2/2020. Μπράβο σας!

    ΑπάντησηΔιαγραφή
  2. Ιωάννης Δ. Παπαδήμος13 Ιανουαρίου 2023 στις 12:59 μ.μ.

    Σε ποιο σημείο του κώδικα βάζουμε το mail που θα σταλεί η επικοινωνία; Ευχαριστώ

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Tetsitech4 Απριλίου 2023 στις 10:34 μ.μ.

      Δυστυχώς δεν μπορείτε να επιλέξετε email. Το email σας είναι αυτό με το οποίο συνδέεστε στον Blogger

      Διαγραφή
Δημοσίευση σχολίου
To Top