Unduhan formy - pengunduhan kode sumber formy

formy

Kategori lainnya

1.0.0

Unduh

Formi

Formy - formulir kontaknya yang responsif dan ramah pada ikon html/sass/jquery/php dan svg.

Anda dapat mengirimi saya beberapa email dengan formulir ini:

Cara menggunakan

Pertama-tama, unduh dan sematkan ke gaya dan skrip proyek Anda:

<link rel="stylesheet" href="css/formy.min.css"> - antara tag `` and ```.

<script src="js/formy.min.js"></script> - setelah jquery, sebelum tag </body>

Kemudian unduh ke folder proyek Anda php dengan file formy.php .

Saat Anda mengunduh dan menyematkan semua gaya dan skrip, Anda memerlukan markup untuk formulir Anda, jadi cukup salin kode di antara komentar   dari file formy.html , dan tempel ke dalam tata letak Anda.

markup HTML

Mungkin terlihat sangat besar, tapi ini karena ikon SVG memakan banyak ruang, tapi percayalah - ini akan lebih baik daripada memasukkannya sebagai gambar biasa.

 <form id="formy" name="formy" onSubmit="return validate(event);">
		<div id="result"></div>
		<!--Name field-->
		<div class="input-field">
			<i>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 19.79"><title>Name</title><path class="a" d="M7.72,2.15A3.13,3.13,0,0,0,6.49,4.74c0.06,0.78.22,1.79,0.22,1.79a0.92,0.92,0,0,0-.31.85c0.11,1.72.68,1,.8,1.73,0.28,1.81.93,1.49,0.93,2.48,0,1.65-.68,2.42-2.8,3.33S1,17,1,19v1H19V19c0-2-2.2-3.15-4.33-4.07s-2.8-1.68-2.8-3.33c0-1,.65-0.67.93-2.48,0.12-.75.69,0,0.8-1.73a0.92,0.92,0,0,0-.31-0.85s0.16-1,.22-1.79a3.09,3.09,0,0,0-2.3-3.1c-0.33-.34-0.56-0.88.47-1.42C9.44,0.11,8.92,1.28,7.72,2.15Z" transform="translate(-1 -0.21)"/></svg>
			</i>
			<input type="text" name="name" id="name" maxlength="60" data-validate required/>
			<label for="name">Name</label>
			<div class="lenghtCounter"><span></span></div>
		</div>
		<!--Email field-->
		<div class="input-field">
			<i>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12"><title>Email</title><path class="a" d="M1.57,5.29l7.5,4a2.16,2.16,0,0,0,1.81,0l7.5-4C18.88,5,19.34,4,18.44,4H1.52C0.62,4,1.09,5,1.57,5.29Zm17,2.2-7.73,4a1.7,1.7,0,0,1-.91.2,1.7,1.7,0,0,1-.91-0.2l-7.69-4C1,7.28,1,7.52,1,7.71V15a1.22,1.22,0,0,0,1,1H18a1.22,1.22,0,0,0,1-1V7.71C19,7.52,19,7.28,18.61,7.49Z" transform="translate(-1 -4)"/></svg>
			</i>
			<input type="email" name="email" id="email" maxlength="60" required/>
			<label for="email">Email</label>
			<div class="lenghtCounter"><span></span></div>
		</div>
		<!--Phone field-->
		<div class="input-field">
			<i>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16"><title>Phone</title><path class="a" d="M11.23,11.23c-1.58,1.58-3.42,3.1-4.14,2.37-1-1-1.68-1.94-4-.1s-0.53,3.06.47,4.07c1.16,1.16,5.48.06,9.76-4.21s5.37-8.6,4.21-9.76c-1-1-2.23-2.76-4.06-.47s-0.94,2.93.1,4C14.32,7.81,12.81,9.65,11.23,11.23Z" transform="translate(-2 -2)"/></svg>
			</i>
			<input type="tel" name="phone" id="phone" maxlength="18" required/>
			<label for="phone">Phone</label>
			<div class="lenghtCounter"><span></span></div>
		</div>
		<!--Message field-->
		<div class="input-field">
			<i>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18"><title>Message</title><path class="a" d="M5.8,12.2V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2H3v3l3-3h5a2,2,0,0,0,2-2V12.18l-0.2,0h-7ZM18,1H9A2,2,0,0,0,7,3v8h7l3,3V11h1a2,2,0,0,0,2-2V3A2,2,0,0,0,18,1Z" transform="translate(0 -1)"/></svg>
			</i>
			<textarea name="message" id="message"></textarea>
			<label for="message">Your message</label>
		</div>
		<!--Submit button-->
		<button type="submit" class="submit">
			Submit
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.2 17.6"><title>Submit</title><path class="a" d="M11.93,13.07S19,8,18.21,2.15a0.46,0.46,0,0,0-.11-0.27,0.44,0.44,0,0,0-.26-0.12C12.14,1,7.16,8.18,7.16,8.18c-4.32-.52-4,0.34-6,5.08-0.38.9,0.23,1.21,0.9,1l2.15-.81,2.59,2.65L6,18.25c-0.25.69,0.05,1.31,0.94,0.93C11.6,17.17,12.44,17.49,11.93,13.07Zm1-5.92a1.59,1.59,0,0,1,0-2.22,1.51,1.51,0,0,1,2.17,0,1.59,1.59,0,0,1,0,2.22A1.51,1.51,0,0,1,12.94,7.15Z" transform="translate(-1.07 -1.7)"/></svg>
		</button>
	</form>

PHP

Sebelum mulai menggunakan Formy di situs web Anda, Anda harus mengatur alamat email Anda di file formy.php di bidang ini:

 $to = "[email protected]";

KELANCANGAN

Ya, nakal di mana-mana! Tapi sebenarnya saya menggunakan sass dalam proyek ini hanya untuk pencampuran warna yang mudah.

 $color-palette-green: #1abc9c
$color-palette-red: #e74c3c
$color-palette-grey: #3a3a3a

$good: $color-palette-green //when everything is fine
$bad: $color-palette-red //when something is invalid
$default: $color-palette-grey // default state

masukan

Deafault Formy menyertakan 4 input: Nama, Email, Telepon dan Textarea. Semuanya kecuali teks diperlukan, namun Anda dapat mematikannya (atau mengaktifkannya untuk teks) hanya dengan menambahkan atribut required . (validasi js mulai berfungsi hanya jika atribut ini diaktifkan).

Validasi

Saya tidak melakukan validasi yang terlalu rumit dalam formulir ini. Yang pertama adalah validasi HTML5 standar, kemudian verifikasi berfungsi pada jumlah karakter minimum. Di kolom nomor telepon, hanya input nomor yang tersedia. Saya tidak membatasi karakter input di bidang teks, tetapi saya membuat perubahan ketinggian secara otomatis tergantung pada jumlah teks.

Bagaimana tampilan email dari Formy

Berapa beratnya

Kurang dari 10 kb (838b php, 2,79kb css, 4,69kb js + markup sekitar 1,5kb).

Versi

Ini hanyalah versi pertama, jadi anggap saja ini sebagai pengujian beta terbuka. Jika menarik bagi komunitas, di versi berikutnya saya akan menambahkan beberapa kotak centang, daftar pilihan, dan tombol radio.