இரு நிரல் படிவம் ஒன்றை வேர்ட்பிரஸில் உருவாக்குதல்

வேர்ட்பிரஸில் ஒரு அழகான படிவம் ஒன்றினை உருவாக்குவது பற்றி சில நாட்களின் முன்னர் ஒரு பதிவில் பார்த்தோம். இப்பதிவில் Contact Form 7 இனை பயன்படுத்தி இரு நிரல்கள் உடைய ஒரு படிவம் ஒன்றை உருவாக்குவதனை பார்ப்போம்.

முதலில் Form editor இனை பயன்படுத்தி படிவத்தை உருவாக்கிக் கொள்ள வேண்டும். எங்களுக்கு இரு நிரலில் படிவம் தேவை என்பதனால் Form field களை css class களினால் கீழ் காட்டியது போல வேறுபடுத்திக் கொள்ள வேண்டும்.

<div id="two-column">
<div id="left">
First Name[text* first-name]
Email[email* your-email]
</div>

<div id="right">
Last Name[text* last-name]
Phone[text* your-phone]
</div>

Subject[text* your-subject]
Your message [textarea your-message]

[submit "Send"]
</div>

இங்கே சில விடயங்களை கவனிக்க வேண்டும்.
அ. ஒவ்வொரு Form field உம் P tag இனால் சூழப்பட்டுள்ளன.
ஆ. Label உம் Form element உம் br tag இனால் வேறுபடுத்தப்பட்டுள்ளன.
இ. #two-column என்கின்ற CSS ID இனால் முழு படிவமும் சூழப்பட்டுள்ளது.
ஈ. இடது புறம் இருக்கவேண்டியவை #left என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.
உ. வலது புறம் இருக்கவேண்டியவை #right என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.

படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக்கொள்ளுங்கள். பொதுவாக கீழ்க்காட்டப்பட்டது போல படிவம் இருக்கும்.

இப்பொழுது கொஞ்சம் CSS இனை சேர்ப்பதன் மூலம் படிவத்தை அழகாக்கிக் கொள்ளப் போகின்றோம்.

#two-column{
    width: 550px;
}
#two-column #left{
    width: 300px;
    float: left;
}
#two-column #right{
    width: 250px;
    float: right;
}
#two-column p{
    margin-bottom: 12px;
}
#two-column input[type="text"]{
    border:none;
    border:1px solid #000;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
    padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
    width:240px;
}
#two-column textarea {
    position: relative;
    padding: 5px;
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
}
#two-column input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
    background: #eee;
}
#two-column input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டியதுபோல இருக்கும்.