menu

Museでも高機能なフォームを(Adobe Muse CC)

【Adobe Muse】の機能を利用したコンテンツを紹介しています。
サードパーティウィジェット「Jotform」Widgetを利用すると、
Jotformというサービスと連携することで高機能のフォームを簡単に掲載できるようになります。
Jotformは、多段階フォーム、数千のテンプレート、および多数のカスタムオプションを提供しています。
※一定条件まではフリーで使用可能です。

■JOTFORMのセットアップ

1.jotform.comでアカウントを作成。
2.ダッシュボードの左上隅にある[フォームを作成]ボタンをクリックします。
3.フォーム構築プロセスを進める。いくつかのフォームタイプ、それに続くテーマなどがあり、利用可能なフォームオプションは非常に広範囲です。
フォームが完成したら、フォームIDを取得する必要があります。
4。フォームIDをコピーしておきます。

■MUSEのセットアップ

1.ウィジェットをライブラリからドラッグし、デザインモードでプロジェクトにドロップします。
2.ウィジェット自体の配置によって、サイト上のJotformフォームの位置が決まります。
3.必要に応じてウィジェットコンテナのサイズを変更します。
4.取得したフォームIDをウィジェットに貼り付けます。
フォームへの変更はJotform.comで行うことができ、公開後にサイトに自動的に反映されます。

サンプルでは、1ページ目にシンプルなタイプ。2ページ目にカード型のタイプです。

▽サンプル
live-preview

▷「Jotform」Widgetについての詳細はコチラ(外部サイト)
https://www.muse-themes.com/products/jotform

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

transitions_img01トランジションの設定(webflow)

multiscroll01左右の画面を逆スクロールで1枚に合成(Adobe Muse CC)

関連記事

  1. muse-samplesite03-03

    Animate CC+Muse CCでスクロール効果を使ったアニ…

    iMac Proの紹介ページにあるブラウザのスクロールに合わせて横向きのiMacが正面を向くアニ…

  2. fullscreen-split-slider01

    フルスクリーン分割スライダー(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  3. musexpress2_0-13

    「Login Areaのインストール」MuseとWordPres…

    Adobe MuseとWordPressを連携させたサイトの制作に挑戦。「Login Are…

  4. media-pro-gallery-2-01_01

    複数レイアウトからライトボックスに展開可能のメディアギャラリー(…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  5. trace-animator

    トレースアニメーション(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  6. animated-buttons

    ボタンにアニメーションを付けてワンポイント(Adobe Muse…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  7. animate-sample07

    ステージ上を水平方向にアニメーション(Adobe Animate…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

  8. musexpress09

    MuseとWordPressの連携(その3/Adobe Muse…

    Adobe MuseとWordPressを連携させたサイトの制作に挑戦。「MusexPress」…

PAGE TOP