WPFormsの初期値のテキストを改行させる方法

WPFormsの初期値のテキストを改行させたい場合、WPFormsの画面ではEnterキー等を押しても改行されません。

本記事では、JavaScriptのコードを使って改行させる方法を紹介していきます。

高度な設定からCSSクラスを追加

WPFormsの改行させたい箇所に、高度な設定 ⇒ CSSクラスの項目に『wpforms-line_break』クラスをそれぞれ追加

JavaScriptコードを追加

Jsコードを追加する場所はお任せしますが、例えば固定ページ ⇒ カスタムJSに追加する場合

↓のコードを追加します。

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elements = document.querySelectorAll('.wpforms-line_break textarea');
      elements.forEach(function(element) {
          var contentText = element.value;
          var newText = contentText.replace(/【/g, '\n【'); // 改行文字を追加
          element.value = newText;
      });
  });
</script>

このJsコードは【 の直前で改行させるというコードになっています。

そのため、下記の例のように綺麗に改行されるようになります。

例）【名前】彩雲【フリガナ】サイウン【役職】管理者【部署】制作部

↓

例）
【名前】彩雲
【フリガナ】サイウン
【役職】管理者
【部署】制作部

以上がWPFormsの初期値のテキストを改行させる方法になります。

いろいろと応用が出来るかと思いますので是非お好きなように調整して貰えればと思っています！