Sample: Using Contact Form 7 with Enfold

Readme.md

Using Contact Form 7

These codes for Ephemerid.

Disable Autop

First of all disable autop with this:

# wp-config.php
define('WPCF7_AUTOP', false);

Form

<div class="c-form">

  <div class="c-form__group">

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [text* isim class:c-form__control placeholder "İsim*"]
      </div>

    </div>

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [select alis_lokasyonu class:c-form__control "Kayseri Hava Alanı" " Kayseri Otogar" " Kayseri" " Adana" " Adıyaman" " Afyon" " Ağrı" " Aksaray" " Amasya" " Ankara" " Antalya" " Ardahan" " Artvin" " Aydın" " Balıkesir" " Bartın" " Batman" " Bayburt" " Bilecik" " Bingöl" " Bitlis" " Bolu" " Burdur" " Bursa" " Çanakkale" " Çankırı" " Çorum" " Denizli" " Diyarbakır" " Düzce" " Edirne" " Elazığ" " Erzincan" " Erzurum" " Eskişehir" " Gaziantep" " Giresun" " Gümüşhane" " Hakkari" " Hatay" " Iğdır" " Isparta" " İçel" " İstanbul" " İzmir" " Kahramanmaraş" " Karabük" " Karaman" " Kars" " Kastamonu" " Kırıkkale" " Kırklareli" " Kırşehir" " Kilis" " Kocaeli" " Konya" " Kütahya" " Malatya" " Manisa" " Mardin" " Muğla" " Muş" " Nevşehir" " Niğde" " Ordu" " Osmaniye" " Rize" " Sakarya" " Samsun" " Siirt" " Sinop" " Sivas" " Şanlıurfa" " Şırnak" " Tekirdağ" " Tokat" " Trabzon" " Tunceli" " Uşak" " Van" " Yalova" " Yozgat" " Zonguldak" ]
      </div>

    </div>

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [text alis_tarihi class:c-form__control class:c-form__control--date placeholder "Alış Tarihi"]
      </div>

    </div>

  </div>

  <div class="c-form__group">

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [text* telefon class:c-form__control placeholder "Telefon*"]
      </div>

    </div>

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [select teslim_lokasyonu class:c-form__control "Kayseri Hava Alanı" " Kayseri Otogar" " Kayseri" " Adana" " Adıyaman" " Afyon" " Ağrı" " Aksaray" " Amasya" " Ankara" " Antalya" " Ardahan" " Artvin" " Aydın" " Balıkesir" " Bartın" " Batman" " Bayburt" " Bilecik" " Bingöl" " Bitlis" " Bolu" " Burdur" " Bursa" " Çanakkale" " Çankırı" " Çorum" " Denizli" " Diyarbakır" " Düzce" " Edirne" " Elazığ" " Erzincan" " Erzurum" " Eskişehir" " Gaziantep" " Giresun" " Gümüşhane" " Hakkari" " Hatay" " Iğdır" " Isparta" " İçel" " İstanbul" " İzmir" " Kahramanmaraş" " Karabük" " Karaman" " Kars" " Kastamonu" " Kırıkkale" " Kırklareli" " Kırşehir" " Kilis" " Kocaeli" " Konya" " Kütahya" " Malatya" " Manisa" " Mardin" " Muğla" " Muş" " Nevşehir" " Niğde" " Ordu" " Osmaniye" " Rize" " Sakarya" " Samsun" " Siirt" " Sinop" " Sivas" " Şanlıurfa" " Şırnak" " Tekirdağ" " Tokat" " Trabzon" " Tunceli" " Uşak" " Van" " Yalova" " Yozgat" " Zonguldak" ]
      </div>

    </div>

    <div class="c-form__item c-form__item--1/3">

      <div class="c-form__field">
        [text teslim_tarihi class:c-form__control class:c-form__control--date placeholder "Teslim Tarihi"]
      </div>

    </div>

  </div>

  <div class="c-form__group">

    <div class="c-form__item">

      <div class="c-form__field">
        [text mesaj class:c-form__control placeholder "Mesaj"]
      </div>

    </div>

  </div>

  <div class="c-form__group c-form__group--action">

    <div class="c-form__item">

      <div class="c-form__field">
        [submit class:c-form__submit "Gönder"]
      </div>

    </div>

  </div>

</div>

Mail

Vehicle: [_post_title]

Name: [isim]

Pickup Location: [alis_lokasyonu]
Pickup Date: [alis_tarihi]

Delivery Location: [teslim_lokasyonu]
Delivery Date: [teslim_tarihi]

Message:
[mesaj]

CSS

.c-form {
  box-sizing: border-box;
}
.c-form * {
  box-sizing: inherit;
}
.c-form input,
.c-form textarea,
.c-form select
{
  margin-bottom: 0 !important;
}
.c-form__group {
  margin-left: -30px;
  margin-top: -30px;
}
.c-form__group:before,
.c-form__group:after  {
  content: "";
  display: table;
  clear: both;
}
.c-form__item {
  float: left;
  width: 100%;
  padding-left: 30px;
  padding-top: 30px;
}

@media (min-width: 768px) {
  .c-form__item--1\/2 {
    width: 50%;
  }
  .c-form__item--1\/3 {
    width: 33.3333%;
  }
  .c-form__item--2\/3 {
    width: 66.6666%;
  }
}

Scripts

<!-- end of footer.php (before closing body tag) -->
<script type='text/javascript' src='http://koskerlerrentacar.com/wp/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>	
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery(".c-form__control--date").datepicker({
            	beforeShow: function(input, inst) {
			       jQuery("#ui-datepicker-div").addClass(this.id);
			       inst.dpDiv.addClass("avia-datepicker-div");
			   },
                showButtonPanel: true,
                closeText: "Kapat",
                currentText: "Bugün",
                nextText: "Sonraki",
                prevText: "Önceki",
                monthNames: ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],
                monthNamesShort: ["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],
                dayName: ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],
                dayNamesShort: ["Paz","Pzt","Sal","Çar","Per","Cum","Cmr"],
                dayNamesMin: ["P","P","S","Ç","P","C","C"],
                dayNames: ["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"],
                dateFormat: "dd.mm.yy",
                firstDay: 1,
                isRTL: 0,
                changeMonth: true,
				changeYear: true,
				yearRange: "c-80:c+10"
            }); 
	});
</script>