クリックイベントでお問い合わせフォームを表示させる方法

 

こんにちは、keiです。

 

JavaScriptを使ってボタンを押下時にフォームが出現するように実装してみました。

 

実装してみてわかったことを備忘録として簡単にまとめておこうと思います。

 

[toc]

 

HTML

 

HTMLは、ボタンとフォームを作成します。

 

 HTML
<button id="button">お問い合わせボタン</button>
<form action="" id="form">
<p><textarea id="textarea" name="textarea" cols=50 rows=10 maxlength="500"></textarea></p>
<p><input id="submit" type="submit" value="送信"></p>
</form>

 

また、<textarea>タグで、テキストの入力ボックスの大きさを”行数””文字数”でそれぞれ指定しています。

 

 

数値を変更することで、幅・高さを調整できます。

 

CSS

 

 CSS
#form {
display: none;
}

 

CSSファイルに「display:none;」を追加して、デフォルトではフォームを非表示にします。

 

ボタンを押した際にJavaScriptでCSSを「表示」に書き替えることで、ボタンクリック時に表示されるようにします。

 

JavaScript

 

JavaScriptは、ボタンがクリックされた時にフォームが表示する機能を作成します。

 

 JavaScript
var button = document.getElementById('button');
var form = document.getElementById('form');
button.addEventListener('click', function() {
        form.style.display = 'block';
    });

 

「click」のイベントを用いてます。第1引数には、イベントタイプを示す文字列「'click'」。

 

第2引数には無名関数「function()」を指定して、「{}」の中でフォームを表示するためのスタイル変更の処理を記述しています。