• 管理人へのメール

  • crossbreed tumblr.  ※画像をクリックして拡大できます tumblr-タンブラーって何?tumblrの始め方
    最新記事ヘッドライン (※画像をクリックして拡大できます)
    はてなブログ始めました この記事を読む → はてなブログ始めました http://crossbreed.tv/archives/201709011610.php お前らってどうやって嫌な事乗り越えてるの? この記事を読む → お前らってどうやって嫌な事乗り越えてるの? http://crossbreed.tv/archives/201501150028.php キモ美しい街並みを集めてみたよ(Googleマップ付) この記事を読む → キモ美しい街並みを集めてみたよ(Googleマップ付) http://crossbreed.tv/archives/201501101258.php みんなのビヤホールCMがリア充過ぎる件 この記事を読む → みんなのビヤホールCMがリア充過ぎる件 http://crossbreed.tv/archives/201501101122.php 【DJMIX】Bar KNAT FINAL MIX この記事を読む → 【DJMIX】Bar KNAT FINAL MIX http://crossbreed.tv/archives/201411300014.php
    同カテゴリ内最新記事ヘッドライン (※画像をクリックして拡大できます)
    「姪っ子が嫁に行った」スレ この記事を読む → 「姪っ子が嫁に行った」スレ http://crossbreed.tv/archives/201104042221.php Ajaxを使ったクールなメールフォームを設置する方法 この記事を読む → Ajaxを使ったクールなメールフォームを設置する方法 http://crossbreed.tv/archives/200901122305.php ネタ投稿掲示板を始める事にしたよ! この記事を読む → ネタ投稿掲示板を始める事にしたよ! http://crossbreed.tv/archives/200711291245.php web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1 この記事を読む → web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1 http://crossbreed.tv/archives/200607190117.php トラックバックスパムフィルター「BanNoReferTb」は凄いです この記事を読む → トラックバックスパムフィルター「BanNoReferTb」は凄いです http://crossbreed.tv/archives/200603261315.php

    1月
    12
    2009

    Ajaxを使ったクールなメールフォームを設置する方法

    カテゴリ:blogカスタマイズ |

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (1票, 平均: 5.00)
    Loading...


    新ブログ始めました!
    http://crossbreed.hatenablog.com

    2009-01-12_2253.png 先日の裏クロスブリードの携帯対応化に引き続き、カッコイイメールフォームを実装してみました。
    こんなのです。(実際に下のリンクよりメールが送信できます)
    AjaxMail:Ajaxを活用したフリーPHPメールフォーム
    特徴は
    (1) ewebのPHPメールフォーム にカスタマイズを加え
    (2) Kawa.netのAjaxZip2.0 住所検索機能を付加し
    (3) AdobeSpry で項目をチェックできるようにし
    (4) Lightview でインタラクティブなアクションにしました
    ここでは住所は必要なかったので、その除去方法もふまえて書いていきます。
    1.ダウンロード・解凍
    まず上記サイトよりスクリプトをダウンロードします。
    「ダウンロード(ver1.2)より」の部分です。設置予定のサイトの文字コードのものをダウンロードです。
    文字コードがわからない場合はIEの場合、
    サイトの空白で右クリック→エンコード
    でチェックが入っているものがサイトの文字コードになります。
    ダウンロードしたら即座に解凍です。
    2.スクリプト設定
    解凍後のフォルダ内の「sendmail.php」をテキストエディタで開きます。メモ帳は使ってはいけません。windowsであればUnEditorがオススメです。
    $to = ・・・・送信元メールアドレス
    $eles = ・・・必須項目チェック
    基本的にはこの二つだけで良いかと思います。住所は必要なかったので必須項目からはずしています。
    次にチェック項目のカスタマイズです。「check.js」をテキストエディタで開きます。
    emailを任意入力にしたかったので、3行目を削除しました。
    設定はこれだけです。
    3.項目のカスタマイズ
    ここでは郵便番号と住所を削除したいので、「ajaxmail/index.html」を編集します。
    34行目~40行目の郵便番号と住所の記述を削除です。これだけ。
    入力項目を増やしたい場合は
    <p id="checkText3">
    などを増やして項目を作ります。
    4.アップロード
    FTPソフトで設定済みファイルをアップロードします。sample.phpは必要ないのでアップロードしなくても良いです。PHPはパーミッションとか気にしないでいいのが便利ですね。
    ここではホームの下にそのままアップロードしたものとします。CSSやjsフォルダが既に存在する場合は注意が必要です。
    5.html内編集(スクリプト宣言)
    設置したいhtmlの編集を行います。headタグの中、bodyタグの上です。。movabletypeやwordpressであれば、ヘッダー(header)の部分になるかと思います。以下のスクリプトを追加します。
    <link rel="stylesheet" type="text/css" href="http://xxx.com/css/lightview.css" />

    <script type="text/javascript" src="http://xxx.com/js/protoculous-effects-packer.js"></script>

    <script type="text/javascript" src="http://xxx.com/js/lightview.js"></script>
    大体こんなカンジですね。「xxx.com」の部分をお使いのアドレスに変更するといいと思います。初めての方は大体このあたりでつまずくんですよね。なかなかうまく説明できないです。
    6.メールフォーム呼び出しリンク(ボタン)設置
    ここまで来たらあと少しです。
    <a href=’http://xxx.com/ajaxmail/index.html’ rel=’iframe’ title=’メール送信システム :: 当サイトに関するご意見ご感想、面白ネタの投稿を心からお待ちしております。<br />なお、投稿内容に関してはサイト上に反映されることはありません。 :: width: 450, height: 450′ class=’lightview’ >メールフォーム</a>
    こんなカンジで。テキトーに変更して見て下さい。「::」で区切られたテキストで、フォームの表示を制御します。
    「(タイトル)::(文章)::(サイズ)」
    サイズの部分、width、heightはフォームの幅、高さです。
    また、リンクではなくボタン(風)にしたい場合のボタン画像素材をのせておきます。imgタグで差し込んで使ってください。
    ちなみに、僕が改良したindex.htmlをおいておきます。
    ajaxmailカスタマイズファイル(ZIP形式)
    これで完了です。
    メールフォームからいつでも僕に連絡が取れますよ(ニヤケながら


    日々の生活にhappyをプラスする|ハピタスサイフもココロもハッピーに!ちょびリッチ

    この記事を読んで頂きありがとうございます。
    コメント欄も設けておりますが、
    よかったらtwitterやfacebookなどでつぶやいたりシェアして頂けると嬉しいです。

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (1票, 平均: 5.00)
    Loading...

    Written by ayu in: blogカスタマイズ |

    4 Comments »

    • KEITH より:

      ayuさん、初めまして。
      いつも楽しく拝見させて頂いています。
      今回紹介されていたこのAjaxを使ったメールフォームの記事を読み、実際に設置してみたのですが
      これってもしかしてブラウザや設置先サーバによってはキチンと動作しないんでしょうか?
      確認できた限りでは、Win Firefox3.0.5では正しく機能するのですが、Win IE7ではフォームが表示されずにクラッシュしてしまいました。
      また、別のサーバではFirefoxでフォームの表示はされるのですが、
      確認画面で
      Forbidden
      You don’t have permission to access /ajaxmail/sendmail.php on this server.
      と表示されてしまいます。
      一番の原因は私の無知によるところだと思いますが…初コメントが質問というカタチになってしまい申し訳ありません。(^^;

    • 管理人ayu より:

      >KEITHさん
      どうもはじめまして。いつも覗いてくださっててありがとうございます。
      firefoxで表示されて、IEじゃダメってのが不思議ですね。もしかしたらキャッシュだけの原因ということも・・・
      phpはサーバによってパーミッションの設定が違うという可能性もありますので、なんとも言えないところです。
      よかったら、メールフォームより(笑)連絡くださいです。

    • KEITH より:

      お返事ありがとうございます。
      さっそく、メールフォームから送らせて頂きました(笑)。
      キャッシュはクリアしてみましたが動作は変わらなかったので、
      私の設置に問題がありそうです(苦笑)。

    • よろしくおねがいします。

    RSS feed for comments on this post. TrackBack URL


    コメントして下さい

    同一カテゴリ内記事

    最近買ったモノ


    Template: TheBuckmaker.com Blog Themes | Website Hosting, Gesundheitspapst