法人・卸売り問い合わせフォーム
Shopify用の法人・卸売り問い合わせフォームデモページです。会社名・部署・担当者名・連絡先などの会社情報、業種選択（小売・EC・卸売・飲食・ホテル等）、取引種別（卸売り・大量注文・OEM/ODM・ドロップシッピング・委託販売）の複数選択に対応。想定数量・予算・取引開始希望時期も選択形式で入力でき、会社案内やカタログなどの資料添付（PDF/Word/画像）も可能です。B2B取引の商談をスムーズに開始できる本格的なフォームです。HTML・CSSをコピーしてすぐにご利用いただけます。
プレビュー
※プレビューのため送信ボタンは押せません
コード
HTML
<h1>法人・卸売りお問い合わせ</h1>
<p class="form-description">法人様・事業者様向けの卸売り・大量注文のご相談を承っております。<br>以下のフォームよりお気軽にお問い合わせください。</p>
<form action="#" method="POST" enctype="multipart/form-data">
<h2 class="section-title">会社情報</h2>
<div class="form-group">
<label for="company_name" class="required">会社名・屋号</label>
<input type="text" id="company_name" name="company_name" placeholder="株式会社〇〇" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="department">部署名</label>
<input type="text" id="department" name="department" placeholder="例: 営業部">
</div>
<div class="form-group">
<label for="contact_name" class="required">ご担当者名</label>
<input type="text" id="contact_name" name="contact_name" required autocomplete="name">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="email" class="required">メールアドレス</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div class="form-group">
<label for="phone" class="required">電話番号</label>
<input type="tel" id="phone" name="phone" placeholder="03-1234-5678" required autocomplete="tel">
</div>
</div>
<div class="form-group">
<label for="website">会社HP・SNS</label>
<input type="url" id="website" name="website" placeholder="https://">
</div>
<div class="form-group">
<label for="business_type" class="required">業種</label>
<select id="business_type" name="business_type" required>
<option value="">選択してください</option>
<option value="retail">小売業（実店舗）</option>
<option value="ec">EC・通販</option>
<option value="wholesale">卸売業</option>
<option value="restaurant">飲食業</option>
<option value="hotel">ホテル・宿泊業</option>
<option value="salon">美容・サロン</option>
<option value="gift">ギフト・ノベルティ</option>
<option value="corporate">一般企業（社内利用）</option>
<option value="other">その他</option>
</select>
</div>
<h2 class="section-title">お取引について</h2>
<div class="form-group">
<label class="required">お問い合わせ内容</label>
<div class="checkbox-group">
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="wholesale">
<span>卸売り取引</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="bulk">
<span>大量注文</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="oem">
<span>OEM・ODM</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="dropship">
<span>ドロップシッピング</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="consignment">
<span>委託販売</span>
</label>
<label class="checkbox-item">
<input type="checkbox" name="inquiry_type[]" value="other">
<span>その他</span>
</label>
</div>
</div>
<div class="form-group">
<label for="products">ご興味のある商品・カテゴリ</label>
<textarea id="products" name="products" placeholder="具体的な商品名やカテゴリがあればご記入ください"></textarea>
</div>
<div class="form-row-3">
<div class="form-group">
<label for="quantity">想定数量（月間）</label>
<select id="quantity" name="quantity">
<option value="">選択してください</option>
<option value="~50">50点未満</option>
<option value="50-100">50〜100点</option>
<option value="100-500">100〜500点</option>
<option value="500-1000">500〜1,000点</option>
<option value="1000+">1,000点以上</option>
</select>
</div>
<div class="form-group">
<label for="budget">想定予算（月間）</label>
<select id="budget" name="budget">
<option value="">選択してください</option>
<option value="~100000">10万円未満</option>
<option value="100000-500000">10〜50万円</option>
<option value="500000-1000000">50〜100万円</option>
<option value="1000000+">100万円以上</option>
</select>
</div>
<div class="form-group">
<label for="start_date">取引開始希望時期</label>
<select id="start_date" name="start_date">
<option value="">選択してください</option>
<option value="asap">すぐにでも</option>
<option value="1month">1ヶ月以内</option>
<option value="3months">3ヶ月以内</option>
<option value="undecided">未定</option>
</select>
</div>
</div>
<div class="form-group">
<label for="detail">お問い合わせ内容</label>
<textarea id="detail" name="detail" placeholder="ご質問やご要望があればご記入ください"></textarea>
</div>
<div class="form-group">
<label>資料添付（会社案内・カタログなど）</label>
<div class="file-upload">
<input type="file" name="files[]" accept=".pdf,.doc,.docx,.jpg,.png" multiple style="display:none" id="file-input">
<label for="file-input" style="cursor:pointer; display:block;">
<div class="file-upload-text">ファイルをドラッグ＆ドロップ、またはクリックして選択</div>
<div class="file-upload-hint">複数選択可・1ファイル最大10MB（pdf, doc, jpg, png）</div>
</label>
</div>
</div>
<div class="form-group">
<label class="required">ご連絡方法</label>
<div class="radio-group">
<label class="radio-item">
<input type="radio" name="contact_method" value="email" required checked>
<span>メール</span>
</label>
<label class="radio-item">
<input type="radio" name="contact_method" value="phone">
<span>電話</span>
</label>
<label class="radio-item">
<input type="radio" name="contact_method" value="either">
<span>どちらでも可</span>
</label>
</div>
</div>
<button type="submit" class="btn-submit">送信する</button>
</form>CSS
.form-description {
color: #666;
margin-bottom: 32px;
font-size: 14px;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
padding-bottom: 8px;
border-bottom: 2px solid #2563eb;
margin-bottom: 20px;
margin-top: 32px;
}
.section-title:first-of-type {
margin-top: 0;
}
.form-group {
margin-bottom: 24px;
}
label {
display: block;
font-weight: 500;
margin-bottom: 8px;
font-size: 14px;
}
.required::after {
content: "*";
color: #e53935;
margin-left: 4px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
textarea {
min-height: 120px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) {
.form-row,
.form-row-3 {
grid-template-columns: 1fr;
}
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #2563eb;
}
.radio-group {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.radio-item {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.radio-item input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #2563eb;
}
.file-upload {
border: 2px dashed #ddd;
border-radius: 8px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.file-upload:hover {
border-color: #2563eb;
background: #f8fafc;
}
.file-upload-text {
color: #666;
font-size: 14px;
}
.file-upload-hint {
color: #999;
font-size: 12px;
margin-top: 8px;
}
.btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
margin-top: 16px;
}
.btn-submit:hover {
background: #1d4ed8;
}
.btn-submit:active {
transform: translateY(1px);
}