formy
1.0.0
다음 양식을 사용하여 나에게 이메일을 보내실 수 있습니다.
우선, 프로젝트 스타일과 스크립트를 다운로드하여 포함하세요.
<link rel="stylesheet" href="css/formy.min.css"> - `` and `` 태그 사이.
<script src="js/formy.min.js"></script> - jquery 뒤, </body> 태그 앞
그런 다음 formy.php 파일을 사용하여 프로젝트 폴더 php 에 다운로드합니다.
모든 스타일과 스크립트를 다운로드하고 삽입하려면 양식에 대한 마크업이 필요하므로 formy.html 파일에서 주석 <!-- Formy code --> <!-- /Formy code --> 사이에 코드를 복사하여 붙여넣으면 됩니다. 레이아웃에 추가하세요.
너무 거대해 보일 수도 있지만 이는 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>
웹사이트에서 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
기본 Formy에는 이름, 이메일, 전화번호 및 텍스트 영역의 4가지 입력이 포함됩니다. 텍스트를 제외한 모든 항목은 필수 항목이지만 required 속성을 추가하여 끄거나 텍스트의 경우 켤 수 있습니다. (js 유효성 검사는 이 속성이 켜져 있는 경우에만 작동합니다.)
이 형식에서는 너무 복잡한 검증을 수행하지 않았습니다. 첫 번째는 표준 HTML5 유효성 검사이며, 그 다음에는 최소한의 문자 수로 확인이 이루어집니다. 전화번호가 있는 항목에는 숫자만 입력 가능합니다. 텍스트 필드의 입력 문자 수를 제한하지 않고 대신 텍스트의 양에 따라 높이가 자동으로 변경되도록 했습니다.
10kb 미만(838b php, 2,79kb css, 4,69kb js + 약 1.5kb 마크업).
첫 번째 버전이므로 공개 베타 테스트라고 생각하세요. 커뮤니티가 관심을 가질 수 있도록 다음 버전에서는 체크박스, 선택 목록 및 라디오 버튼을 추가하겠습니다.
Formy에서는 멋진 Daniel Bruce의 svg 아이콘 Entypo를 사용합니다. Entypo Icons 사이트에서 전체 팩을 다운로드할 수 있습니다.
