ãåãåãããã©ãŒã ã¯é¡§å®¢ãšã®éèŠãªã³ãã¥ãã±ãŒã·ã§ã³æ段ã®ãããæåŸãŸã§å
¥åããŠãããããããªãŠãŒã¶ãŒã䜿ãããããã¶ã€ã³ãå¿ãããªããã°ãªããŸããã
æ¬èšäºã§ã¯ãã«ã¹ã¿ãã€ãºã®ããããåºæ¬æ§é ã®ãã³ãã¬ãŒããããã¶ã€ã³è¿·ã£ãæ¹ã«åããŠãã®ãŸãŸã³ããããŠäœ¿ãããã³ãã¬ãŒããã玹ä»ããŸãã
ã¯ãããŠãã©ãŒã ãäœæããæ¹ã§ããããèªãã°ãèªåã§ãåãåãããã©ãŒã ãäœæã§ããããã«ãªããŸããæåŸã«HTMLäžèŠã§äœæãããµãŒãã¹ã玹ä»ããŸãã®ã§ããã²åèã«ããŠãã ããã
⌠ããã³ããšã³ãéçºã ãã§ãã©ãŒã ã䜿ããïŒformrunã®æŽ»çšããããã
formrunã§ãã©ãŒã ãäœæãããšãéçºãé¢åãªåçããŒã¿ã®ç®¡çãã¡ãŒã«éä¿¡ãªã©ã®è±å¯ãªããã¯ãšã³ãæ©èœãšã»ãã¥ãªãã£å¯Ÿçã®éçºãäžèŠã«ãªãããæéãšã³ã¹ããåæžããããšãã§ããŸãããã©ãŒã ãè±å¯ãªãã³ãã¬ãŒãããçšéã«å¿ãããã®ãéžã³ãããã¹ããå
¥åããã ãã§ç°¡åã«äœæããããšãã§ããŸãããã²ã掻çšãã ããã
ç®æ¬¡
- ãåãåãããã©ãŒã ã®åºæ¬çãªæ§é
- HTML/CSSã®ã«ã¹ã¿ãã€ãºæ¹æ³
- ãããããªãåãåãããã©ãŒã ã®ãã³ãã¬ãŒãäŸ
- ç³ã蟌ã¿çãäžããïŒããªããŒã·ã§ã³æ©èœã®èšå®æ¹æ³
- ã¹ãã察å¿ã®ã¬ã¹ãã³ã·ããã¶ã€ã³ã®èšå®æ¹æ³
- HTMLãã¢ããããŒãããéã®æ³šæç¹
- ãäžçŽç·šããåãåãããã©ãŒã ã®æé©å
- ãåãåãããã©ãŒã ã®æé©åã¯formrunããããã
- ãŸãšã
ãåãåãããã©ãŒã ã®åºæ¬çãªæ§é
ãåãåãããã©ãŒã ã¯ããŠãŒã¶ãŒããã®è³ªåããã£ãŒãããã¯ãåãåãããã®éèŠãªæ段ã§ããåºæ¬çãªãåãåãããã©ãŒã ã¯ã以äžã®èŠçŽ ã§æ§æãããŸãã
- ãã©ãŒã ã¿ã°ïŒãã©ãŒã ã®éå§ãšçµäºã瀺ãã¿ã°ã§ãã
<form>
ã¿ã°ã§å²ã¿ãŸãã - å ¥åãã£ãŒã«ãïŒãŠãŒã¶ãŒãæ å ±ãå ¥åããããã®ãã£ãŒã«ãã§ããäŸãã°ãååãã¡ãŒã«ã¢ãã¬ã¹ãã¡ãã»ãŒãžãªã©ã®å ¥åãã£ãŒã«ãããããŸãã
- éä¿¡ãã¿ã³ïŒãŠãŒã¶ãŒãå ¥åããæ å ±ãéä¿¡ããããã®ãã¿ã³ã§ãã
åºæ¬çãªãã³ãã¬ãŒãïŒHTMLïŒ
ãã¡ãã®HTMLãããšã«ãã¶ã€ã³ãå¿
èŠãªæ©èœã®èšå®ããŠãããŸãããã
<form action="/submit_form" method="post">
<label for="name">åå:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ã¡ãŒã«ã¢ãã¬ã¹:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">ã¡ãã»ãŒãž:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="éä¿¡">
</form>
HTML/CSSã®ã«ã¹ã¿ãã€ãºæ¹æ³
次ã«ããã©ãŒã ã®ãã¶ã€ã³ãã«ã¹ã¿ãã€ãºããŠãããé åçãªãã®ã«ããæ¹æ³çŽ¹ä»ããŸãã
åºæ¬çãªCSSã®è¿œå
CSSã䜿çšããŠããã©ãŒã ã®èŠãç®ãæ¹åããŸãã以äžã®ã³ãŒããåèã«HTMLãã¡ã€ã«ã®<head>
ã¿ã°å
ã«è¿œå ããŠãã ãããã奜ã¿ã®ã«ã©ãŒã³ãŒãããã©ã³ãã«å€æŽããããšã§ããµã€ãã«åã£ããã¶ã€ã³ã«ä¿®æ£ããããšãã§ããŸãã
åã¹ã¿ã€ã«èšå®ã®è©³çŽ°ã¯ã³ã¡ã³ãã§èª¬æããŠããŸãã
<style>
body {
font-family: Arial, sans-serif; /* å
šäœã®ãã©ã³ããèšå® */
background-color: #f2f2f2; /* èæ¯è²ãèšå® */
padding: 20px; /* ããŒãžå
šäœã®ããã£ã³ã°ãèšå® */
}
form {
background-color: #fff; /* ãã©ãŒã ã®èæ¯è²ãèšå® */
padding: 20px; /* ãã©ãŒã ã®å
åŽã®äœçœãèšå® */
border-radius: 5px; /* è§ãäžžãã */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 圱ãè¿œå ããŠç«äœæãåºã */
}
label {
display: block; /* ã©ãã«ããããã¯è¡šç€ºã«ããããšã§ã次ã®èŠçŽ ãšåãã */
margin-top: 10px; /* äžã«äœçœãè¿œå */
}
input[type="text"], input[type="email"], textarea {
width: 100%; /* å
¥åãã£ãŒã«ãã®å¹
ã100%ã«èšå® */
padding: 10px; /* å
¥åãã£ãŒã«ãã®å
åŽã®äœçœãèšå® */
margin: 5px 0; /* å
¥åãã£ãŒã«ãã®äžäžã«äœçœãèšå® */
border: 1px solid #ccc; /* å
¥åãã£ãŒã«ãã®æ ç·ãèšå® */
border-radius: 5px; /* å
¥åãã£ãŒã«ãã®è§ãäžžãã */
}
input[type="submit"] {
background-color: #4CAF50; /* éä¿¡ãã¿ã³ã®èæ¯è²ãèšå® */
color: white; /* éä¿¡ãã¿ã³ã®æåè²ãèšå® */
padding: 10px 20px; /* éä¿¡ãã¿ã³ã®å
åŽã®äœçœãèšå® */
border: none; /* éä¿¡ãã¿ã³ã®æ ç·ããªãã«èšå® */
border-radius: 5px; /* éä¿¡ãã¿ã³ã®è§ãäžžãã */
cursor: pointer; /* ã«ãŒãœã«ããã€ã³ã¿ãŒã«èšå® */
}
</style>
ãããããªãåãåãããã©ãŒã ã®ãã³ãã¬ãŒãäŸ
ãã£ãŒã ã®ãã¶ã€ã³ã¯ãäŒæ¥ã®ç¬¬äžå°è±¡ã«å€§ãã圱é¿ããŸãããã®ããããŠãŒã¶ãŒãå¿«é©ã«å ¥åã§ãããã¶ã€ã³ãæèããããšã倧åã§ãã
ããã§ã¯ããã¶ã€ã³ã«ãã ãã£ããã©ãŒã ã®ãã³ãã¬ãŒãã玹ä»ããŸãã
äŸ1ïŒã·ã³ãã«ã§çŽæçãªãã³ãã¬ãŒã
  See the Pen   contact form by Tim (@TimQuincey)   on CodePen.
圢ç¶ãçåè§ãªãã©ãŒã ã¯ç¡æ©è³ªãªå°è±¡ãäžããã¡ã§ãã
çåè§ã®è§ãäžžãããããšã§åªããé°å²æ°ã®ãåãåãããã©ãŒã ãã§ãããããŸãã
äŸ2ïŒå¿ é é ç®ãæ確åããããã³ãã¬ãŒã
  See the Pen   ãåãåããFormã³ãã by Yuya (@yuyaphotograph)   on CodePen.
å ¥åå¿ é é ç®ã®ã¢ã€ã³ã³ã«ãããŠç·ã䜿ã£ãäºäŸã§ãã
å¿ é é ç®ã¯ãã»ãšãã©ã®ãåãåãããã©ãŒã ã§ã¯èµ€ãé»è²ãšãã£ãèŠåè²ã䜿ã£ãŠããŸããèŠåè²ã¯ãŠãŒã¶ãŒã«çŠç¥æãäžããŠããŸããããŸããã
è²åœ©å¿çåŠã§ãçããããå®å¿ããšãã£ãæå³åããããç·ããããŠå©çšããããšã§çŠç¥æã«é§ãããããšãªããå ¥åå®äºãŸã§èªå°ã§ããŸãã
ä»ã«ããã¶ã€ã³æ§ã®é«ããã©ãŒã ã®ãã³ãã¬ãŒãã¯ã以äžã®èšäºã§ã玹ä»ããŠããŸããåãããŠã芧ãã ããã
>> åãåãããã©ãŒã ã®ãã¶ã€ã³9éžïŒã³ããã§äœ¿ããhtmlãšCSSã玹ä»
ç³ã蟌ã¿çãäžããïŒããªããŒã·ã§ã³æ©èœã®èšå®æ¹æ³
![](https://form.run/media/wp-content/uploads/2022/10/åãåãããã©ãŒã ïŒEFOïŒ-1-1024x579.gif)
ããªããŒã·ã§ã³æ©èœãè¿œå ããããšã§ããŠãŒã¶ãŒãæ£ããæ
å ±ãå
¥åãããããªããŸãã
顧客管çãããããããããã«èšå®ãè¡ãããšããªã¹ã¹ã¡ããŸãã
ããªããŒã·ã§ã³æ©èœã«ã¯ä»¥äžã®ãããªçš®é¡ããããŸãã
äž»ãªããªããŒã·ã§ã³æ©èœ
- å¿ é ãã£ãŒã«ãïŒå ¥åãå¿ é ã§ããããšã確èªããŸãã
- ã¡ãŒã«ã¢ãã¬ã¹åœ¢åŒïŒã¡ãŒã«ã¢ãã¬ã¹ã®åœ¢åŒãæ£ãããã©ããã確èªããŸãã
- æåæ°å¶éïŒå ¥åãããããã¹ãã®é·ããå¶éããŸãã
ãããã®ããªããŒã·ã§ã³æ©èœã®åºæ¬çãªJavaScriptã®äŸãæ²èŒããŸãã
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ãåãåãããã©ãŒã </title>
<style>
/* ããã«CSSã¹ã¿ã€ã«ãè¿œå */
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let message = document.getElementById("message").value;
// å¿
é ãã£ãŒã«ãã®ããªããŒã·ã§ã³
if (name === "" || email === "" || message === "") {
alert("ãã¹ãŠã®ãã£ãŒã«ããå
¥åããŠãã ããã");
return false;
}
// ã¡ãŒã«ã¢ãã¬ã¹åœ¢åŒã®ããªããŒã·ã§ã³
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("æ£ããã¡ãŒã«ã¢ãã¬ã¹ãå
¥åããŠãã ããã");
return false;
}
// ã¡ãã»ãŒãžã®æåæ°å¶éããªããŒã·ã§ã³
if (message.length > 500) {
alert("ã¡ãã»ãŒãžã¯500æå以å
ã§å
¥åããŠãã ããã");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="/submit_form" method="post" onsubmit="return validateForm()">
<h2>ãåãåãããã©ãŒã </h2>
<label for="name">åå:</label>
<input type="text" id="name" name="name" required>
<label for="email">ã¡ãŒã«ã¢ãã¬ã¹:</label>
<input type="email" id="email" name="email" required>
<label for="message">ã¡ãã»ãŒãž:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="éä¿¡">
</form>
</body>
</html>
ç°¡åã«ããªããŒã·ã§ã³æ©èœãèšå®ãããå ŽåãEFOããŒã«ãããããã§ãã
ããããã®EFOããŒã«ã«ã€ããŠã¯ã以äžã®èšäºã§ã玹ä»ããŠããŸããåãããŠã芧ãã ããã
>> EFOãšã¯ïŒå
¥åãã©ãŒã æé©åã®éèŠæ§ãå¹æçãªæœçãããããããŒã«ã詳ãã解説
ã¹ãã察å¿ã®ã¬ã¹ãã³ã·ããã¶ã€ã³ã®èšå®æ¹æ³
çŸä»£ã§ã¯ãå€ãã®ãŠãŒã¶ãŒãã¹ããŒããã©ã³ããã¢ã¯ã»ã¹ããŸããã¢ãã€ã«å¯Ÿå¿ã®ã¬ã¹ãã³ã·ããã¶ã€ã³ãèšå®ããããšã§ããåãåãããã©ãŒã ãã¹ããŒããã©ã³ãã¿ãã¬ãããªã©ã®ç°ãªãããã€ã¹ã§é©åã«è¡šç€ºãããããã«ããŸãã
ã¡ãã£ã¢ã¯ãšãªã«ããã¬ã¹ãã³ã·ãèšå®
ã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãç¹å®ã®ããã€ã¹ãµã€ãºã«å¿ããã¹ã¿ã€ã«ãèšå®ããŸãã
以äžã®äŸã§ã¯ãå¹
600px以äžã®ããã€ã¹ã«å¯Ÿããã¹ã¿ã€ã«ãå®çŸ©ããŠããŸãã
ã¡ãã£ã¢ã¯ãšãªã«ããã¬ã¹ãã³ã·ããã¶ã€ã³ã®CSSã¯ãHTMLãã¡ã€ã«ã®<head>
ã¿ã°å
ã«ãã<style>
ã¿ã°ã®äžã«è¿œå ããŸãã
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ãåãåãããã©ãŒã </title>
<style>
/* ããã«CSSã¹ã¿ã€ã«ãè¿œå */
}
/* ã¡ãã£ã¢ã¯ãšãªã§ã¹ãã察å¿ã®ã¹ã¿ã€ã«ãèšå® */
@media (max-width: 600px) {
form {
padding: 15px;
width: 90%;
}
input[type="text"], input[type="email"], textarea {
padding: 8px;
}
input[type="submit"] {
padding: 10px;
}
}
</style>
<script>
/* ããã«ããªããŒã·ã§ã³èšå®ãè¿œå */
</script>
</head>
<body>
<form action="/submit_form" method="post" onsubmit="return validateForm()">
<h2>ãåãåãããã©ãŒã </h2>
<label for="name">åå:</label>
<input type="text" id="name" name="name" required>
<label for="email">ã¡ãŒã«ã¢ãã¬ã¹:</label>
<input type="email" id="email" name="email" required>
<label for="message">ã¡ãã»ãŒãž:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="éä¿¡">
</form>
</body>
</html>
HTMLãã¢ããããŒãããéã®æ³šæç¹
åããŠHTMLãã¢ããããŒãããæ¹ã®ããã«ã泚æç¹ã玹ä»ããŸãã
åå¿è
ã®æ¹ã§ããããã®ãã€ã³ããæŒãããããšã§ãå®å
šãã€å¹ççã«ãŠã§ããµã€ããéå¶ããããšãã§ããŸãã
1. ãã¡ã€ã«åãšæ¡åŒµå
ãã¡ã€ã«åã¯åè§è±æ°åãšãã€ãã³ïŒ-ïŒãã¢ã³ããŒã¹ã³ã¢ïŒ_ïŒã®ã¿ã䜿çšããã¹ããŒã¹ãç¹æ®æåã¯é¿ããŸãããããã¡ã€ã«ã®æ¡åŒµåã.html
ã§ããããšã確èªããŠãã ããã
2. æåãšã³ã³ãŒãã£ã³ã°
HTMLãã¡ã€ã«ã®æåãšã³ã³ãŒãã£ã³ã°ã¯UTF-8ã䜿çšããããšãæšå¥šãããŸããããã«ãããå€ãã®æåã»ãããæ£ãã衚瀺ãããŸãã
HTMLãã¡ã€ã«ã®<head>
ã»ã¯ã·ã§ã³ã«ä»¥äžã®ã¡ã¿ã¿ã°ãå«ããŠãã ããã
<meta charset="UTF-8">
3. ãµãŒããŒãžã®æ¥ç¶æ å ±
ãµãŒããŒãžã®æ¥ç¶ã«ã¯ãå¿ ãã»ãã¥ã¢ãªFTPïŒSFTPïŒãFTPSã䜿çšããŠãã ãããããã«ãããããŒã¿ã®è»¢éãæå·åãããã»ãã¥ãªãã£ãåäžããŸãããã¹ãã£ã³ã°ãµãŒãã¹ããæäŸãããFTPã¢ã«ãŠã³ãæ å ±ïŒãã¹ãåããŠãŒã¶ãŒåããã¹ã¯ãŒããããŒãçªå·ïŒã䜿çšããŠæ¥ç¶ããŸãã
4. ãã£ã¬ã¯ããªã®å Žæ
HTMLãã¡ã€ã«ã¯ãµãŒããŒã®å
¬éãã£ã¬ã¯ããªïŒäŸ: public_html
ãwww
ïŒã«ã¢ããããŒãããŠãã ãããããã«ããããŠã§ããã©ãŠã¶ããã¢ã¯ã»ã¹å¯èœã«ãªããŸãã
ãã£ã¬ã¯ããªã®éå±€æ§é ãææ¡ããå¿ èŠãªãã¡ã€ã«ãæ£ããå Žæã«é 眮ããããšãéèŠã§ãã
5. ãã¡ã€ã«ã®æš©éèšå®
ã¢ããããŒããããã¡ã€ã«ã®æš©éã確èªããé©åã«èšå®ããŸããäžè¬çã«ã¯ãHTMLãã¡ã€ã«ã®æš©éã¯644ïŒææè ãèªã¿æžãããã®ä»ã¯èªã¿åãã®ã¿ïŒã«èšå®ããŸããFTPã¯ã©ã€ã¢ã³ãã䜿çšããŠãã¡ã€ã«ã®æš©éãèšå®ã§ããŸãã
6. ããã¯ã¢ããã®äœæ
HTMLãã¡ã€ã«ããã®ä»ã®é¢é£ãã¡ã€ã«ãç·šéããåã«ãå¿ ãããã¯ã¢ãããåã£ãŠãããŸããããããã«ãããäžãäžã®ãã©ãã«æã«ãå ã®ç¶æ ã«æ»ãããšãã§ããŸãã
ãã¹ãã£ã³ã°ãµãŒãã¹ãæäŸããããã¯ã¢ããæ©èœãå©çšããããšãæå¹ã§ãã
7. SSL/TLSã®èšå®
ãŠã§ããµã€ããHTTPSã§æäŸãããŠããããšã確èªããŠãã ãããSSL/TLS蚌ææžãã€ã³ã¹ããŒã«ãããŠã§ããµã€ãã®éä¿¡ãæå·åããããšã§ãããŒã¿ã®å®å šæ§ã確ä¿ã§ããŸãã
ãã¹ãã£ã³ã°ãµãŒãã¹ãç¡æã®SSL蚌ææžãæäŸããŠããå Žåããããå©çšããã®ãè¯ãã§ãããã
8. ãã¹ããšãããã°
æ¬çªç°å¢ã«ã¢ããããŒãããåã«ãããŒã«ã«ç°å¢ããã¹ãç°å¢ã§ãã¡ã€ã«ã®åäœã確èªããŠãã ãããããã«ãããäžå ·åãäºåã«çºèŠããä¿®æ£ããããšãã§ããŸãã
ãŸãããŠã§ããã©ãŠã¶ã®ããããããŒããŒã«ã䜿çšããŠãHTMLãCSSãJavaScriptã®ãšã©ãŒãèŠåããã§ãã¯ããŸãããã
9. äžè²«æ§ã®ããåœåèŠå
ãã¡ã€ã«åããã©ã«ãåãã¯ã©ã¹åãIDåãªã©ã¯ãäžè²«ããåœåèŠåã«åŸãããã«ããŸããããããã«ãããã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãåäžããŸãã
10. ããã¥ã¡ã³ãã®æŽåæ§
HTMLææžã®æŽåæ§ã確èªããããã«ãW3Cã®ããªããŒã·ã§ã³ããŒã«ã䜿çšããŠãææ³ãšã©ãŒãèŠåããã§ãã¯ããŸããããããã«ãããã¯ãã¹ãã©ãŠã¶äºææ§ãåäžãããŠã§ãããŒãžã®è¡šç€ºãåäœãå®å®ããŸãã
以äžã®æ³šæç¹ãå®ãããšã§ãHTMLãã¡ã€ã«ã®ã¢ããããŒããã¹ã ãŒãºã«è¡ããã»ãã¥ãªãã£ãããã©ãŒãã³ã¹ãåäžããŸãã
⌠ãšã«ããæ©ãç°¡åã«ãã©ãŒã ãäœæããããªãformrunããããã
formrunã¯ãå°éçãªç¥èãªãã«ããžã¥ã¢ã«è±ããªãã©ãŒã ãäœæã§ããããŒã«ã§ããè±å¯ãªãã³ãã¬ãŒãããçšéã«å¿ãããã®ãéžã³ãããã¹ããå
¥åããã ãã§ç°¡åã«ãã©ãŒã ãç·šéã»èšçœ®ã§ããŸããç¡æã§ãå©çšã§ããã®ã§ãŸãã¯è©Šãã«ãã©ãŒã ãäœæããŠã¿ãŠãã ããã
ãäžçŽç·šããåãåãããã©ãŒã ã®æé©å
æŽã«é«å質ãªãã©ãŒã äœæãè¡ãããå Žåãäžèšã®èšå®ãé²ããŸãããã
ãŠãŒã¶ããªãã£ã®åäž
ãŠãŒã¶ããªãã£ãåäžãããããã«ã¯ããã©ãŒã ã®äœ¿ãããããéèŠããããšãéèŠã§ãã
以äžã®ãã€ã³ãã«æ³šæããŸãããã
- èªåè£å®æ©èœïŒèªåè£å®æ©èœãå©çšããããšã§ããŠãŒã¶ãŒãå ¥åãç°¡åã«è¡ããããã«ããŸãã
- èŠèŠçãªãã£ãŒãããã¯ïŒå ¥åå 容ã«ãšã©ãŒãããå ŽåãèŠèŠçã«ãã£ãŒãããã¯ãæäŸããããšã§ããŠãŒã¶ãŒãä¿®æ£ãããããªããŸãã
ã»ãã¥ãªãã£ã®åŒ·å
ã»ãã¥ãªãã£ã¯ããåãåãããã©ãŒã ã®éèŠãªèŠçŽ ã§ãã
以äžã®æ¹æ³ã§ã»ãã¥ãªãã£ã匷åããŸãããã
- CAPTCHAã®å°å ¥ïŒèªåã¹ãã ãããããã®æ»æãé²ãããã«ãCAPTCHAãè¿œå ããŸãã
- å ¥åããŒã¿ã®ãµãã¿ã€ãºïŒãµãŒããŒåŽã§å ¥åããŒã¿ãé©åã«ãµãã¿ã€ãºããSQLã€ã³ãžã§ã¯ã·ã§ã³ãã¯ãã¹ãµã€ãã¹ã¯ãªããã£ã³ã°ïŒXSSïŒãªã©ã®æ»æãé²ããŸãã
ãµããŒãäœå¶ã®æ¹å
ãåãåããã«è¿ éã«å¯Ÿå¿ããããšã¯ã顧客æºè¶³åºŠãé«ããããã«éèŠã§ãã以äžã®æ¹æ³ã§ãµããŒãäœå¶ãæ¹åããŸãããã
- èªåè¿ä¿¡æ©èœïŒãåãåãããåãåã£ãããšãèªåã§è¿ä¿¡ããæ©èœãè¿œå ããŸãã
- FAQã®æŽåïŒãããã質åã«å¯Ÿããåçãäºåã«çšæããŠããããšã§ããåãåããã®ä»¶æ°ãæžããããšãã§ããŸãã
- ãã±ããã·ã¹ãã ã®å°å ¥ïŒãåãåããããã©ããã³ã°ãã察å¿ç¶æ³ã管çããããã®ãã±ããã·ã¹ãã ãå°å ¥ããŸãã
ãåãåãããã©ãŒã ã®æé©åã¯formrunããããã
![](https://form.run/media/wp-content/uploads/2022/10/ã¹ã¯ãªãŒã³ã·ã§ãã-2024-02-28-12.58.47-scaled.jpg)
ãformrunïŒãã©ãŒã ã©ã³ïŒãã¯ã䜿ãããããã©ãŒã ãäœæã§ããã ãã§ãªãããåãåãã管çãŸã§äžè²«ããŠè¡ããã®ãç¹åŸŽã§ããèšçœ®ãããã©ãŒã ãããåãåããããããããåãåããã®é²æãã«ã³ãã³æ¹åŒã§ç®¡çããŸããæ¡ä»¶ããšã«æ åœè ã®èšå®ãå¯èœã§ãã
reCAPTCHAæ©èœãSSL/TLSã«ããããŒã¿æå·åããµãŒããŒã¯24æéäœå¶ã§ç®¡çãããªã©ã»ãã¥ãªãã£äœå¶ãå å®ããŠããŸãã倧åãªé¡§å®¢ããŒã¿ãå®å¿ããŠæ±ããŸãã
ãŸããé¢åãªèªåè£å®æ©èœãèªåè¿ä¿¡ã¡ãŒã«ã®èšå®ãã¯ãªãã¯ã ãã§ç°¡åã«å®äºããŸãã
ç¡æã®ãã©ã³ãçšæããŠããã®ã§ããã²1床ãã©ãŒã ãäœã£ãŠã¿ãŠãã ããã
ãŸãšã
ãã¶ã€ã³æ§ã®é«ããåãåãããã©ãŒã ã¯ã顧客æºè¶³åºŠã®åäžã«ç¹ãããŸããåºæ¬æ§é ã®ãã³ãã¬ãŒãããå§ããŠãCSSã§ã®ã«ã¹ã¿ãã€ãºãããªããŒã·ã§ã³æ©èœã®è¿œå ãã¬ã¹ãã³ã·ããã¶ã€ã³ã®èšå®ãè¡ãããšã§ã䜿ããããé åçãªãã©ãŒã ãäœæããããšãã§ããŸãã
ãŸããHTMLãCSSã®ç¥èããªããŠããformrunã®ãããªããŒã«ã䜿ãã°ãç°¡åã«é«æ©èœãªãã©ãŒã ãäœæãã管çããããšãã§ããŸããç¡æãã©ã³ãæäŸãããŠããã®ã§ããã²äžåºŠè©ŠããŠã¿ãŠãã ããã
formrunããã©ãŒã äœæã顧客管çã«é¢ããæ å ±ãçºä¿¡ããŠãããŸãã
EFOïŒãšã³ããªãŒãã©ãŒã æé©åïŒãåãåãã察å¿ãªã©ã
ãã©ãŒã ã«é¢ãããæ©ã¿ã解決ããŸãã