அழகான படிவமொன்றை வேர்ட்பிரஸினில் உருவாக்குதல்
படிவங்கள் என்று வருகின்ற போது வேர்ட்பிரஸில் இருக்கும் சிறந்த ஒரு இலவச நீட்சி Contact form 7. மிக இலகுவாக படிவங்களை உருவாக்கிக் கொள்ள முடியவதும், அதனை இலகுவாக அழகுபடுத்திக் கொள்ள முடிவதும் இதன் சிறப்பம்சமாகும். இந் நீட்சியை பயன்படுத்தி வித்தியாசமானதொரு படிவத்தை எவ்வாறு உருவாக்கிக் கொள்ளுவது என்று படிமுறையாக பார்ப்போம்.
௧. படிவத்தொகுப்பானை பயன்படுத்தி உங்கள் படிவத்தினை கீழ் காட்டியவாறு உருவாக்கிக் கொள்ளுங்கள். படிவம் ஒரு பந்திக்குள் இடைச்செருகப் பட்டுள்ளது.
-
சில விடயங்களை இங்கே கவனித்துக் கொள்ள வேண்டும்.
அ. பந்தி முழுவதனையும் “p” tag இனால் மூடிக்கொள்ள வேண்டும்.
ஆ. Contact form 7 இன் Watermark வசதியை label ஆக பயன்படுத்திக் கொள்ளலாம்.
௨. உங்கள் படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக் கொள்ளுங்கள்.
௩. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும். (உங்கள் வார்ப்புருவைப் பொறுத்து மாறுபடலாம்.)
௪. கொஞ்ச css உங்கள் படிவத்தை அழகாக்கி விடும். (எனது படிவத்தை நான் myform என்கின்ற css id இனால் வேறுபடுத்தியிருக்கின்றேன்.)
#myform{
width:650px;
}
#myform p{
font-size:14px;
line-height:30px;
}
#myform input[type="text"]{
border:none;
border-bottom:1px dotted #000;
background: transparent;
font-size :14px;
width:250px;
}
#myform .watermark{
color:#ccc;
}
#myform select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-padding-end: 10px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(images/select_arrow.gif),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-color:transparent;
background-position: center right;
background-repeat: no-repeat;
border:none;
border-bottom: 1px dotted #000;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
#myform input[type="submit"]{
padding:8px 18px;
background:#222;
color:#fff;
border: 1px solid #fff;
float:right;
margin-right:20px;
}
#myform input[type="submit"]:hover{
background:#fff;
color:#222;
border: 1px solid #222;
}
௫. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும்.
