تنزيل 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 كيلو بايت (838 بايت php، 2,79 كيلو بايت CSS، 4,69 كيلو بايت Js + حوالي 1.5 كيلو بايت ترميز).

الإصدارات

إنها مجرد نسخة أولى، لذا فكر فيها كاختبار تجريبي مفتوح. إذا كان الأمر مثيرًا للاهتمام للمجتمع، فسوف أقوم في الإصدار التالي بإضافة بعض مربعات الاختيار وقوائم التحديد وأزرار الاختيار.