WEBサイト上で料金などの計算をさせることができるWordpressの無料プラグイン
Calculated Fields Form　のレイアウトが崩れていることに気が付いて、復旧した工程を説明させていただきます。

---

今までは、Calculated Fields Formのスタイルは、テーマファイルエディターのスタイルシートで指定していましたが
ある日突然スタイルが効かなくなりました。

デベロッパーツールで検証を行っても、指定されているセレクタが変更されてもいなく
!importantも効きません。
プラグインのスタイルは、外観＞カスタマイズ＞CSSで設定できることもあるのですが、それもダメでした。

色々調べるうちに、プラグイン内のスタイル設定に該当CSSを移動させることで解決しました。

やったこと

まず、「もし、WEBサイト上でフォームが読み込まれないは、iframe属性を1に設定してください」とプラグインの上部にアラートが出ていたので、こちらを設定してみたら、フォーム要素の横並びや、罫線などは表示されました。
しかし、指定してあるマージンやフォントサイズは反映されません。

プラグイン内でCSSを指定できる場所を探しました

使用しているフォームの「Build」を押下

「Form　Setting」＞「Advanced Settings」の下の方「Customize Form Design」

に、これまで使用していたスタイルを丸ごとコピペして「Save Changes」を押下したらフォームのスタイルが元に戻っていることを確認できました。

「iframe属性を1」にする件は必要だったのかどうか検証していませんが、今後の表示崩れや多くの環境で正しく表示されるためにそのままで設置。

テーマファイルのcssは、効いていないので削除しました。