*

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

htmlの書き方について。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

Message

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

PAGE TOP ↑