İletişim Formu
Videoyu oynat
Video yapım aşamasında
Merhaba arkadaşlar! Bugün sizlere, WordPress ve Elementor kullanarak ücretsiz eklentilerle harika bir İletişim sayfası nasıl tasarlayabileceğinizi gösteriyorum. Bu dersimizde öğreneceğiniz konular oldukça önemli:
İletişim Formu Ayarları ve Yapılandırma: İlk olarak, bir iletişim formu nasıl oluşturulur ve yapılandırılır, adım adım öğreneceksiniz.
Elementor ile Tasarımı Kişiselleştirme: Elementor’un gücünü kullanarak sayfanızı nasıl kişiselleştirebileceğinizi adım adım öğreneceksiniz.
Fluent SMTP Eklentisi ile E-posta Ayarları: Formunuzun e-posta ayarlarını Fluent SMTP eklentisi kullanarak nasıl yapılandıracağınızı öğreneceksiniz. Bu sayede abone olan kullanıcılarınıza hızlı ve güvenilir bir şekilde ulaşabileceksiniz.
Ayrıca, bu dersin daha iyi anlaşılması için kullandığım CSS ve kısa kodları video açıklamasında sizlerle paylaştım. Böylece tasarımı daha da özelleştirmek isteyenler için ekstra yardımcı bilgilere sahip olacaksınız.
Kanalımıza abone olmayı ve videoya beğeni vermeyi unutmayın, böylece bu tarz içeriklerin devamını getirebiliriz.
Şimdi daha fazla zaman kaybetmeden derse başlayalım ve birlikte harika bir abone olunuz sayfası tasarlayalım!
CSS style sheet
/*------form arka tasarım------*/
.wpcf7
{
background-color: #ffff;
border: 0px solid #0f0;
padding: 0px 10px 0px 10px;
}
/*--form başlık yazı tasarım--*/
.cfh7 {
font-family: 'Poppins', sans-serif;
font-size:25px;
text-align:center;
margin:10px 10px 10px 10px;
color:#25C7A4;
}
/*---Form giriş blok yazıları----*/
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 textarea {
width: 100%;
padding: 8px;
font-size:11px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/*--- Aktif yazı ayarları--- */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,select:focus, select:active {
background-color: #ffffff;
box-shadow: 0 0 2px #01FF8E;
outline: none;
}
/*--- Gerekli alan yıldızı--- */
.asterisk_input:after {
content: "*";
color: #e32;
position: absolute;
margin: 10px 0px 0px -20px;
font-size: 17px;
padding: 0 0px 0 0;
}
/*-Contact Form 7 Gönder buttonu-*/
.wpcf7 input[type="submit"] {
display: block;
text-align:center;
margin: 0 auto;
color: #ffffff;
font-size: 18px;
font-weight: 700;
background: #25C7A4;
box-shadow: 0px 0px 16px 0px rgba(14, 30, 37, 0.32);
padding: 10px 10px 10px 10px;
border: none;
border-radius: 23px;
width: fit-content;
text-transform: uppercase;
letter-spacing: 1px;
}
/*----Gönder button Hover efekti--*/
.wpcf7 input:hover[type="submit"] {
background: #1D9A80;
transition: all 0.4s ease 0s;
}
/*-Gönder button tıklama efekti-*/
.wpcf7 input:active[type="submit"] {
background: black;
}
/*-Gönderim sonrası mesaj ayarı-*/
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: greenyellow;
text-align: left;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
#responsive-form{
max-width:500px
/*-- Form genişlik ayarları --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---- Media query -------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.wpcf7 input[type="submit"] {
width: fit-content;
float:left;
border-radius: 3px;
}
.cfh7 {
font-size:35px;
}
.wpcf7{
padding: 0px 40px 0px 40px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 textarea {
font-size:15px;
}
}
@media only screen and (max-width: 50em) {
.cfh7 {
font-size:30px;
}
}
@media only screen and (max-width: 18.75em) {
.cfh7 {
font-size:20px;
}
.wpcf7 input[type="submit"] {
font-size: 15px;
}
}
Contact Form 7 kodu
<div id="responsive-form" class="clearfix">
<div> <h2 class="cfh7"> Bize yazın!</h2></div>
<div class="form-row">
<div class="column-half">[text* your-name placeholder "Ad & Soyad"]<span class="asterisk_input"> </span></div>
<div class="column-half">[email* your-email placeholder "Email"]<span class="asterisk_input"> </span></div>
</div>
<div class="form-row">
<div class="column-full">[text* your-subject placeholder "Konu"]<span class="asterisk_input"> </span></div>
</div>
<div class="form-row">
<div class="column-full">[text telefon placeholder "Telefon"]<span class="asterisk_input"> </span></div>
</div>
<div class="form-row">
<div class="column-full">[textarea* textarea 10x10 minlength:10 maxlength:500 placeholder "Mesajınız"]<span class="asterisk_input"> </span></div>
</div>
<div class="form-row">
<div class="column-full">[submit "Gönder"]</div>
</div>
</div>
İleti gövdesi
Kimden: [your-name]
---------------------------------------------------------------------------------------------------
Email: [your-email]
---------------------------------------------------------------------------------------------------
Konu: [your-subject]
---------------------------------------------------------------------------------------------------
Telefon: [telefon]
---------------------------------------------------------------------------------------------------
İleti gövdesi:
[textarea]
-----------------------------------------------------------------------------------------------------
Bu, web sitenize bir iletişim formunun gönderildiğine dair bir bildirimdir ([_site_title] [_site_url]).
-----------------------------------------------------------------------------------------------------
