*

jquryで問い合わせフォームのデザインを作ってみた。

公開日: : css3, html5, jquery

今回は、jquryで問い合わせフォームを作ってみました。

 

問い合わせフォームのデザインを調べてみると、いろいろありましたが、

今回は、テキストにうっすらと文字を出すという問い合わせフォームを作ってみました。

 

問い合わせフォームは、サイトにとって重要なページとなると思います。

他のサイトと差がつくページだと思うので、ぜひ力の入れたいページですね。

まずこちらを見てください。

デモ

わかりますか?

boxの中に、うっすらとテキストが入っていることが。

これは、すごく便利だと思います。

入力の際に何を入力していいのかわらかないときなどがあると思います。

この機能は、目立った感じはしないのですがとても親切なサイトだと思います。

 

以下に設置方法を記載します。

今回は1つのscriptファイルを使用します。

・前準備

htmlファイルのbodyの中にscriptを埋め込んでください。

<body>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>

< script type=’text/javascript’ src=’js/jquery.updnWatermark.js’></script>

</body>

 

cssファイル以下の1つを使用します。

htmlファイルのheadの中にcssを指定ください。

<head>

<link rel=”stylesheet” type=”text/css” href=”css/contact.css”>

</head>

※指定しているところにファイルがきちんとあるか、確認してください。

ファイルは最後の所にダウンロードできるようになっています。

その後、以下のようなソースです。

————————————————————————————————————-

html(index.htmlのファイル)
<div id=”wrapper”>
<form action=”#”>
<div id=”taitoru”>お問い合わせフォーム</div>
<dl id=”commentForm”>
<dt><input type=”text” id=”author” name=”お名前” title=”name:” /></dt>
<dt><input  type=”text” id=”email” name=”email” value=”” title=”e-mail:” /></dt>
<dt><textarea id=”text” name=”text” title=”message:”></textarea></dt>
</dl>
<div id=”soushin”>
<input type=”submit” value=” 送信 ” />
<input type=”reset” value=”クリア” />
</div><!–soushin–>
</form>
</div><!–wrapper–>

————————————————————————————————————-

css(contact.cssのファイル)

/* 大枠設定 */

#wrapper{  width:530px;  margin:0 auto;  position:relative;  background-color: #c0c0c0; }

/* タイトル設定 */

#taitoru{  width:100%;  margin:0 auto;  text-align: center; }

/* コメントの枠設定 */

#commentForm {  padding: 0 2px; }

/* 各コメント枠の幅設定 */

#commentForm dt {  font-weight: bold;  margin-bottom: 10px; }

/* NAME:,E-MAIL,の部分設定 */

#commentForm input {  width: 360px;  border: 1px solid #CCC;  padding: 2px;  background-color: #3c3f43;         color:#FFF; }

/* MESSAGE:,の部分設定 */

#commentForm textarea {  width: 520px;  height: 120px;  border: 1px solid #CCC;  padding: 2px;  overflow:auto;  background-color: #3c3f43;         color:#FFF; }

/* NAME:,E-MAIL:,MESSAGE:,のテキスト設定 */

.updnWatermark {  color: #999;  padding: 2px; }

/* 送信、クリアの枠設定 */

#soushin{  width:100%;  margin:0 auto;  position:relative; }

#soushin input{  width:100px;  margin:0 auto;  position:relative;         background-color:rgba(0,0,0,0);         color:#FFF;  border:none;  cursor: pointer;  font-size:20px; }

#soushin input:hover{         color:#e84237;  border:none;  cursor: pointer; }

————————————————————————————————————-

script(今回は、書くところが少ないので、head内の記載しました。

jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});

————————————————————————————————————-

以上で問い合わせフォームの設置ができます。

わかりにくいところがありましたら、こちらも参考にしてみてください。

jQuery フォームにテキストをうっすらと出すプラグイン

自分もこのサイトを参考にしました。

 

 

今回の1つのファイルをUPしときましたので、

よかったら使ってください。

contact

————————————————————————————————————-

補足=テキストな色などもデザインの変更ができますので

色だけでも、変更すればイメージをだいぶ変わってくると思います。

また、今回は記載しませんでしたが、送信ボタンのカスタマイズもすればまた

ひとつ雰囲気が変わると思います。

送信ボタンのカスタマイズは、また次回にでも書きたいと思います。


関連記事

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑