Öncelikle Blogger şablonumuzda Kontrol Panelinden Sayfalar - Yeni Sayfa tıklayalım.
HTML bölümünü açalım ve aşağıda ki kodları kopyalayıp HTML editör sayfamıza ekleyelim.
Bu eklediğimiz 1. İletişim Sayfasıdır.
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style scoped="" type="text/css">
/* contact us */
#contact{background-color:#fff;margin:30px 0 !important}#contact .contact-form-widget{max-width:100% !important}
#contact .contact-form-name,#contact .contact-form-email,
#contact .contact-form-email-message{background-color:#FFF;border:1px solid #eee;border-radius:3px;padding:10px;margin-bottom:10px !important;max-width:100% !important}
#contact .contact-form-name{width:47.7%;height:50px}
#contact .contact-form-email{width:49.7%;height:50px}
#contact .contact-form-email-message{height:150px}#contact .contact-form-button-submit{max-width:100%;width:100%;z-index:0;margin:4px 0 0;padding:10px !important;text-align:center;cursor:pointer;background:#27ae60;border:0;height:auto;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;text-transform:uppercase;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out;color:#FFF}
#contact .contact-form-button-submit:hover{background:#2c3e50}#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{box-shadow:none !important}.alert-message{position:relative;display:block;background-color:#FAFAFA;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}
</style> Şimdi Sıra 2. İletişim Sayfasında
<div class="head1">
<h2><i class="fas fa-space-shuttle"></i> Silahkan Kontak Kami !!!</h2>
</div>
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="feedback-input" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input class="feedback-input" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea class="feedback-input" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input class="feedback-input" id="ContactForm1_contact-form-submit" type="submit" value="Kirim" />
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style scoped="" type="text/css">
/* contact us */
.head1 {
-webkit-border-radius:6px 6px 0px 0px;
-moz-border-radius:6px 6px 0px 0px;
border-radius:6px 6px 0px 0px;
background-color:#CC6666;
color:white;
}
h2 {
text-align:center;
padding:18px 0 18px 0;
font-size: 1.4em;}
form { max-width:700px; margin:50px auto; }
.feedback-input {
color:#000000;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:700px;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 700px;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#48afcc; }
</style>Şimdi Sıra da 3. İletişim Sayfa Eklentisinde
<section id="contact">
<div class="sectionheader"> <h1>CONTACT</h1></div>
<article>
<p>Silahkan contact kami jika Anda ingin memberikan kritik, saran, serta motivasi terhadap blog ini, dan kami berharap sekali atas dukungan Anda yang membangun tersebut.</p>
<label for="checkcontact" class="contactbutton"><div class="mail"></div></label><input id="checkcontact" type="checkbox">
<form name="contact-form" class="contactform">
<p class="input_wrapper">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><label for="contact_nom">NAME</label></p>
<p class="input_wrapper">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value=""><label for="contact_email">EMAIL</label></p>
<p class="input_wrapper">
<input type="text" name="contact_sujet" value="" id ="contact_sujet"><label for="contact_sujet">SUBJECT</label></p>
<p class="textarea_wrapper"><textarea name="contact_message" id="ContactForm1_contact-form-email-message""></textarea></p>
<p class="submit_wrapper">
<input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
</article>
</section>
<style scoped="" type="text/css">
/* Contact Us By Lk21.news */
#contact {
width: 600px;
margin:2em auto;
background:white;
position: relative;
}
#contact::after {
content: "";
display: block;
height: 30px;
width: 100%;
left: 5%;
bottom: 0;
position: absolute;
-webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.19);
border-radius: 100%;
z-index: -1;
}
#contact article {
padding: 1em;
}
#contact h1 {
background: #27dbd2;
font-family: Oswald ,sans-serif;
font-size: 1.75em;
padding: 0.6em 0 0.6em 0.4em;
color: white;
text-shadow: 0 0.06em 0 #424242;
position: relative;
}
.contactbutton {
background: #27dbd2;
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
text-align: center;
display: block;
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 2px;
cursor: pointer;
}
.contactbutton:hover {
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
.mail {
margin-top: 11px;
font-size: 15px;
display: inline-block;
border-top: 2em solid transparent;
border-left: 2.6em solid #fff;
height: 0;
width: 0;
position: relative;
}
.mail:before {
content: '';
top: -2.5em;
left: -2.95em;
display: block;
position: absolute;
border-top: 1.2em solid #fff;
border-left: 1.6em solid transparent;
border-right: 1.6em solid transparent;
border-bottom: 1em solid transparent;
font-size: 0.8em;
}
.mail::after {
display: block;
content: "";
position: absolute;
border-top: 2em solid transparent;
border-right: 2.6em solid #fff;
height: 0;
width: 0;
left: -2.18em;
bottom: 0;
}
#checkcontact{
position: absolute;
left: -99999px;
}
.contactform {
overflow: hidden;
max-height: 0px;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
-ms-transition: all linear 1s;
transition: all linear 1s;
}
#checkcontact:checked + .contactform {
max-height: 1000px;
}
.input_wrapper {
position: relative;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
}
.input_wrapper input[type="text"] {
margin-top: 1em;
display: block;
width: 100%;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
text-indent: 15%;
}
.input_wrapper input[type="text"]:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #DADADA;
outline: none;
text-indent: 0;
}
.input_wrapper label {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #27dbd2;
color: white;
font-family: Oswald ,sans-serif;
box-sizing: border-box;
width: 15%;
text-align: center;
line-height: 2.8em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.input_wrapper input[type="text"]:focus + label {
left: 85%;
}
.textarea_wrapper textarea {
margin-top: 20px;
display: block;
width: 100%;
min-height:150px;
background: white;
border: 1px solid #DADADA;
box-shadow: 0 0 1px 0 #E4E4E4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
color: #5E5E5E;
}
.textarea_wrapper textarea:focus {
background: rgba(242, 56, 90, 0.05);
box-shadow: inset 2px 2px 5px 0 #DADADA;
outline: none;
}
.submit_wrapper {
text-align: center;
}
.submit_wrapper input {
text-align: center;
display: inline-block;
width: 40%;
height: 50px;
margin-top: 1em;
margin-bottom: 6px;
cursor: pointer;
background: #27dbd2;
color: white;
font-family: Oswald ,sans-serif;
font-size: 1em;
border: none;
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
-webkit-appearance: none;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.submit_wrapper input:hover {
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
@media (max-width: 500px){
#contact {
width: 100%;
}
.input_wrapper label {
line-height: 3.5em;
font-size: 0.8em;
}
}
</style>4. İletişim Sayfasında ki kodlar da aşağıdaki gibidir
<div class = "frame">
<div id = "button_open_envelope">
Email me
</div>
<div class = "message">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" type="text" name="name" class="name" placeholder=" Name* " required>
<input id="ContactForm1_contact-form-email" type="email" name="email" class="email" placeholder=" Email* " required pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$">
<input type="text" name="phone" class="phone" placeholder=" Phone (optional)" autofocus>
<textarea id="ContactForm1_contact-form-email-message" name="message" class="messarea" placeholder=" Message* " required></textarea>
<input id="ContactForm1_contact-form-email-message" type="text" name="address" class="address" style="display: none;">
<input id="ContactForm1_contact-form-submit" type="submit" value="Send" class="send">
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
<div class = "bottom"></div>
<div class = "left"></div>
<div class = "right"></div>
<div class = "top"></div>
<script src="js/script.js"></script>
</div>
<style scoped="" type="text/css">
/* Contact US */
.frame{
width: 600px;
height: 350px;
margin: 250px auto 0;
position: relative;
background: #435d77;
border-radius:0 0 40px 40px;
}
#button_open_envelope{
width: 180px;
height: 30px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding:15px 0;
border: 2px solid #fff;
transition:.3s;
}
#button_open_envelope:hover{
background: #FFf;
color: #2b67cb;
transform:scale(1.1);
transition:background .25s, transform .5s,ease-in;
cursor: pointer;
}
.message{
position: relative;
width: 580px;
min-height:300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition:2s ease-in-out;
transition-delay:1.5s;
z-index: 300;
}
.left,.right,.top{width: 0; height: 0;position:absolute;top:0;z-index: 310;}
.left{
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right{
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;;
left:300px;
}
.top{
border-right: 300px solid transparent;
border-top: 200px solid #03A9F4;
border-left: 300px solid transparent;
transition:transform 1s,border 1s, ease-in-out;
transform-origin:top;
transform:rotateX(0deg);
z-index: 500;
}
.bottom{
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius:0 0 30px 30px;
z-index: 310;
}
.open{
transform-origin:top;
transform:rotateX(180deg);
transition:transform .7s,border .7s,z-index .7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull{
-webkit-animation:message_animation 2s 1 ease-in-out;
animation:message_animation 2s 1 ease-in-out;
-webkit-animation-delay:.9s;
animation-delay:.45s;
transition:1.5s;
transition-delay:1s;
z-index: 350;
}
.name,.email,.phone,.messarea,.send{
margin: 0;
padding: 0 0 0 10px;
width: 570px;
height:40px;
float: left;
display: block;
font-size: 18px;
color: #2b67cb;
border:none;
border-bottom:1px solid #bdbdbd;
letter-spacing: normal;
}
.messarea{
height: 117px;
width: 560px;
overflow: auto;
border:none;
padding: 10px;
}
.send{
width: 580px;
padding: 0;
border: none;
cursor: pointer;
background: #7CB342;
color: #fff;
transition:.35s;
letter-spacing: 1px;
}
.send:hover{background:tomato;transition:.35s;}
::-moz-placeholder{color: #7CB342;font-family: 'Ubuntu';font-size: 20px;opacity: 1;}
::-webkit-input-placeholder {color: #7CB342; font-family: 'Ubuntu';font-size: 20px;}
*:focus {outline: none;}
input:focus:invalid,textarea:focus:invalid {
/* when a field is considered invalid by the browser */
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border:1px solid #b03535;
}
input:required:valid,textarea:required:valid {
/* when a field is considered valid by the browser */
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
@-webkit-keyframes message_animation {
0%{
transform:translatey(0px);
z-index: 300;
transition: 1s ease-in-out;
}
50%{
transform:translatey(-340px);
z-index: 300;
transition: 1s ease-in-out;
}
51%{
transform:translatey(-340px);
z-index: 350;
transition: 1s ease-in-out;
}
100%{
transform:translatey(0px);
z-index: 350;
transition: 1s ease-in-out;
}
}
@keyframes message_animation {
0%{
transform:translatey(0px);
z-index: 300;
transition: 1s ease-in-out;
}
50%{
transform:translatey(-340px);
z-index: 300;
transition: 1s ease-in-out;
}
51%{
transform:translatey(-340px);
z-index: 350;
transition: 1s ease-in-out;
}
100%{
transform:translatey(0px);
z-index: 350;
transition: 1s ease-in-out;
}
}
</style>6. Sırada ki İletişim Sayfasıda herkesin beğeneceğini düşünüyorum :)
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<div id="content">
<form action=" " method="post" autocomplete="on">
<p>
<label for="username" class="icon-user"> Name
<span class="required">*</span>
</label>
<input type="text" name="username" id="ContactForm1_contact-form-name" required="required" placeholder="Your Name" />
</p>
<p>
<label for="usermail" class="icon-envelope"> E-mail address
<span class="required">*</span>
</label>
<input type="email" name="usermail" id="ContactForm1_contact-form-email" placeholder="I promise I hate spam too!" required="required" />
</p>
<p>
<label for="usersite" class="icon-link"> Website</label>
<input type="url" name="usersite" id="usersite" placeholder="eg: http://www.example.com" />
</p>
<p>
<label for="subject" class="icon-bullhorn"> Subject</label>
<input type="text" name="subject" id="subject" placeholder="What would you like to talk about?" />
</p>
<p>
<label for="message" class="icon-comment"> Message
<span class="required">*</span>
</label>
<textarea id="ContactForm1_contact-form-email-message" placeholder="Your message here and I'll answer as soon as possible " required="required"></textarea>
</p>
<p class="indication">Fields with
<span class="required"> * </span>are required</p>
<input id="ContactForm1_contact-form-submit" type="submit" value=" Send this mail ! " />
<br />
<div style="text-align: center; width: 100%;">
<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>
</div>
</form>
<style scoped="" type="text/css">
/* Contact Form */
#content {
position:relative;
margin:50px auto;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
/* My stipped background */
background: #D1D1D1;
/* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 6px #3F3F3F;
-moz-box-shadow:0px 1px 6px #3F3F3F;
box-shadow:0px 1px 6px #3F3F3F;
}
/** my "fake" background that will hover the stripes **/
#content:after {
background:#F9F9F9;
margin:10px;
position: absolute;
content :" ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
/*** form styling **/
/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]), textarea {
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
-moz-transition:background 0.2s linear, box-shadow 0.6s linear;
-o-transition:background 0.2s linear, box-shadow 0.6s linear;
transition:background 0.2s linear, box-shadow 0.6s linear;
}
input:not([type="submit"]):active, textarea:active, input:not([type="submit"]):focus, textarea:focus {
background:#F7F7F7;
border:dashed 1px #969696;
/*box-shadow*/
-webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
-moz-box-shadow:2px 2px 7px #E8E8E8 inset;
box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]) {
height: 20px;
}
/* placeholder */
::-webkit-input-placeholder {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#BABABA;
font-style:italic;
}
textarea {
min-height:150px;
resize:vertical
}
/** labels**/
/** adding our icon font !! */
.iconic:before {
font-size:25px;
font-family:'Alice', Verdana, serif;
}
.iconic.link:before {
content:'/';
}
.iconic.quote-alt:before {
content:"'";
}
.iconic.comment:before {
content:"q";
}
.iconic.user:before {
content:"u";
}
.iconic.mail-alt:before {
content:"M";
}
label {
color:#7F7E7E;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover {
color:#191919;
}
label:before {
color:#C1BFBD;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover:before {
color:#969696;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
p {
margin-bottom:20px;
}
.indication {
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required {
color:#E5224C;
}
/** Styling the send button **/
input[type=submit] {
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family:'Alice', serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
background: rgb(247, 247, 247);
background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
input[type=submit]:hover {
color:#686868;
border-color: #CECECE;
background: rgb(244, 244, 244);
background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
position:relative;
top:1px;
color:#515151;
background: rgb(234, 234, 234);
background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
</style>7. ve Son İletişim Sayfa kodları aşağıda ki gibidir.
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<br />
<br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>Bütün işlemler bu kadar Demo sayfası aşağıdadır herkese kolay gelsin.