sigmanode’s blog

まちがってたら、おしえてください

【WordPress】Gravity Forms で確認画面を表示する方法

Gravity Formsは お問い合わせフォームを作ることができる WordPressの有料のプラグインだ。HTMLを触ることなく、フォームをドラッグ&ドロップで作成することができるフォームビルダーの機能がある。

Gravity Forms に確認画面が出るようにしたかったのでが、具体的な手順が書かれた日本語の記事がほぼなくて、ちょっと苦労したので、Gravity Forms で確認画面を表示する方法をここに書き記す。

www.gravityforms.com

最短の手順で、Gravity Forms に確認画面を設置するには以下の通りだ。

  1. Gravity Forms All Fields Template をインストール、有効化する
  2. 確認画面のテンプレートを /wp-content/themes/{your-theme}/gravity-forms/all-fields.php に配置する
  3. Gravity Pre-submission Confirmation をインストール、有効化する
  4. フォームの設定画面で、フォームの最後に、改ページ、HTMLブロック、HTMLブロックのコンテンツに {all_fields} を記入する

Gravity Forms All Fields Templateのインストール

Gravity Forms All Fields Templateは、WordPressプラグイン公式ディレクトリにはないので、リンク先でダウンロードして、アップロードする必要がある。

gravitywiz.com

確認画面のテンプレートを設置

テンプレートのサンプルが Getting Startの step2 のリンクからダウンロードできる。そのまま使っても問題ないし、自分で作成したものも使うことができる。テンプレートの作成には、PHP, HTML, CSS の知識を必要とする。

確認画面のテンプレートは、有効化しているテーマディレクトリの直下に all-fields.php を置くのではなく、有効化しているテーマディレクトリの直下のgravity-formsディレクトリの下に all-fields.php を置く。

/wp-content/themes/your-theme/gravity-forms/all-fields.php

最初、直下に置いてしまっていたので表示されなくて、なんで?と思っていたら、、サイトにも "Add the folder to your active theme’s root directory(有効化したテーマのルートディレクトリにフォルダーを追加して)"って書いているし、gw-gravity-forms-all-fields-template.php のコメントにちゃんと書いてあった。ドキュメントはよく読もう。

all-fields.php をカスタマイズすることで、サイトに合ったデザインに変更できる。CSSが直書きになっているのは、HTMLメールでもスタイルが適用されるようにするためのようだ。

Gravity Pre-submission Confirmation のインストール

Gravity Pre-submission Confirmationをインストールすることで、自分が設置した確認画面用のテンプレートが表示されるようになる。 Gravity Pre-submission Confirmationは、ダッシュボードから検索してインストールできる。特に、何か設定する必要はない。

ja.wordpress.org

Gravity Forms で確認画面を設定

確認画面については、Gravity Forms のフォーム編集画面での設定が必要となる。 フォームの最後に、改ページ、HTMLブロック、HTMLブロックのコンテンツに {all_fields} を記入する。

Gravity Formsに確認画面を出すための設定
Gravity Formsに確認画面を出すための設定

まとめ

Gravity Forms が有料プラグインということで、日本語の記事がなくて「どうやるんじゃい!?!?!」ってなっていたので、悩んでいる方がいればお役に立てば良いと思う。 {all_fields} をカスタマイズすることで、色々と表示できるようだけれど、それはまた別のお話。

それでは、さっさと仕事を終わらせて、人生を楽しもう。

文章の中の漢字だけ任意のタグで囲むJavaScript

何の必要があって?と思わないでもないけど、やってみたかっただけである。後悔はしてない。

function markUpKanji( selector, before, after ){
  return function(){
    var obj = document.querySelectorAll(selector);

    for(var i = 0; i < obj.length; i++ ){
      var str      = obj[i].innerHTML,
          length   = str.length,
          markedUp = '',
          flag     = false;

      for( var j = 0; j < length; j++ ){
        // 正規表現 http://tama-san.com/?p=196
        if( str[j].match(/^(?:[々〇〻\u3400-\u9FFF\uF900-\uFAFF]|[\uD840-\uD87F][\uDC00-\uDFFF ])+$/) ){
          if( flag == false ){
            markedUp += before + str[j];
            flag = true;
          } else {
            markedUp += str[j];
          }
        } else {
          if( flag == false ){
            markedUp += str[j];
          } else {
            markedUp += after + str[j];
            flag = false;
          }
        }
      }
      obj[i].innerHTML = markedUp;
    }
  }
}

window.onload = markUpKanji( '#hoge, .bar', '<span class="biggerKanji">', '</span>');

CSS

span.biggerKanji {
    font-size: 26px;
}

HTML

<p id="hoge">こんにちは、今日はいいお天気ですね。</p>
<p class="bar">明日は雪が降るそうです。<br>どうぞお体にお気を付けください。</p>
<p class="bar">寒いのは嫌です。buruburu</p>

こんな感じで CSS を指定しておけば、文章の中の漢字だけが大きくなったりする。