*

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

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

Message

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

PAGE TOP ↑