ブログ｜ぼうびろく

19 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

19 July

cf7　コピペコード２

お名前：[your-name]

フリガナ：[your-furigana]

メールアドレス：[your-email]

郵便番号：[zip]

都道府県：[pref]

ご住所：[addr]

お電話番号：[tel-17]

件名：[your-kenmei]

お問い合わせ内容：[your-message01]

<table class="cf7">
<tr>
 <th>お名前*</th>
 <td>[text* your-name akismet:author] </td>
</tr>
<tr>
 <th>フリガナ*</th>
 <td>[text* your-furigana akismet:author] </td>
</tr>
<tr>
 <th>郵便番号*</th>
 <td>[text* zip id:zip] </td>
</tr>
<tr>
 <th>都道府県*</th>
 <td>[text* pref id:pref]</td>
</tr>
<tr>
 <th>ご住所*</th>
 <td class="address-100">[text* addr id:addr]</td>
</tr>
<tr>
 <th>お電話番号*</th>
 <td>[tel* tel-17]</td>
</tr>
<tr>
 <th>メールアドレス*</th>
 <td>[email* your-email akismet:author_email]</td>
</tr>
<tr>
 <th>お問い合わせ内容</th>
 <td class="message-100">[textarea your-message01]</td>
</tr>

</table>
 
[submit][confirm][back]

PR

19 July

cf7　自動住所入力用　js

<?php if(is_page( array( 'contact' ) ) ): ?>

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#zip').keyup(function(event){
AjaxZip3.zip2addr(this,'','pref','addr');
})
})
</script>
<?php endif; ?>

19 July

cf7　コピペ用　コード１

<table class="cf7">
<tr>
 <th>お名前*</th>
 <td>[text* your-name akismet:author] </td>
</tr>
<tr>
 <th>フリガナ*</th>
 <td>[text* your-furigana akismet:author] </td>
</tr>
<tr>
 <th>郵便番号*</th>
 <td>[text* zip id:zip] </td>
</tr>
<tr>
 <th>都道府県*</th>
 <td>[text* pref id:pref]</td>
</tr>
<tr>
 <th>ご住所*</th>
 <td class="address-100">[text* addr id:addr]</td>
</tr>
<tr>
 <th>お電話番号*</th>
 <td>[tel* tel-17]</td>
</tr>
<tr>
 <th>メールアドレス*</th>
 <td>[email* your-email akismet:author_email]</td>
</tr>
<tr>
 <th>宿泊人数*</th>
 <td class="input_small">大人[text* your-family01]人 
子供[text* your-family02]人 
お子様の年齢[text your-age01]才　[text your-age02]才 
</td>
</tr>
<tr>
 <th>布団の数</th>
 <td class="input_small">[text your-futon]組</td>
</tr>

 <tr>
 <th>宿泊希望日</th>
 <td class="input_small_calendar">[date date-341 min:2016-12-15 max:2017-03-30]～[date date-342 min:2016-12-15 max:2017-03-30]</td>
</tr>
<tr>
 <th>チェックイン</th>
 <td class="select_small">[select menu-750 include_blank "16"]時[select menu-751 include_blank "00" "15" "30" "45"]分</td>
</tr>
<tr>
 <th>チェックアウト</th>
 <td class="select_small">[select menu-750 include_blank "9" "10"]時[select menu-751 include_blank "00" "15" "30" "45"]分</td>
</tr>
<tr>
 <th>ご質問、ご不明な点など、ございましたらお書きください。</th>
 <td class="message-100">[textarea your-message01]</td>
</tr>
</table>

 
[submit][confirm][back]

19 July

cf7　コピペ用　css

/* お問い合わせフォーム　各種 */
.cf7{
    border:none!important;
}
.cf7 input{

font-family: Lato, "Noto Sans Japanese", メイリオ, Meiryo, Osaka, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif;
}
.cf7 tr{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
margin-top: -1px;

}
.cf7 th,
.cf7 td{
    border:none;
    padding:20px 10px;
}
.cf7 th{
    width:250px;
    background:none;
    text-align:left;
    vertical-align:top;

}

.cf7 .req{
    color:red;
    font-weight:bold;
}

.cf7 .input_small input{
    width:50px;
    display:inline-block;
    vertical-align:initial;
    margin:0 10px;
    height:23px;
}
.cf7 .input_medium .wpcf7-list-item {
    display:block;
}

.cf7 .input_medium .wpcf7-free-text{
    width:150px;
    display:inline-block;
    vertical-align:initial;
    margin:0 10px;
        height:23px;

}
.cf7 .input_small_calendar input{
    width:200px;
    display:inline-block;
    vertical-align:initial;
    margin:0 10px;
}
.cf7 .select_small select{
    width:70px;
    display:inline-block;
    vertical-align:initial;
    margin:0 10px;
}
.text-xs-center {
    text-align: center;
    margin-bottom:100px!important;
}

input[type="submit"], input[type="reset"], input[type="button"] {
    width: 120px;
    padding: 10px 15px;
    background: #133f0c;
    margin: 0 5px;
    border:none;
    border-radius:3px;
    color:#fff;
    letter-spacing:2px;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover{
    opacity:0.8;
cursor:pointer;
}

12 July

ラジオボタン、チェックボックスを画像で装飾する

http://webimemo.com/web/5369

上記サイトの記述を丸コピ
ついでに画像もDLしてあてはめてから、自分の好きなように変える

inputをopacityで0にしてるけど、横並びにする場合は、めちゃスペース取って邪魔なので、
display:none;で消すのが良いと思う

https://cultureacademia.jp/webcreate/303/
ありがてえコード

cssのみでラジオボタンとチェックボタン
単純な丸などの場合、こっちのほうがコピペで簡単