formy ดาวน์โหลด - ดาวน์โหลดซอร์สโค้ด formy

formy

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

ฟอร์มี

Formy - แบบฟอร์มติดต่อที่ตอบสนองและเป็นมิตรบนไอคอน html/sass/jquery/php และ svg

คุณสามารถเขียนอีเมลถึงฉันด้วยแบบฟอร์มนี้:

วิธีใช้

ก่อนอื่น ดาวน์โหลดและฝังลงในสไตล์และสคริปต์ของโปรเจ็กต์ของคุณ:

<link rel="stylesheet" href="css/formy.min.css"> - ระหว่างแท็ก `` and ```

<script src="js/formy.min.js"></script> - หลัง jquery ก่อนแท็ก </body>

จากนั้นดาวน์โหลดลงในโฟลเดอร์โปรเจ็กต์ของคุณ php พร้อมไฟล์ formy.php

เมื่อคุณดาวน์โหลดและฝังสไตล์และสคริปต์ทั้งหมด คุณต้องมีมาร์กอัปสำหรับแบบฟอร์มของคุณ ดังนั้นเพียงคัดลอกโค้ดระหว่างความคิดเห็น   จากไฟล์ formy.html และวาง ลงในเค้าโครงของคุณ

มาร์กอัป HTML

อาจดูใหญ่โตมาก แต่เป็นเพราะไอคอน SVG ใช้พื้นที่มาก แต่เชื่อฉันสิ มันจะดีกว่าการใส่เป็นรูปภาพปกติ

 <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

ก่อนที่จะเริ่มใช้ Formy บนเว็บไซต์ของคุณ คุณต้องตั้งค่าที่อยู่อีเมลของคุณในไฟล์ formy.php ในช่องนี้:

 $to = "[email protected]";

สัส

ใช่แล้ว หน้าด้านทุกที่! แต่จริงๆ แล้วฉันใช้ sass ในโปรเจ็กต์นี้เพียงเพื่อการผสมสีอย่างง่าย

 $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

อินพุต

Deafault Formy มีอินพุต 4 ช่อง: ชื่อ อีเมล โทรศัพท์ และพื้นที่ข้อความ จำเป็นต้องมีทั้งหมดยกเว้นข้อความ แต่คุณสามารถปิด (หรือเปิดสำหรับข้อความ) ได้เพียงแค่เพิ่มแอตทริบิวต์ required (การตรวจสอบความถูกต้องของ js จะเริ่มทำงานก็ต่อเมื่อแอตทริบิวต์นี้เปิดอยู่)

การตรวจสอบ

ฉันไม่ได้ทำการตรวจสอบที่ซับซ้อนเกินไปในแบบฟอร์มนี้ ประการแรก - คือการตรวจสอบความถูกต้องของ HTML5 มาตรฐาน จากนั้นการตรวจสอบจะดำเนินการกับจำนวนอักขระขั้นต่ำ ในช่องที่มีหมายเลขโทรศัพท์จะมีให้เฉพาะหมายเลขที่ป้อนเท่านั้น ฉันไม่ได้จำกัดอักขระที่ป้อนในช่องข้อความ แต่ฉันทำให้การเปลี่ยนความสูงโดยอัตโนมัติขึ้นอยู่กับจำนวนข้อความ

อีเมลจาก Formy มีลักษณะอย่างไร

มันมีน้ำหนักเท่าไหร่

น้อยกว่า 10 kb (838b php, 2,79kb css, 4,69kb js + ประมาณ 1.5kb มาร์กอัป)

รุ่นต่างๆ

มันเป็นเพียงเวอร์ชันแรก ดังนั้นให้คิดว่าเป็นการทดสอบเบต้าแบบเปิด หากชุมชนสนใจ ในเวอร์ชันถัดไป ฉันจะเพิ่มช่องทำเครื่องหมาย รายการที่เลือก และปุ่มตัวเลือก