contact

How to install設置方法 / Your choice個別設定, Recommendation推奨

Extract the distribution archive in your working directory配布物を作業ディレクトリで展開

Insert a few lines into your web pageウェブページへの組み込み (foobar.html)

Notes.註記

Mandatory必須
Reserved予約
- コントロールのラベルとしてl-を前置したエレメントのテキストノードを採用している
- 送信メールのSubjectヘッダに、コントロール名subjectの値を採用している
- コントロール名nameEmailの値を名称とするコントロールの値をメール発信人に用いる
- contact uses the text node of the l- prefixed element as a label of the control
- contact uses the value of the control named subject for Subject header to send
- As a sender contact uses the value of the contorol which is named by the value of the control named nameEmail
Click the following control names to show the relationship in this example HTML code次に示すコントロール名をクリックするとHTMLソース上での対応を示す
namename-ja rolerole-ja reasonreason-ja emailemail-ja messagemessage-ja


	<html>
	<head>
	    :
|	<script src="_fss.js" type="text/javascript"></script>
|	<script src="_jlog.js" type="text/javascript"></script>
|	<script src="_gass.js" type="text/javascript"></script>
|	<script src="_contact.js" type="text/javascript"></script>
|	<script src="foobar.js" type="text/javascript"></script>
	    :
	</head>
	<body>
	    :
|	<form id="fb-form-ja" name="fb-form-ja"
|		method="post" action="_contact.php">
|
|	<strong>
|	注）このサンプルは、ブラウザ処理がどう振る舞うかのみを示し、
|	サーバへの送信は中断して実行しない
|	</strong>
|
|	<ul>
|	<li>
|	  <label for="name-ja" id="l-name-ja">お名前</label><br />
|	  <input type="text" id="name-ja" name="name-ja" />
|	</li>
|
|	<li>
|	  <label for="role-ja" id="l-role-ja">あなたの立場</label><br />
|	  <select id="role-ja" name="role-ja">
|	  <option value="" selected="selected">下記から選択</option>
|	  <option value="ソフトウェア開発者">ソフトウェア開発者</option>
|	  <option value="Web管理者">Web管理者</option>
|	  <option value="コンテンツ開発者">コンテンツ開発者</option>
|	  <option value="その他">その他</option>
|	  </select>
|	</li>
|
|	<li>
|	  <label for="reason-ja" id="l-reason-ja">問い合わせ動機</label><br />
|	  <select id="reason-ja" name="reason-ja">
|	  <option value="" selected="selected">下記から選択</option>
|	  <option value="contact設置に協力して欲しい">
|		contact設置に協力して欲しい</option>
|	  <option value="ビジネスパートナーとして提案したい">
|		ビジネスパートナーとして提案したい</option>
|	  <option value="JavaScript指導を依頼したい">
|		JavaScript指導を依頼したい</option>
|	  <option value="コンテンツ開発コンサルティングに参加して欲しい">
|		コンテンツ開発コンサルティングに参加して欲しい</option>
|	  <option value="その他">その他</option>
|	  </select>
|	</li>
|
|	<li>
|	  <label for="email-ja" id="l-email-ja">あなたのメールアドレス</label><br />
|	  <input type="text" id="email-ja" name="email-ja" />
|	</li>
|
|	<li>
|	  <label for="message-ja" id="l-message-ja">ご要件</label><br />
|	  <textarea id="message-ja" name="message-ja" rows="5" cols="40"></textarea>
|	</li>
|
|	<li>
|	  <input type="hidden" id="subject" name="subject" value="問合せ" />
|	  <input type="hidden" id="nameEmail" name="nameEmail" value="email-ja" />
|	  <input type="submit" id="sub" name="sub" value="メール送信をサーバに依頼" />
|	  <input type="reset" id="rset" name="rset" value="リセット" />
|	</li>
|	</ul>
|
|	</form>
	    :
	</body></html>


	<html>
	<head>
	    :
|	<script src="_fss.js" type="text/javascript"></script>
|	<script src="_jlog.js" type="text/javascript"></script>
|	<script src="_gass.js" type="text/javascript"></script>
|	<script src="_contact.js" type="text/javascript"></script>
|	<script src="foobar.js" type="text/javascript"></script>
	    :
	</head>
	<body>
	    :
|	<form id="fb-form-en" name="fb-form-en"
|		 method="post" action="_contact.php">
|
|	<strong>
|	Note that this sample shows only the browser embeded
|	script's behaviour and does not submit this form actually.
|	</strong>
|
|	<ul>
|	<li>
|	  <label for="name" id="l-name">Name</label><br />
|	  <input type="text" id="name" name="name" />
|	</li>
|
|	<li>
|	  <label for="role" id="l-role">Role</label><br />
|	  <select id="role" name="role">
|	  <option value="" selected="selected">Select</option>
|	  <option value="software developer">software developer</option>
|	  <option value="webmaster">webmaster</option>
|	  <option value="contents developer">contents developer</option>
|	  <option value="the others">the others</option>
|	  </select>
|	</li>
|
|	<li>
|	  <label for="reason" id="l-reason">Contact reason</label><br />
|	  <select id="reason" name="reason">
|	  <option value="" selected="selected">Select</option>
|	  <option value="I need the contact install service">
|		I need the contact install service</option>
|	  <option value="making a proposal as a business partner">
|		making a proposal as a business partner</option>
|	  <option value="looking for a JavaScript instructor">
|		looking for a JavaScript instructor</option>
|	  <option value="looking for members of web contents consulting">
|		looking for members of web contents consulting</option>
|	  <option value="the others">the others</option>
|	  </select>
|	</li>
|
|	<li>
|	  <label for="email" id="l-email">Email</label><br />
|	  <input type="text" id="email" name="email" />
|	</li>
|
|	<li>
|	  <label for="message" id="l-message">Message</label><br />
|	  <textarea id="message" name="message" rows="5" cols="40"></textarea>
|	</li>
|
|	<li>
|	  <input type="hidden" id="subject" name="subject" value="Contact" />
|	  <input type="hidden" id="nameEmail" name="nameEmail" value="email" />
|	  <input type="submit" id="sub" name="sub"
|			value="Request sending email to the server" />
|	  <input type="reset" id="rset" name="rset" value="Reset" />
|	</li>
|	</ul>
|
|	</form>
	    :
	</body></html>

Insert several lines into your JavaScript fileJavaScript ファイルへの組み込み (foobar.js)


	function foobar() {
		:
	}

	function foobarInit() {
		:
		ofb = new foobar();
		:
|		//////////////// interface ////////////////
|		// function _contact(formId,
|		//	labelConfirm,labelSubmit,labelReset,labelReturn,
|		//	opMsgEltId,classInput,classConfirm,
|		//	opMsgInit,opMsgConfirm,opMsgComplete,
|		//	checkRequired,editRequiredMessage,
|		//	checkInvalid,editInvalidMessage)
|	
|		var labelConfirmJa = '送信依頼を確認';
|		var labelSubmitJa = '確認してサーバに送信依頼';
|		coja = new _contact('fb-form-ja',
|			labelConfirmJa,labelSubmitJa,'リセット','入力にもどる',
|			'op-msg-ja','fb-input','fb-disabled',
|			'項目を入力後「'+labelConfirmJa+'」ボタンを押して下さい',
|			'項目を確認し「'+labelSubmitJa+'」ボタンを押して下さい',
|			'送信を完了しました',
|			undefined,
|			function (label) { return label+'が必要です'; },
|			undefined,
|			function (label) { return label+'が正しくありません'; });
|		coja._rw_controlNameOfVisitorEmail = 'nameEmailJa'; // fake
|		coja._contactExec();
|		coja.submit = function () // サンプル実現の為
|			{ alert('送信を中断しました'); };
		:
	}

	window.onload = function () {
|	//	_fss.prototype._jlOffStartup = true; // to inactivate
|	//	_fss.prototype._jlHideJlogButtonOnStartup = true; // to hide
|		foobar.prototype._jlogSetUp(foobarInit);  // log for only foobar 
|	//	_fss.prototype._jlogSetUp(foobarInit);  // log for all
		foobarInit();
	}


	function foobar() {
		:
	}

	function foobarInit() {
		:
		ofb = new foobar();
		:
|		//////////////// interface ////////////////
|		// function _contact(formId,
|		//	labelConfirm,labelSubmit,labelReset,labelReturn,
|		//	opMsgEltId,classInput,classConfirm,
|		//	opMsgInit,opMsgConfirm,opMsgComplete,
|		//	checkRequired,editRequiredMessage,
|		//	checkInvalid,editInvalidMessage)
|	
|		var labelConfirmEn = 'confirm';
|		var labelSubmitEn = 'submit';
|		coen = new _contact('fb-form-en',
|			labelConfirmEn,labelSubmitEn,'reset','return',
|			'op-msg','fb-input','fb-disabled',
|			'fill fields and push '+labelConfirmEn+' button',
|			'confirm and push '+labelSubmitEn+' button',
|			'submission completed',
|			undefined,
|			function (label) { return label+' is required'; },
|			undefined,
|			function (label) { return label+' is invalid'; });
|	coja._rw_controlNameOfVisitorEmail = 'nameEmailEn'; // fake
|		coen._contactExec();
|		coen.form.submit = function () // only for this sample code
|			 { alert('Submit interrupted.'); };
		:
	}

	window.onload = function () {
|	//	_fss.prototype._jlOffStartup = true; // to inactivate
|	//	_fss.prototype._jlHideJlogButtonOnStartup = true; // to hide
|		foobar.prototype._jlogSetUp(foobarInit);  // log for only foobar 
|	//	_fss.prototype._jlogSetUp(foobarInit);  // log for all
		foobarInit();
	}

Setting up server configuration parameters サーバ構成パラメタ設定

Notes.

_contact.php expects three types of configuration file; (1)contact, (2)referrer, (3)script correspondent files named “.contact”, “.foobar.contact”, “._contact.contact”, respectively. Be aware of that the first character of the filename must be “.”.
Usually the referrer correspndent configuration file, “.foobar.contact” in case of this sample, is recommended.
At least two parameters are required. $_contact['webmaster'] must be specified a real person who is resoponsible for sending this contact email. And $_contact['recipient'] is specified the recipient of this contact email.

註記

_contact.phpは３タイプの構成ファイル; (1)contact, (2)referrer, (3)script 対応ファイルを想定している。それぞれ名前は、“.contact”, “.foobar.contact”, “._contact.contact” である。ファイル名の先頭一文字が “.” であるのに注意。
通常は、referrer対応構成ファイル（この例では “.foobar.contact”）を推奨する。
少なくとも二つのパラメタが必要である。 $_contact['webmaster']は、当contactメールの送信に責任を持つ実際の人物を指定しなければいけない。そして、$_contact['recipient']は当contactメールの受信者を指定する。


	<?php


	################################################################
	# _gProlog logputs config parameters
	################################################################
	# $_gProlog['logputs'] = YourLoggingFunction ['_gProlog_log_std']
	# $_gProlog['level'] = IgnoreStdLogputsLowerThanThis [_GPROLOG_ERROR]
	#   $_gProlog['level'] = _GPROLOG_INSECURE; ## only insecure
	#   $_gProlog['level'] = _GPROLOG_ERROR; ## insecure+error
	#   $_gProlog['level'] = _GPROLOG_WARNING; ##  insecure+error+warning
	#   $_gProlog['level'] = _GPROLOG_VERBOSE; ## debug
	#   $_gProlog['level'] = _GPROLOG_VERY_VERBOSE; ## more info
	# $_gProlog['to-std'] = RecipientOfStdLogputs [webmaster]
	# $_gProlog['Yes_I_am_authorized_sending_webmaster'] = 1 # [undef]
	# $_gProlog['subject-std'] = AnyStringForSubject
	# $_gProlog['mb_send_mail'] = TRUE; ## use mb_send_mail() instead mail()


	################################################################
	# _contact config parameters
	################################################################
	# $_contact['error-message'] = YourErrorMessageFormat
	#
	# $_contact['email-error']['title'] = EmailErrorTitle
	# $_contact['email-error']['message'] = EmailErrorMessage
	#
	# $_contact['config-error']['title'] = ConfigErrorTitle
	# $_contact['config-error']['message'] = ConfigErrorMessage
	#
	# $_contact['request-completed']['title'] = requestCompletedTitle
	# $_contact['request-completed']['message'] = requestCompletedMessage
	#
	# #### Never change $_rw_* if you do not know what you do
	# $_rw_controlNameOfVisitorEmail = 'nameEmail';
	# $_rw_controlNameLang = 'lang';
	# $_rw_subject = 'subject';
	# $_rw_controlNameQueryCompleted = 'nameComp';
	#
	# $_contact['pageSubmitted'] = PageUrlHasFormSubmitted;
	# $_contact['pathThanks'] = ThanksPageUrlAfterSendingEmail;
|	 $_contact['webmaster'] = 'foo@do.main'; # webmaster's address
|	 $_contact['recipient'] = 'bar@my.site'; # recipient's address
	#
	# $_contact['editMessage'] = functionToEditMessage
	# $_contact['recipientIsAuthor'] = TRUE; ## useless


	?>

put the following files to the appropriate directory of your web site以下ファイルをサイトの該当ディレクトリに転送
- _fss.js, _fss.html
- _gProlog
- _jlog.js
- _contact.js
- _contact.php
- gpl.txt, dlgpl.php
- .foobar.contact
- foobar.js
- foobar.html