MW WP Form ใฎใ‚ทใƒณใƒ—ใƒซใชใƒ†ใƒณใƒ—ใƒฌใƒผใƒˆ

2022-12-31T02:29:07.196Z

PC
ใƒขใƒใ‚คใƒซ

ใƒ‡ใ‚ถใ‚คใƒณ

HTML

// ใƒ•ใ‚ฉใƒผใƒ HTML
<ol class="form_step">
    <li>ๅ…ฅๅŠ›</li>
    <li>ๅ†…ๅฎน็ขบ่ช</li>
    <li>ๅฎŒไบ†</li>
</ol>
<table class="mailform-tbl">
<tbody>
<tr>
<th>ใŠๅๅ‰ <span class="attention">โ€ป</span></th>
<td class="w50">[mwform_text name="name"]</td>
</tr>
<tr>
<th>ใƒ•ใƒชใ‚ฌใƒŠ<span class="attention">โ€ป</span></th>
<td class="w50">[mwform_text name="kana"]</td>
</tr>
<tr>
<th>้›ป่ฉฑ็•ชๅท</th>
<td class="w50">[mwform_text name="tel"]</td>
</tr>
<tr>
<th>ใƒกใƒผใƒซใ‚ขใƒ‰ใƒฌใ‚น <span class="attention">โ€ป</span></th>
<td class="w50">[mwform_text name="mail"]</td>
</tr>
<tr>
<th>ใŠๅ•ใ„ๅˆใ‚ใ›ๅ†…ๅฎน <span class="attention">โ€ป</span></th>
<td class="w80">[mwform_textarea name="message" placeholder="ใ”่ณชๅ•ใƒปใ”็›ธ่ซ‡ใชใฉใ€ใŠๆฐ—่ปฝใซใŠๅ•ๅˆใ‚ใ›ใใ ใ•ใ„"]</td>
</tr>
</tbody>
</table>
<p id="submit-button">[mwform_backButton value="ๆˆปใ‚‹"][mwform_submitButton preview_value="็ขบ่ช็”ป้ขใธ" submit_value="้€ไฟกใ™ใ‚‹"]</p>
// ๅฎŒไบ†็”ป้ขHTML
<ol class="form_step">
    <li>ๅ…ฅๅŠ›</li>
    <li>ๅ†…ๅฎน็ขบ่ช</li>
    <li>ๅฎŒไบ†</li>
</ol>
<div>
<p>ใŠๅ•ใ„ๅˆใ‚ใ›ใ‚ใ‚ŠใŒใจใ†ใ”ใ–ใ„ใพใ™ใ€‚ใ”ๅ…ฅๅŠ›ใ„ใŸใ ใ„ใŸใƒกใƒผใƒซใ‚ขใƒ‰ใƒฌใ‚นใซ่‡ชๅ‹•่ฟ”ไฟกใƒกใƒผใƒซใ‚’ใŠ้€ใ‚Š่‡ดใ—ใพใ—ใŸใ€‚</p>
<p>ใƒกใƒผใƒซใŒๅฑŠใ‹ใชใ„ๅ ดๅˆใ‚„ใ€2ใ€œ3ๆ—ฅ็ตŒใฃใฆใ‚‚้€ฃ็ตกใŒใชใ„ๅ ดๅˆใฏใ€ใŠๆ‰‹ๆ•ฐใงใ™ใŒใŠ้›ป่ฉฑ๏ผˆ00-0000-0000๏ผ‰ใพใงใ”้€ฃ็ตกใ‚’ใŠ้ก˜ใ„ใ„ใŸใ—ใพใ™ใ€‚</p>
<a class="btn home" href="/">TOPใƒšใƒผใ‚ธใซๆˆปใ‚‹</a>

CSS

CSSใฏใ‚„ใฏใ‚Šstyle.cssใชใฉใซใ‚ณใƒผใƒ‰ใง่จ˜่ฟฐใ—็ฎก็†ใ™ใ‚‹ใฎใŒใŠใ™ใ™ใ‚ใ€‚ๅ›บๅฎšใƒšใƒผใ‚ธๅดใซ WP Add Custom CSS ใƒ—ใƒฉใ‚ฐใ‚คใƒณใชใฉใงใ‚ซใ‚นใ‚ฟใƒ CSSใ‚’่ฟฝๅŠ ใงใใ‚‹ใ‚ˆใ†ใซใ—ใฆใ„ใŸใŒใ€ใƒชใƒ“ใ‚ธใƒงใƒณใฎๅพฉๅ…ƒใฎ้š›ใซๅๆ˜ ใ•ใ‚Œใชใ„ใŸใ‚ไธไพฟใ€‚่จ˜่ฟฐๅ ดๆ‰€ใ‚‚1ใคใซ็ตฑไธ€ใงใใ‚‹ใ€‚

.mw_wp_form {
  width: 100%;
  color: #333;
}

.mw_wp_form table.mailform-tbl {
  width: 100%;
  margin-bottom: 40px;
}

.mw_wp_form table tr {
  width: 100%;
  border-bottom: 1px dotted #ccc;
  padding: 30px 0;
  font-weight: normal;
}

.mw_wp_form table tr:first-child {
  border-top: 1px dotted #ccc;
}

.mw_wp_form table th {
  padding: 20px 0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  width: 30%;
  float: left;
}

.mw_wp_form table th .attention {
  font-size: 80%;
  margin-left: 10px;
  color: red;
  padding: 3px;
}

.mw_wp_form table td {
  padding: 20px 0;
  width: 70%;
  float: left;
}

.mw_wp_form table td.w50 input, .mw_wp_form table td.w50 select {
  width: 50%;
  box-sizing: border-box;
}

.mw_wp_form table td.w80 input, .mw_wp_form table td.w80 select {
  width: 80%;
  box-sizing: border-box;
}

.mw_wp_form table td.w80 textarea {
  width: 80%;
  box-sizing: border-box;
}

.mw_wp_form #submit-button {
  text-align: center;
}

.mw_wp_form #submit-button input {
  margin: 1em;
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #c19e56;
  background: #c19e56;
  color: #fff;
  box-sizing: border-box;
  height: 40px;
  -webkit-appearance: none;
  border-radius: 5px;
  font-size: 90%;
}

.mw_wp_form #submit-button input[name="submitBack"] {
  margin: 1em;
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #999;
  background: #999;
  color: white;
  box-sizing: border-box;
  height: 40px;
  -webkit-appearance: none;
  border-radius: 5px;
  font-size: 90%;
}

.mw_wp_form .form_step {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px 0;
  list-style: none;
}

.mw_wp_form .form_step>li {
  display: block;
  position: relative;
  padding: 0.5em;
  width: 22%;
  border: 1px solid currentColor;
  color: #C19E56;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

.mw_wp_form .form_step>li:nth-of-type(n + 2) {
  margin: 0px 0px 0px 4%;
}

.mw_wp_form .form_step>li:nth-of-type(n + 2):before {
  position: absolute;
  top: 50%;
  left: -1.5em;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #C19E56;
  border-left: 2px solid #C19E56;
  transform: translateY(-50%) rotate(135deg);
  content: "";
}

.mw_wp_form_input .form_step>li:nth-of-type(1), .mw_wp_form_preview .form_step>li:nth-of-type(2), .mw_wp_form_complete .form_step>li:nth-of-type(3) {
  background-color: #C19E56;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .mw_wp_form .form_step>li {
    font-size: 10px;
    width: 30%;
  }
  .mw_wp_form table td {
    width: 65%;
    float: right;
  }
  .mw_wp_form table td.w50 input, .mw_wp_form table td.w50 select {
    width: 100%;
    box-sizing: border-box;
  }
  .mw_wp_form table td.w80 input, .mw_wp_form table td.w80 select {
    width: 100%;
    box-sizing: border-box;
  }
  .mw_wp_form table td.w80 textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

ใƒกใƒผใƒซๆœฌๆ–‡

่‡ชๅ‹•่ฟ”ไฟกใƒกใƒผใƒซๆœฌๆ–‡

// ่‡ชๅ‹•่ฟ”ไฟกใƒกใƒผใƒซๆœฌๆ–‡

{name} ๆง˜

ไปฅไธ‹ใฎๅ†…ๅฎนใงใŠๅ•ใ„ๅˆใ‚ใ›ใ‚’ๅ—ใ‘ไป˜ใ‘ใพใ—ใŸใ€‚ๅ†…ๅฎนใ‚’็ขบ่ชใ•ใ›ใฆใ„ใŸใ ใๆฌก็ฌฌใ€ใ”่ฟ”ไฟกใ•ใ›ใฆใ„ใŸใ ใใพใ™ใ€‚

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

ใ€ใŠๅๅ‰ใ€‘
{name}๏ผˆ{kana}๏ผ‰ๆง˜

ใ€้›ป่ฉฑ็•ชๅทใ€‘
{tel}

ใ€ใƒกใƒผใƒซใ‚ขใƒ‰ใƒฌใ‚นใ€‘
{mail}

ใ€ใŠๅ•ใ„ๅˆใ‚ใ›ๅ†…ๅฎนใ€‘
{message}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”


ใ”่ณชๅ•ๅ†…ๅฎนใซใ‚ˆใฃใฆใฏใ€ใŠ่ฟ”ไบ‹ใซใŠๆ™‚้–“ใŒใ‹ใ‹ใ‚‹ๅ ดๅˆใ‚„ใ€ใŠ่ฟ”ไบ‹ใงใใชใ„ๅ ดๅˆใ‚‚ใ”ใ–ใ„ใพใ™ใฎใงใ€ไฝ•ๅ’ใ”ไบ†ๆ‰ฟใใ ใ•ใ„ใ€‚
------------------------------------------------------------
ๆ ชๅผไผš็คพใ‚ตใƒณใƒ—ใƒซๅ•†ไบ‹
TEL๏ผšใ€€03-0000-0000
info@sample.com
https://sample.com/
------------------------------------------------------------

็ฎก็†่€…ๅฎ›ใƒกใƒผใƒซๆœฌๆ–‡

// ็ฎก็†่€…ๅฎ›ใƒกใƒผใƒซๆœฌๆ–‡

ไปฅไธ‹ใฎๅ†…ๅฎนใงใŠๅ•ใ„ๅˆใ‚ใ›ใŒใ‚ใ‚Šใพใ—ใŸใ€‚

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

ใ€ใŠๅๅ‰ใ€‘
{name}๏ผˆ{kana}๏ผ‰ๆง˜

ใ€้›ป่ฉฑ็•ชๅทใ€‘
{tel}

ใ€ใƒกใƒผใƒซใ‚ขใƒ‰ใƒฌใ‚นใ€‘
{mail}

ใ€ใŠๅ•ใ„ๅˆใ‚ใ›ๅ†…ๅฎนใ€‘
{message}

โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”

โ€ปๆœฌใƒกใƒผใƒซใฏใŠๅ•ๅˆใ›ใŒใ‚ใฃใŸ้š›ใฎ่‡ชๅ‹•้…ไฟกใƒกใƒผใƒซใงใ™ใ€‚
ใ”ๅฏพๅฟœใ‚ˆใ‚ใ—ใใŠ้ก˜ใ„ใ„ใŸใ—ใพใ™ใ€‚

https://lifestylecreators.net/3242/#MW_WP_FORM_CSS

https://migi.me/wordpress/mw-wp-form-style-responsive/