フォームの「ページ設定」で個別URLを設定する

フォームを作成後、設定ページのタブのページ設定をクリックすると、以下の項目が表示されます。

• 個別URL：利用するにチェックを入れると、該当のフォームにURLをもたせることができます。
  ※ 個別URLでフォームを利用する場合、「基本設定」タブの「サイトURL」にはフォームの個別URLのドメイン部分を入力してください。
  
• ファイル名：実際に表示させるページのファイル名を設定します。
• カスタムCSS：フォーム内のCSSは基本設定のカスタムCSSで指定しますが、その外側の見た目をCSSでコントロールすることができます。

設定し保存すると、右上の確認リンクから実際のページを表示することができます。

カスタムCSSによる見た目のカスタマイズ

フォームの標準のCSSは以下になっているので、カスタムCSSではそれを上書きするかたちで指定します。

body {
  margin: 0;
}

.banner {
  height: 278px;
  background: #316a8b;
}

.content {
  max-width: 640px;
  margin: -100px auto 0;
}

.form-title {
  color: white;
  margin: 0 10px 5px;
  font-size: 2em;
}

@media (max-width: 640px) {
  .banner {
    height: 122px;
  }
  .form-title {
    font-size: 1.5em;
  }
}

印象を変えるのは.banner の background: #316a8b の値を変えるとヘッダーの色が変わるので効果的です。

フォームの作成

フォームの基本設定や項目については以下のマニュアルや活用ブログの記事をご覧ください。

• マニュアル | MovableType.net フォーム
• MovableType.netフォームアーカイブ - MovableType.net 活用ブログ