Freely Form(フリーリーフォーム) とは &lt; Freely Form &lt; allis(オールイズ)

SSL

無料

自由

簡単

無料	全ての機能を無料でご利用頂けます。
商用可	商用でもご利用頂けます。
カスタマイズ可	エラー文字列の変更など、カスタマイズ性も優れています。
簡単設置	「1行の JavaScript タグを設置し、SubmitボタンへのID追加」だけでご利用出来ます。事前にメンバー登録＋ID発行が必要です。
デザインフリー	「1行のJavaScriptとSubmitボタンへのID指定追加だけ」なので、自前で用意したデザインフォームをそのままでご利用出来ます。一部変更出来ない箇所もあります。
ページ遷移無し	自前で用意したデザインフォームをそのままでご利用出来ますので「フォームだけ違うドメインページで行わなければならない」などというユーザビリティの悪さが発生しません。オプション設定で、フォーム送信後にリダイレクトする事は出来ます。
SSL/HTTPS対応	セキュアな接続に対応していますので、お問い合わせフォームや注文フォームとしてもご利用頂けます。 httpsのみご利用頂けます。httpでの接続は出来ません。SSL暗号化対応が古いブラウザはご利用頂けません。
HTML5	HTML5に対応しております。
jquery XMLHRL2 CSS3	HTML5世代の最新技術 CSS3 や XMLHttpRequest Level 2 などを利用しています。未対応の古いブラウザではご利用頂けません。

スタートまでのフロー

メンバー登録

ID発行

設置タグ発行

該当フォームに設置

設置例(サンプル)

<head></head>内に記載する内容


	<script src="https://allis.jp/js/jquery.js" defer="defer"></script>
<script type="text/javascript" src="https://freely-form.allis.jp/get/?id=sample" defer="defer"></script>

ボタンに追加するID


	<button type="button" id="allis_freely-form_submit">送信</button>	1つのページに複数設置する事は出来ません。

	このサンプルを設置したフォームで送信された内容は、サンプルメンバーでログインする事で確認出来ます。

実際の設置例

→ 設置例(サンプルフォーム)

form作成手引き

<script type="text/javascript" src="https://freely-form.allis.jp/get/?id=sample" defer="defer"></script>

<form>
<fieldset>
	<table>
	
		<tr>
			<th>感想
			<td>
				<label><input type="checkbox" name="感想[]" value="面白い">面白い</label>
				<label><input type="checkbox" name="感想[]" value="役に立つ">役に立つ</label>
				<label><input type="checkbox" name="感想[]" value="いまいち">いまいち</label>
		
		<tr>
			<th>評価
			<td>
				<label><input type="radio" name="評価" value="★">★</label>
				<label><input type="radio" name="評価" value="★★">★★</label>
				<label><input type="radio" name="評価" value="★★★">★★★</label>

		<tr>
			<th>お名前
			<td><input type="text" name="お名前">
		
		<tr>
			<th>URL
			<td><input type="url" name="URL">
		
		<tr>
			<th>予定日
			<td><input type="date" name="予定日">
		
		<tr>
			<th>その他
			<td><textarea name="その他"></textarea>
		
		<tr>
			<th>どこで見つけましたか？
			<td>
				<select name="発見[]" multiple="multiple">
					<option value="">選択してください</option>
					<option value="google">google</option>
					<option value="yahoo">yahoo</option>
					<option value="街中で">街中で</option>
					<option value="お店で">お店で</option>
				</select>
	</table>

	<button type="button" id="allis_freely-form_submit">送信</button>
</fieldset>
</form>

複数選択可にする場合	nameに [] を追加してください。
name	nameに指定された文字列は Freely-Form ID : sample に送信された内容で表示される項目名にそのまま利用されます。

対応表

対応タグ	input[checkbox radio text tel date time number hidden search datetime submit range url email color], textarea, select input[file]は現在ご利用頂けませんが、今後対応予定です
対応ブラウザ	google chrome 40, IE 11, Opera 27 他未確認

カスタマイズ / オプション

内部設定	フォームで送信された内容を、設定したメールアドレスへ送信する事が出来ます。(標準設定の為メールは必ず送信されます) フォーム送信後にリダイレクトするURLを指定する事が出来ます(オプション) この2つの設定は管理→ 一覧 → 設定で行う事が出来ます。
CSS !important でのデザインの強制変更	利用しているCSS構成は span.allis_freely_form_css_span span.allis_freely_form_css_span > small.allis_freely_form_css_small span.allis_freely_form_css_span > small.allis_freely_form_css_small:after です。これらを !important で固定しておく事により、より自由なカスタマイズが可能です。
外部設定 (エラー文字)	フォーム送信ボタンを押した時に出るエラーの文字を変更する事が出来ます。 {n} はそれぞれ設定している半角数字に変換されます。 $(function(){ allis_freely_form_checker_error_string['required'] = '必須項目です。'; allis_freely_form_checker_error_string['maxlen'] = '{n}文字以内でのご記入をお願いします。'; allis_freely_form_checker_error_string['minlen'] = '{n}文字以上でのご記入をお願いします。'; allis_freely_form_checker_error_string['type_number'] = '数値として扱える値である必要があります。'; allis_freely_form_checker_error_string['type_tel'] = '電話番号としての情報が不足しています。'; allis_freely_form_checker_error_string['type_url'] = 'URLとしての情報が不足しています。'; allis_freely_form_checker_error_string['type_email'] = 'メールアドレスとしての情報が不足しています。'; allis_freely_form_checker_error_string['type_color'] = 'カラーコードとしての情報が不足しています。'; allis_freely_form_checker_error_string['limit_selected'] = '選択は{n}つまででお願いします。'; }); Freely-FormのJavaScriptを読み込んだ後に読み込ませる事で上書き出来ます。
外部設定 (validator)	各input入力規則を設定する事が出来ます。 [''] の中には、inputなどのname属性に指定している文字を指定してください。デフォルトではform内容にあるinputなどは全て入力必須として扱っているので、入力必須解除('required' :false)が一番良く利用されるかと思います。 $(function(){ /* type : all required:true = 入力必須 required:false = 入力しなくてもエラーにしない / allis_freely_form_validator['名前'] = { 'required' :false }; / type : number, range, tel, url, email, color のみの設定 type:true = type特有のチェックを行います type:false = type特有のチェックを行いません / allis_freely_form_validator['名前'] = { 'type' :false }; / type : select, checkbox のみの設定 limit_selected : 複数選択が可能な時の、最大選択数(数字)を指定 / allis_freely_form_validator['名前'] = { 'limit_selected' :2 }; / type : text, textarea のみの設定 minlen : 最小入力文字数を指定 maxlen : 最大入力文字数を指定 */ allis_freely_form_validator['名前'] = { 'minlen' :10 ,'maxlen' :20 }; }); Freely-FormのJavaScriptを読み込んだ後に読み込ませる事で上書き出来ます。
外部設定(上級者向け)	/* ■フォーム送信が正常に終了した後に実行れるfunctionを指定出来ます。 (「フォーム送信完了後のリダイレクト先URL」が設定されている場合当functionが実行後にリダイレクトが実行されます。引数： a = ajax戻り値 b = FormDataオブジェクト / function allis_freely_form_success(a, b){ } / ■通信エラーの時に実行されます。 / allis_freely_form_error(){ } / ■既存のオブジェクトを上書きする事でチェック内容などを追加/変更する事が出来ます。 (ソース参照) */ var allis_freely_form_checker = {};

不具合報告や機能要望

Twitter @allisjp までお願い致します。

更新履歴

2015-03-14 defer対応
2015-02-21 公開