*

ロリポップにメールフォームプロ4を

公開日: : 最終更新日:2013/07/18 WEBデザイン

フォーム制作の依頼をいただき、その制作過程でいろいろあった問題などを書き残してみます。
(気付いたことをなるべく沢山残したいので、そのときそのとき追記しています)

まず、今まではメールフォームプロ3を使っていましたが、どうも4にバージョンアップしているようで、しかも、かなり使いやすくなったように紹介されていました。

3を入れるときも何だかあれこれ迷っているうちにできてしまった記憶があるので、今回は制作から動作確認までしっかり覚えたいと思い、新しい4で制作しています。

まず、失敗したのが、いきなりHTMLの編集から始めてしまったことでしょうか。。。項目など指示があるのでフォームの周りから整えました。で、いざアップするとCGIが動いていないようで・・・。

ローカルサーバーにしても動いているのかどうかもよく分からない。前に設置した3のファイルなど調べるも特に目立った違いを見つけられない。さてどうしたものか・・・。

推奨されるパーミッションに手作業で変えてみるも、時間の無駄だった。

とりあえず初心に戻って、全部消して、解凍したファイル群をそのままアップロード!

このときのポイントがFTPソフトに自動でアップロードするファイルの属性を変更する設定をしておくことです。私はFFFTPを使っていますが、設定方法はオプション>環境設定でウィンドウが出てきます。その転送3タブにファイル名=*.cgi 属性700 を追加します。
この属性はロリポップ推奨の属性です。メールフォームプロ推奨の属性とは異なりますけど、やはりサーバーに合わせたほうが良いのかな?と思いながら作業していました。
すると上手くいって、ちゃんとCGI動いてますよのメッセージが出てくれました。

ロリポップのCGIに関する説明ページ

http://lolipop.jp/manual/hp/cgi/

まだ解凍したばかりの状態なので、実際に送信してしまうと元々の制作者・シンクグラフィカ和田さまへ情報が届き、ご迷惑になるので注意しましょう。

これからHTMLとCGIの編集にとりかかります。

「CGI編集」

どうもconfig.cgiの編集に失敗しているため、CGIが動いていないようです。
なにも改変していないconnfigを入れると“mailformpro.cgi は正常に動作しています。”のメッセージが現れますね。。。

先ほどの修正したファイルと元ファイルを見比べましたが、どこが間違っているのか発見できず、結局、元ファイルを最初と同じように編集したら解決しました。TeraPad使っていますが、改行や文字コードもLFとUTF-8で問題なかったですし。。。

デフォルトの設定では赤い背景で“mailformpro.cgi は正常に動作しています。”が表示されており、これを消すためには、
config.cgiのアドオン(push @AddOns,’OperationCheck.js’; ## 動作チェック)を#でコメントアウトします。

とにかく、ここからHTML編集にとりかかります。

HTMLは<form>~</form>を入れて、項目の増減と編集をし、CSSで整える流れです。ここは通常の制作なので省略しますが、必須の設定はinputのなかのrequired=”required”で管理していることだけ覚えていればOKでしょうか。

それよりも、完成したと思ったあとのthanksページ。この編集で気をつけるのが、<script type=”text/javascript” id=”mfpjs” src=”mailformpro/mailformpro.cgi” charset=”UTF-8″></script>です。これがthanks.htmlにも記述されていると、「mailformproが定義されていません」というエラーメッセージが出てきて、正常に動作しないようです。お気をつけください。

関連記事

no image

このブログのテーマを変更 stinger3ver20130925

おはようございます。 最近、SEOについて調べる機会が多く、WordPressでも何か良いテーマは

記事を読む

no image

ヤフオク! 商品説明のところに、画像を追加表示させる方法

ヤフオク!商品説明に外部サイトの画像を表示させる 基本は3枚の画像だけしか登録できないのですが、も

記事を読む

no image

FC2ブログのテンプレートカスタマイズで・・・

こんにちは。 毎日暑い日が続き、四六時中暑いって言ってるカエルクリエイトです。 夜なら作業もまし

記事を読む

no image

EC-CUBEにjavascriptを。

通販サイトをEC-CUBEで運営しています。 デフォルトではスムーススクロールができませんが、簡単

記事を読む

no image

コメントの書き方

HTMLの場合 <!--ここにコメントを書きます--> <!--ここに

記事を読む

no image

EC-CUBE 商品詳細ページの画像を大きくしたい

こんにちは。EC-CUBEでスッキリしたことをメモします。もし同じことで悩んでこのページに辿り着いた

記事を読む

no image

サイトリニューアルしました

こんにちは。カエルクリエイトです。 少し前にデジハリの方にこのページを見ていただいて、率直な感

記事を読む

no image

ドメイン取得からサイト公開まで

「なんたらかんたらドットコム」という名前のホームページを持ちたい! 初めての方でもカンタンにホ

記事を読む

no image

EC-CUBE 大量のカテゴリを一気に登録 “カテゴリ登録CSV”

こんにちは。無料で誰もが簡単にネットショップを立ち上げ可能というツール、EC-CUBEをこつこつカス

記事を読む

no image

プラグインAll in One SEO の「Noindex Settings」

こんにちは。 WordPressのSEOに関するプラグインにAll in One SEOという有名

記事を読む

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

no image
Fireworks CS5.1 テキスト編集ができなくなった

Fireworksメインでデザインをしています。 なぜかテキスト

no image
EC-CUBE スマホ 商品詳細のポップアップ画像がはみ出してしまう

スマホ 商品詳細 ポップアッップ画像がはみ出てしまう。 fire

no image
ドメイン取得からサイト公開まで

「なんたらかんたらドットコム」という名前のホームページを持ちたい!

no image
EC-CUBE スマホサイトのページ内リンク

EC-CUBEだけではないのですが、スマホサイトではページ内リンクが上

no image
EC-CUBE 入力内容のご確認の文言編集

決済モジュールやプラグインの支払い方法が選択されていると、 カートの

→もっと見る

PAGE TOP ↑