お問い合わせフォーム用のWordPressプラグインTrust Formの設定！

コメント/トラックバック （9件）

トラックバック用URL：

この投稿のコメント・トラックバックRSS

1. 

   Trust Formで探してこちらに来ました。
   これデフォルトで作るとデザインがいまいち悪いですよね。CSSエディタを触りましたが正直よくわからなくて。
   そこでお願いなのですが、シンプルなデザインでいいのでコピペで使えるCSSエディタのテンプレートを作っていただけないでしょうか？

   私にはこれが限界でした。

   div.contact-form {
   height: auto;
   width:350px;
   text-align:left;
   }

   突然で申し訳ありませんが、もし可能であればよろしくお願いいたします。

   投稿日時：

   2014.10.1 ＠ 7:33 PM

   投稿者：

   りん

2. 

   りん様

   コメント、有難うございます！
   当サイトのCSSを以下に貼り付けておきますので、一度、試してみてください。
   独自に設定しているCSSによって設定は変わってくると思います。

   /*——————————————————————-
   　お問い合わせ
   ——————————————————————–*/
   #trust-form table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #ddd5c4;
   padding: 10px 5px 10px 5px;
   }

   #trust-form table th {
   width: 30%;
   border: 1px solid #bbbbbb;
   padding: 10px 10px 10px 10px;
   background: #fafafa repeat left top;
   font-weight: normal;
   vertical-align: top;
   text-align: left;
   }

   #trust-form table td {
   width: 70%;
   border: 1px solid #bbbbbb;
   padding: 10px 10px 10px 10px;
   background: #ffffff;
   }

   #trust-form table td a {
   color: #716044;
   text-decoration: underline;
   background: #ffffff;
   }

   #trust-form table td a:hover {
   color: #d60208;
   text-decoration: none;
   background: #ffffff;
   }

   #trust-form table input[type="text"], #trust-form table select, #trust-form table textarea {
   border: 1px solid #dddddd;
   padding: 8px;
   border-radius: 5px;
   }

   /*————————————-
   送信確認ボタン
   ————————————–*/
   .check_btn, .submit_btn, .return_top, #trust-form input[type=submit][name="send-to-confirm"], #trust-form input[type=submit][name="send-to-finish"] {
   display: block;
   width: 200px;
   text-align: center;
   background: #b8993a;
   background: -webkit-gradient(linear, left top, left bottom, from(#b8993a), to(#8f772e));
   background: -moz-linear-gradient(top, #b8993a, #8f772e);
   border-radius: 5px;
   border: none;
   box-shadow: 0 0 5px #cec4aa;
   padding: 10px;
   text-align: center;
   color: #ffffff;
   font-weight: bold;
   text-shadow: 1px 1px 0 #aaaaaa;
   margin: 30px auto;
   cursor: pointer;
   }

   #trust-form p#confirm-button input[type=submit][name="return-to-input"] {
   margin-left: 90px;
   }

   #trust-form input[type=submit][name="send-to-finish"], #trust-form input[type=submit][name="return-to-input"] {
   float: left;
   }

   #trust-form p#confirm-button input[type=submit][name="return-to-input"] {
   margin-right: 10px;
   }

   p.btn {
   width: 200px;
   padding-left: 205px;
   }

   p.btn a {
   text-decoration: none;
   border: none;
   }

   .check_btn:hover, .submit_btn:hover, .return_top:hover, .return:hover, #trust-form input[type=submit]:hover {
   text-decoration: none;
   filter: alpha(opacity=65);
   -moz-opacity: 0.65;
   opacity: 0.65;
   }

   /*————————————-
   戻るボタン
   ————————————–*/
   .return, #trust-form input[type=submit][name="return-to-input"] {
   display: block;
   width: 200px;
   text-align: center;
   background: #be161a;
   background: -webkit-gradient(linear, left top, left bottom, from(#ab0205), to(#be161a));
   background: -moz-linear-gradient(top, #ab0205, #be161a);
   border-radius: 5px;
   box-shadow: 0 0 5px #cec4aa;
   color: #ffffff;
   padding: 10px;
   text-align: center;
   font-weight: bold;
   text-shadow: 1px 1px 0 #aaaaaa;
   margin: 30px auto;
   border: none;
   cursor: pointer;
   }

   投稿日時：

   2014.10.2 ＠ 11:00 AM

   投稿者：

   ad-wptech

3. 

   ありがとうございます！シンプルですごくいいです。このまんま使わせていただきます(笑)
   wptouchでもうまく動きました。ありがとうございました！！（＾－＾）

   投稿日時：

   2014.10.2 ＠ 8:43 PM

   投稿者：

   りん

4. 

   りん様

   上手くいって良かったです。
   今度とも宜しくお願いします。

   投稿日時：

   2014.10.2 ＠ 8:57 PM

   投稿者：

   ad-wptech

5. 

   こんにちは。
   先日はCSSありがとうございました！
   しばらく使ったのですが、スマホでwidth300で表示すると見ると左のth部分が狭くなるのが気になっています。
   コンタクトフォームみたいにthを縦にする方法があったら教えてください。

   投稿日時：

   2014.10.19 ＠ 12:43 PM

   投稿者：

   りん

6. 

   りんさま

   コメント有難うございます！

   すいません。ちょっと状況がよく分からないのですが、他のページで試したら、うまくいかないということでしょうか？

   投稿日時：

   2014.10.21 ＠ 10:58 AM

   投稿者：

   ad-wptech

7. […] 使い方はこちらでご確認ください。 http://wp-technique.com/wordpress-10/ […]

   投稿日時：

   2014.10.28 ＠ 1:48 PM

   投稿者：

   とりあえずこれだけ入れとこ！　初心者向けWordPressプラグイン | 株式会社グラフィティー

8. […] フォーム – Trust Form http://wp-technique.com/wordpress-10/ […]

   投稿日時：

   2015.01.14 ＠ 10:02 AM

   投稿者：

   ワードプレスに利用するプラグインまとめ | 豊橋婚活結婚相談所 キングフィッシャー

9. […] お問い合わせフォーム用のWordPressプラグインTrust Formの設定！ こんにちは！皆さんは、お問い合わせフォーム用のWordPressプラグインは何を使用されていますか？・・・【WordPressの実】 […]

   投稿日時：

   2016.02.1 ＠ 1:57 PM

   投稿者：

   『Trust Form 』DBで管理できるお問い合わせフォーム