phpフォーム｜コピペで使えるHTML/CSS/JSパーツ集

form1-simple（※ベータ版）

お名前、メールアドレス、メッセージのみのシンプルフォーム。
プログラムのDLと簡単な設定が必要です。

<h2>form1-simple</h2>
<ul>
<li>お名前、メールアドレス、お問い合わせ内容、の３項目限定シンプル版です。<a href="https://template-party.com/parts-new/_about/form1-simple.html" target="_blank">使い方マニュアル</a>。</li>
<li><span class="color-check">公開したばかりのベータ版なので十分に動作確認を行なって下さい。</span>不具合を発見されましたらお手数ですが<a href="https://template-party.com/bbs-new/" target="_blank">サポート掲示板</a>からお知らせ下さい。</li>
</ul>

</section>

<h2 class="c">お問い合わせフォーム</h2>

<div class="form-success-box" hidden>
<h3>送信ありがとうございました</h3>
<p>内容を確認のうえ、担当者よりご連絡いたします。</p>
</div>

<form class="js-ajax-form h-adr" action="form.php" method="post" enctype="multipart/form-data" novalidate data-preview-privacy="false" data-preview-attachment="false">
<span class="p-country-name" style="display:none;">Japan</span>
<input type="hidden" name="csrf_token" value="">

<div class="hp-field" aria-hidden="true">
<label for="website">この欄は入力しないでください</label>
<input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
</div>

<div class="form-row">
<label class="form-label" for="email">
メールアドレス
<span class="required-badge">必須</span>
</label>
<input type="email" name="email" id="email" placeholder="例：info@example.com" inputmode="email" autocomplete="email">
</div>

<div class="form-row">
<label class="form-label" for="message">
お問い合わせ内容
<span class="required-badge">必須</span>
</label>
<textarea name="message" id="message" rows="10" placeholder="ご相談内容をご記入ください。"></textarea>
</div>

<div class="form-row js-privacy-row">
<label class="check-single">
<input type="checkbox" name="privacy_consent" value="1">
<span>個人情報保護方針に同意する</span>
</label>
</div>

<div class="form-actions">
<button type="submit" class="submit-button">この内容で送信する</button>
</div>
</form>
</div>

</section>

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

html

/*form1用
---------------------------------------------------------------------------*/
.contact-form-block {
    width: 100%;
}

.form-global-error {
    border: 1px solid #f0c2c2;
    background: #fff4f4;
    color: #9b2e2e;
}

.js-ajax-form[hidden] {
    display: none !important;
}

.form-row + .form-row {
    margin-top: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 700;
    color: #1f2947;
    line-height: 1.5;
}

.required-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: #d94c4c;
    vertical-align: middle;
}

.contact-form-inner input[type="text"],
.contact-form-inner input[type="email"],
.contact-form-inner input[type="file"],
.contact-form-inner select,
.contact-form-inner textarea {
    width: 100%;
    appearance: none;
    border: 1px solid #d6dbeb;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    background: #fff;
    font: inherit;
    line-height: 1.6;
    color: #222;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

.contact-form-inner input[type="file"] {
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.contact-form-inner input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background: #eef2ff;
    color: #2f55d4;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-form-inner textarea {
    resize: vertical;
    min-height: 12em;
}

.contact-form-inner input[type="text"]:focus,
.contact-form-inner input[type="email"]:focus,
.contact-form-inner input[type="file"]:focus,
.contact-form-inner select:focus,
.contact-form-inner textarea:focus {
    outline: none;
    border-color: #5d7bff;
    box-shadow: 0 0 0 4px rgba(93, 123, 255, 0.12);
}

.select-inline-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.select-inline {
    width: 100%;
}

.check-group,
.radio-group {
    display: grid;
    gap: 0.7rem;
}

.check-item,
.radio-item,
.check-single {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.6;
}

.check-item input,
.radio-item input,
.check-single input {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.form-help-text,
.form-file-reset-text {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.form-row.is-error input[type="text"],
.form-row.is-error input[type="email"],
.form-row.is-error input[type="file"],
.form-row.is-error select,
.form-row.is-error textarea {
    border-color: #d94c4c;
    background: #fff8f8;
}

.form-row.is-error .form-label,
.form-row.is-error .check-single,
.form-row.is-error .check-item,
.form-row.is-error .radio-item {
    color: #972f2f;
}

.form-error-text {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #b23838;
}

.form-actions {
    margin-top: 1.8rem;
	text-align: center;
}

/*個人情報同意チェックを中央寄せ*/
.form-row.js-privacy-row .check-single {
	display: flex;
	width: fit-content;
	margin: 0 auto;
	align-items: center;
	gap: 0.5rem;
}

/*送信ボタン*/
.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13em;
    min-height: 56px;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #2f55d4 0%, #5d7bff 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 24px rgba(47, 85, 212, 0.18);
}

.submit-button:hover {
    transform: translateY(-1px);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .contact-form-inner {
        border-radius: 22px;
    }

.select-inline-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.js-date-select-group[data-date-mode="ymd"] .select-inline-group {
        grid-template-columns: 1fr;
    }

.submit-button {
        width: 100%;
        min-width: 0;
    }
}

/*郵便番号・都道府県はPCで少し短くする*/
@media (min-width: 768px) {

.h-adr input[name="postal_code"],
	.h-adr input[name="address_pref"] {
		width: min(100%, 10rem);
	}

}

/*プルダウンを見た目でわかりやすくする*/
.h-adr select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.8rem auto;
	cursor: pointer;
}

css

//===============================================================
// form1用
//===============================================================
(function() {
    "use strict";

function initAjaxForm(form) {
        var actionUrl = form.getAttribute("action") || "form.php";
        var submitButton = form.querySelector('button[type="submit"]');
        var globalErrorBox = findSiblingBox(form, ".form-global-error");
        var successBox = findSiblingBox(form, ".form-success-box");
        var privacyRow = form.querySelector(".js-privacy-row");
        var attachmentRow = form.querySelector(".js-attachment-row");
        var attachmentInput = attachmentRow ? attachmentRow.querySelector('input[type="file"]') : null;
        var csrfInput = form.querySelector('input[name="csrf_token"]');

if (!submitButton || !csrfInput) {
            return;
        }

initDateSelectGroups(form);
        fetchInitData();

form.addEventListener("submit", function(event) {
            event.preventDefault();

/* ローカルの通常プレビュー（file://）では送信しない */
            if (window.location.protocol === "file:") {
                return;
            }

clearErrors();
            hideGlobalError();

submitButton.disabled = true;

var hadSelectedFile = attachmentInput && attachmentInput.files && attachmentInput.files.length > 0;
            var formData = new FormData(form);

fetch(actionUrl, {
                method: "POST",
                body: formData,
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(json) {
                if (json && json.csrfToken) {
                    csrfInput.value = json.csrfToken;
                }

if (json && json.ok) {
                    showSuccess();
                    return;
                }

resetAttachmentOnError(hadSelectedFile);

if (json && json.fieldErrors) {
                    applyFieldErrors(json.fieldErrors);
                }

if (json && json.formError) {
                    showGlobalError(json.formError);
                }
            })
            .catch(function() {
                resetAttachmentOnError(false);
                showGlobalError("送信に失敗しました。時間をおいて再度お試しください。");
            })
            .finally(function() {
                submitButton.disabled = false;
            });
        });

function fetchInitData() {
            /* ローカルの通常プレビュー（file://）では初期化通信を行わず、HTML側のプレビュー設定を使う */
            if (window.location.protocol === "file:") {
                var previewPrivacy = form.getAttribute("data-preview-privacy") === "true";
                var previewAttachment = form.getAttribute("data-preview-attachment") === "true";

togglePrivacyRow(previewPrivacy);
                toggleAttachmentRow(previewAttachment);
                return;
            }

fetch(actionUrl + "?action=init", {
                method: "GET",
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(json) {
                if (!json || !json.ok) {
                    showGlobalError("フォームの初期化に失敗しました。ページを再読み込みしてください。");
                    return;
                }

if (json.csrfToken) {
                    csrfInput.value = json.csrfToken;
                }

togglePrivacyRow(json.privacyConsentEnabled !== false);
                toggleAttachmentRow(json.attachmentEnabled !== false);
            })
            .catch(function() {
                showGlobalError("フォームの初期化に失敗しました。ページを再読み込みしてください。");
            });
        }

function togglePrivacyRow(isEnabled) {
            if (!privacyRow) {
                return;
            }

privacyRow.hidden = !isEnabled;

var privacyInput = privacyRow.querySelector('input[name="privacy_consent"]');
            if (!privacyInput) {
                return;
            }

if (!isEnabled) {
                privacyInput.checked = false;
            }

privacyInput.disabled = !isEnabled;
        }

function toggleAttachmentRow(isEnabled) {
            if (!attachmentRow) {
                return;
            }

attachmentRow.hidden = !isEnabled;

if (!attachmentInput) {
                return;
            }

if (!isEnabled) {
                attachmentInput.value = "";
            }

attachmentInput.disabled = !isEnabled;
        }

function clearErrors() {
            var rows = form.querySelectorAll(".form-row");
            rows.forEach(function(row) {
                row.classList.remove("is-error");

row.querySelectorAll(".form-error-text, .form-file-reset-text").forEach(function(message) {
                    message.remove();
                });
            });
        }

function applyFieldErrors(fieldErrors) {
            var firstRow = null;
            var firstInput = null;

Object.keys(fieldErrors).forEach(function(fieldName) {
                var input = form.querySelector('[name="' + cssEscape(fieldName) + '"]') ||
                            form.querySelector('[name="' + cssEscape(fieldName) + '[]"]');
                var row = input ? input.closest(".form-row") : null;

if (!row) {
                    row = form.querySelector('.js-date-select-group[data-field-name="' + cssEscape(fieldName) + '"]');
                    if (row) {
                        input = row.querySelector("select, input, textarea");
                    }
                }

if (!row) {
                    return;
                }

row.classList.add("is-error");

var error = document.createElement("p");
                error.className = "form-error-text";
                error.textContent = fieldErrors[fieldName];
                row.appendChild(error);

if (!firstRow) {
                    firstRow = row;
                    firstInput = input || null;
                }
            });

if (firstInput && typeof firstInput.focus === "function") {
                try {
                    firstInput.focus({ preventScroll: true });
                } catch (error) {
                    firstInput.focus();
                }
            }

if (firstRow) {
                firstRow.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        }

function resetAttachmentOnError(hadSelectedFile) {
            if (!attachmentRow || !attachmentInput) {
                return;
            }

if (attachmentInput.value !== "") {
                attachmentInput.value = "";
            }

if (!hadSelectedFile) {
                return;
            }

var note = document.createElement("p");
            note.className = "form-file-reset-text";
            note.textContent = "安全のため、添付ファイルは再選択してください。";
            attachmentRow.appendChild(note);
        }

function showGlobalError(message) {
            if (!globalErrorBox) {
                return;
            }

globalErrorBox.textContent = message;
            globalErrorBox.hidden = false;
            globalErrorBox.scrollIntoView({
                behavior: "smooth",
                block: "center"
            });
        }

function hideGlobalError() {
            if (!globalErrorBox) {
                return;
            }

globalErrorBox.hidden = true;
            globalErrorBox.textContent = "";
        }

function showSuccess() {
            form.hidden = true;
            hideGlobalError();

if (successBox) {
                successBox.hidden = false;
                successBox.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        }
    }

function initDateSelectGroups(scope) {
        var groups = scope.querySelectorAll(".js-date-select-group");

groups.forEach(function(group) {
            var mode = group.getAttribute("data-date-mode");
            var yearSelect = group.querySelector('[data-date-part="year"]');
            var monthSelect = group.querySelector('[data-date-part="month"]');
            var daySelect = group.querySelector('[data-date-part="day"]');
            var startYear = parseInt(group.getAttribute("data-year-start"), 10);
            var endYear = parseInt(group.getAttribute("data-year-end"), 10);

if (monthSelect) {
                populateNumberSelect(monthSelect, 1, 12, "月を選択", "月");
            }

if (yearSelect) {
                if (isNaN(startYear)) {
                    startYear = 1900;
                }
                if (isNaN(endYear)) {
                    endYear = new Date().getFullYear();
                }

populateNumberSelect(yearSelect, startYear, endYear, "年を選択", "年", true);
            }

if (daySelect) {
                updateDayOptions();
            }

if (monthSelect) {
                monthSelect.addEventListener("change", updateDayOptions);
            }

if (yearSelect && mode === "ymd") {
                yearSelect.addEventListener("change", updateDayOptions);
            }

function updateDayOptions() {
                if (!daySelect) {
                    return;
                }

var maxDay = 31;
                var month = monthSelect ? parseInt(monthSelect.value, 10) : NaN;
                var year = yearSelect ? parseInt(yearSelect.value, 10) : new Date().getFullYear();

if (!isNaN(month)) {
                    if (isNaN(year)) {
                        year = new Date().getFullYear();
                    }
                    maxDay = new Date(year, month, 0).getDate();
                }

populateNumberSelect(daySelect, 1, maxDay, "日を選択", "日");
            }
        });
    }

function populateNumberSelect(select, start, end, placeholder, suffix, descending) {
        if (!select) {
            return;
        }

var currentValue = select.value;
        var numbers = [];
        var i;

if (descending) {
            for (i = end; i >= start; i -= 1) {
                numbers.push(i);
            }
        } else {
            for (i = start; i <= end; i += 1) {
                numbers.push(i);
            }
        }

select.innerHTML = "";

var placeholderOption = document.createElement("option");
        placeholderOption.value = "";
        placeholderOption.textContent = placeholder;
        select.appendChild(placeholderOption);

numbers.forEach(function(number) {
            var option = document.createElement("option");
            option.value = String(number);
            option.textContent = String(number) + suffix;
            select.appendChild(option);
        });

if (currentValue !== "" && hasOptionValue(select, currentValue)) {
            select.value = currentValue;
        } else {
            select.value = "";
        }
    }

function hasOptionValue(select, value) {
        var options = Array.prototype.slice.call(select.options);
        return options.some(function(option) {
            return option.value === value;
        });
    }

function findSiblingBox(form, selector) {
        var parent = form.parentElement;
        if (!parent) {
            return null;
        }
        return parent.querySelector(selector);
    }

function cssEscape(value) {
        if (window.CSS && typeof window.CSS.escape === "function") {
            return window.CSS.escape(value);
        }
        return String(value).replace(/"/g, '\\"');
    }

document.addEventListener("DOMContentLoaded", function() {
        var forms = document.querySelectorAll(".js-ajax-form");
        forms.forEach(initAjaxForm);
    });
})();

js

form1-full（※ベータ版）

form1-simpleのフルセット版。項目も自由に増やせます。
プログラムのDLと簡単な設定が必要です。

<h2>form1-full</h2>
<ul>
<li>form1-simpleのフルセット版。<a href="https://template-party.com/parts-new/_about/form1-full.html" target="_blank">使い方マニュアル</a>。</li>
<li><span class="color-check">公開したばかりのベータ版なので十分に動作確認を行なって下さい。</span>不具合を発見されましたらお手数ですが<a href="https://template-party.com/bbs-new/" target="_blank">サポート掲示板</a>からお知らせ下さい。</li>
</ul>

</section>

<h2 class="c">お問い合わせフォーム</h2>

<div class="form-success-box" hidden>
<h3>送信ありがとうございました</h3>
<p>内容を確認のうえ、担当者よりご連絡いたします。</p>
</div>

<form class="js-ajax-form h-adr" action="form.php" method="post" enctype="multipart/form-data" novalidate data-preview-privacy="false" data-preview-attachment="false">
<span class="p-country-name" style="display:none;">Japan</span>
<input type="hidden" name="csrf_token" value="">

<div class="hp-field" aria-hidden="true">
<label for="website">この欄は入力しないでください</label>
<input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
</div>

<div class="form-row">
<label class="form-label" for="email">
メールアドレス
<span class="required-badge">必須</span>
</label>
<input type="email" name="email" id="email" placeholder="例：info@example.com" inputmode="email" autocomplete="email">
</div>

<div class="form-row">
<label class="form-label" for="postal_code">
郵便番号
</label>
<input type="text" name="postal_code" id="postal_code" class="p-postal-code" inputmode="numeric" autocomplete="postal-code">
<p class="form-help-text">郵便番号を入力すると、対応する住所が自動入力されます。</p>
</div>

<div class="form-row">
<label class="form-label" for="address_line">
市区町村以下
</label>
<input type="text" name="address_line" id="address_line" class="p-locality p-street-address p-extended-address" autocomplete="street-address" placeholder="例：千代田区千代田1-1 ○○マンション101号室">
</div>
<div class="form-row">
<label class="form-label" for="category">
お問い合わせ種別
</label>
<select name="category" id="category">
<option value="">選択してください</option>
<option value="サービスについて">サービスについて</option>
<option value="見積もり依頼">見積もり依頼</option>
<option value="その他">その他</option>
</select>
</div>

<div class="form-row">
<span class="form-label">
ご希望内容
</span>
<div class="check-group">
<label class="check-item"><input type="checkbox" name="services[]" value="資料請求"> <span>資料請求</span></label>
<label class="check-item"><input type="checkbox" name="services[]" value="無料相談"> <span>無料相談</span></label>
<label class="check-item"><input type="checkbox" name="services[]" value="見積もり"> <span>見積もり</span></label>
</div>
</div>

<div class="form-row">
<span class="form-label">
ご希望の連絡方法
</span>
<div class="radio-group">
<label class="radio-item"><input type="radio" name="contact_method" value="メール"> <span>メール</span></label>
<label class="radio-item"><input type="radio" name="contact_method" value="電話"> <span>電話</span></label>
<label class="radio-item"><input type="radio" name="contact_method" value="どちらでも可"> <span>どちらでも可</span></label>
</div>
</div>

<div class="form-row js-date-select-group" data-date-mode="month-day" data-field-name="visit_day">
<span class="form-label">
ご希望月日
</span>
<div class="select-inline-group">
<div class="select-inline">
<select name="visit_day_month" id="visit_day_month" data-date-part="month" aria-label="ご希望月日の月">
<option value="">月を選択</option>
</select>
</div>
<div class="select-inline">
<select name="visit_day_day" id="visit_day_day" data-date-part="day" aria-label="ご希望月日の日">
<option value="">日を選択</option>
</select>
</div>
</div>
</div>

<div class="form-row">
<label class="form-label" for="message">
お問い合わせ内容
<span class="required-badge">必須</span>
</label>
<textarea name="message" id="message" rows="10" placeholder="ご相談内容をご記入ください。"></textarea>
</div>

<div class="form-row js-attachment-row">
<label class="form-label" for="attachment">添付ファイル（任意）</label>
<input type="file" name="attachment" id="attachment" accept=".pdf,.jpg,.jpeg,.png,.webp">
<p class="form-help-text">5MB以下 / pdf・jpg・jpeg・png・webp のみ対応</p>
</div>