MW WP Form ใฎใทใณใใซใชใใณใใฌใผใ
2022-12-31T02:29:07.196Z


ใใถใคใณ
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