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