jotform01

Adobe Muse CCを使ったホームページ制作

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)前のページ

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

関連記事

  1. musexpress3_18

    Adobe Muse CCを使ったホームページ制作

    Dynamic Menuの設置(MusexPress3)

    『Adobe Muse』と『MusexPress3』を組み合わせること…

  2. sidebar-connect02

    Adobe Muse CCを使ったホームページ制作

    強力サイドバーナビゲーションシステム(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  3. musexpress09

    Adobe Muse CCを使ったホームページ制作

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

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

  4. animated-rollovers

    Adobe Muse CCを使ったホームページ制作

    イメージロールオーバー(Adobe Muse)

    サードパーティウィジェット「Animated Image Rollov…

  5. simple-and-sweet-on-scroll-animations

    Adobe Muse CCを使ったホームページ制作

    26種類のスクロールアニメーション(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  6. photo-filter01

    Adobe Muse CCを使ったホームページ制作

    マウスオーバー時のフォトフィルター(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  1. filmora-009

    Filmora

    SF映画風にタイトルを演出してみよう!(Filmora9)
  2. animated-numbers-01

    Adobe Muse CCを使ったホームページ制作

    数字のアニメーションが目を引きます(Adobe Muse)
  3. slanted-panels-01

    Adobe Muse CCを使ったホームページ制作

    斜めのラインとスクロール効果を使う流行のデザインも簡単に表現可能(Adobe M…
  4. ae-img001

    After Effects

    MotionElementsの素材を使った習作001
  5. eyecatch-200421

    After Effects

    パラパラと文字が上から落ちてくるモーショングラフィックス(After Effec…
PAGE TOP