sigmanode’s blog

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

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 を指定しておけば、文章の中の漢字だけが大きくなったりする。

window.onload に引数をつけた関数を渡したい

関数を返す関数を作る。

function myFunction( name ){
  return function(){
    alert( 'こんにちは、' + name + 'さん!' );
  }
}
window.onload = myFunction( 'はてな' );