Merhaba, CF7 eklentisi için teklif formu html ve css kodları paylaşıyorum. İstediğiniz gibi düzenleyip kullanabilirsiniz. CSS leri özelleştir > Ek CSS alanına girmeniz yeterli.
ÖRNEK
<div class="form-grid">
<div class="form-sutun">
<div class="form-grup">
<label for="ad-soyad">Adınız Soyadınız (Zorunlu)</label>
[text* your-name id:ad-soyad class:form-kontrol placeholder "Örn: Ali Yılmaz"]
</div>
<div class="form-grup">
<label for="e-posta">E-posta Adresiniz (Zorunlu)</label>
[email* your-email id:e-posta class:form-kontrol placeholder "ornek@sirketiniz.com"]
</div>
<div class="form-grup">
<label for="telefon">Telefon Numaranız (Zorunlu)</label>
[tel* your-tel id:telefon class:form-kontrol placeholder "05XX XXX XX XX"]
</div>
<div class="form-grup">
<label for="sirket">Şirket veya Marka Adınız</label>
[text your-company id:sirket class:form-kontrol placeholder "Şirket Adı A.Ş."]
</div>
</div>
<div class="form-sutun">
<fieldset class="form-grup">
<legend>İlgilendiğiniz Hizmetler</legend>
[checkbox* hizmetler use_label_element "Web Tasarım & Yazılım" "E-Ticaret Çözüml." "SEO" "Kurumsal Kimlik" "Sosyal Medya" "Diğer"]
</fieldset>
<div class="form-grup">
<label for="butce">Tahmini Proje Bütçeniz</label>
[select* butce id:butce class:form-kontrol include_blank "50.000 - 100.000 TL" "100.000 - 250.000 TL" "250.000 - 500.000 TL" "500.000 TL ve Üzeri" "Fikrim Yok"]
</div>
</div>
</div>
<div class="form-grup">
<label for="proje-detay">Projenizden Bahseder misiniz?</label>
[textarea your-message id:proje-detay class:form-kontrol placeholder "Aklınızdaki projeyi, hedeflerinizi ve varsa beğendiğiniz örnekleri detaylandırabilirsiniz..."]
</div>
<div class="form-grup-dosya">
<label for="dosya-eklenti">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="dosya-ikon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
<span class="dosya-ana-metin"><strong>Dosya Seçmek İçin Tıklayın</strong> veya Sürükleyip Bırakın</span>
<span class="dosya-limiti">Maks. 5MB. PDF, DOCX, JPG, PNG, ZIP</span>
</label>
[file file-eklenti id:dosya-eklenti]
</div>
<div class="onay-kutusu">
[acceptance kvkk-onay] <a href="/gizlilik-politikasi/" target="_blank">Gizlilik Politikası</a>'nı ve <a href="/kullanim-kosullari/" target="_blank">Kullanım Koşulları</a>'nı okudum, kabul ediyorum. [/acceptance]
</div>
[submit class:buton-gonder "Teklif Talebini Gönder"]CSS KODLARI /* ========================================================= */
/* === FİNAL TASARIM: TUTARLI ARAYÜZ v7.1 === */
/* === (Tüm Alanlar İçin Mükemmel Uyum ve Stil) === */
/* ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
--form-primary-color: #0891B2; /* Koyu Teal/Cyan */
--form-primary-dark-color: #0E7490;
--form-text-color: #0F172A; /* Koyu Gri (Slate) */
--form-label-color: #475569;
--form-border-color: #CBD5E1;
--form-icon-color: #94A3B8; /* Varsayılan ikon rengi */
--form-placeholder-color: #9CA3AF;
--form-input-background: #FFFFFF;
--form-container-background: #FFFFFF;
--form-font-family: 'Manrope', sans-serif;
--form-border-radius: 10px;
--form-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Genel Form Stili --- */
.wpcf7-form {
background: var(--form-container-background);
padding: 50px;
border: 1px solid #E2E8F0;
border-radius: 20px;
font-family: var(--form-font-family);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 40px;
}
.form-grup {
margin-bottom: 25px;
}
.form-grup > label, .form-grup > legend {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--form-label-color);
margin-bottom: 10px;
letter-spacing: 0.2px;
}
/* --- Girdi Alanları (Genel Stil) --- */
.form-kontrol {
width: 100%;
padding: 10px;
font-size: 16px;
font-weight: 500;
color: var(--form-text-color);
background-color: var(--form-input-background);
border: 1px solid var(--form-border-color);
border-radius: var(--form-border-radius);
transition: var(--form-transition);
-webkit-appearance: none;
appearance: none;
}
.form-kontrol::placeholder {
color: var(--form-placeholder-color);
}
.form-kontrol:focus {
outline: none;
border-color: var(--form-primary-color);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.07), 0 0 0 3px rgba(8, 145, 178, 0.1);
}
/* --- Alan İçi İkonlar (Genel Ayarlar) --- */
.form-kontrol[name="your-name"],
.form-kontrol[name="your-email"],
.form-kontrol[name="your-tel"],
.form-kontrol[name="your-company"],
.form-kontrol[name="butce"] {
padding-left: 48px !important;
background-repeat: no-repeat;
}
/* İkonlar ve Odaklanma Efektleri */
.form-kontrol[name="your-name"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); background-position: left 16px center; }
.form-kontrol[name="your-name"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); }
.form-kontrol[name="your-email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E"); background-position: left 16px center; }
.form-kontrol[name="your-email"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E"); }
.form-kontrol[name="your-tel"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); background-position: left 16px center; }
.form-kontrol[name="your-tel"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E"); }
.form-kontrol[name="your-company"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%3E%3C/svg%3E"); background-position: left 16px center; }
.form-kontrol[name="your-company"]:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%3E%3C/svg%3E"); }
select.form-kontrol[name="butce"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10'%3E%3C/path%3E%3Cpath d='M18 20V4'%3E%3C/path%3E%3Cpath d='M6 20V16'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: left 16px center, right 16px center;
}
select.form-kontrol[name="butce"]:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10'%3E%3C/path%3E%3Cpath d='M18 20V4'%3E%3C/path%3E%3Cpath d='M6 20V16'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
select.form-kontrol:required:invalid { color: var(--form-placeholder-color); }
select.form-kontrol option { color: var(--form-text-color); }
textarea.form-kontrol { min-height: 140px; resize: vertical; }
/* --- Fieldset ve Checkbox Stilleri --- */
fieldset.form-grup {
border: 1px solid var(--form-border-color);
border-radius: var(--form-border-radius);
padding: 20px 20px 10px 20px;
margin-bottom: 20px;
}
fieldset.form-grup legend {
font-weight: 600;
font-size: 14px;
padding: 0 10px;
margin-left: -10px;
}
.form-grup .wpcf7-checkbox .wpcf7-list-item-label {
background-color: #F1F5F9;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: var(--form-label-color);
cursor: pointer;
transition: var(--form-transition);
position: relative;
padding-left: 18px;
}
.form-grup .wpcf7-checkbox .wpcf7-list-item-label:hover {
background-color: #E2E8F0;
}
.form-grup .wpcf7-checkbox input[type="checkbox"]:checked + span {
background-color: var(--form-primary-color);
color: #fff;
padding-left: 40px;
}
.form-grup .wpcf7-checkbox input[type="checkbox"]:checked + span::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
}
.form-grup .wpcf7-checkbox input[type="checkbox"] { display: none; }
.form-grup .wpcf7-checkbox { margin-left: 0; }
.form-grup .wpcf7-checkbox .wpcf7-list-item { display: inline-flex; margin: 0 8px 10px 0; }
/* --- Dosya Yükleme Alanı --- */
.form-grup-dosya {
border-color: var(--form-border-color);
transition: var(--form-transition);
position: relative;
margin: 25px 0;
width: 100%;
border-radius: var(--form-border-radius);
border-width: 2px;
border-style: dashed;
}
.form-grup-dosya:hover {
border-color: var(--form-primary-color);
background-color: #F7FAFC;
}
.form-grup-dosya input[type="file"] {
position: absolute;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}
.form-grup-dosya label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: 160px;
padding: 20px;
cursor: pointer;
box-sizing: border-box;
}
.dosya-ikon {
color: var(--form-primary-color);
margin-bottom: 15px;
transform: scale(1);
transition: var(--form-transition);
}
.form-grup-dosya:hover .dosya-ikon {
transform: scale(1.1) translateY(-5px);
}
.dosya-ana-metin {
font-size: 16px;
font-weight: 500;
color: var(--form-label-color);
}
.dosya-ana-metin strong {
color: var(--form-text-color);
}
.dosya-limiti {
font-size: 13px;
color: #9CA3AF;
margin-top: 8px;
}
/* --- Onay Kutusu ve Buton --- */
.onay-kutusu {
margin: 25px 0;
}
.onay-kutusu a {
color: var(--form-primary-color);
text-decoration: none;
font-weight: 600;
}
.buton-gonder {
width: 100%;
padding: 16px 30px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
color: #fff;
border: none;
border-radius: var(--form-border-radius);
cursor: pointer;
background-color: var(--form-primary-color);
transition: var(--form-transition);
position: relative;
text-align: center;
padding-right: 50px;
}
.buton-gonder::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: var(--form-transition);
}
.buton-gonder:hover {
background-color: var(--form-primary-dark-color);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}
.buton-gonder:hover::after {
transform: translateY(-50%) translateX(3px);
}
/* --- Mobil Uyum --- */
@media (max-width: 768px) {
.wpcf7-form {
padding: 30px 25px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 0;
}
.form-sutun {
margin-bottom: 20px;
}
}
[B][/B]