அழகான படிவமொன்றை வேர்ட்பிரஸினில் உருவாக்குதல்

படிவங்கள் என்று வருகின்ற போது வேர்ட்பிரஸில் இருக்கும் சிறந்த ஒரு இலவச நீட்சி 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;
}

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

குறிச்சொற்கள்: ,

5 பின்னூட்டங்கள்

  1. இரவி சொல்லுகின்றார்: - reply

    contact form 7 தான் நானும் முதலில் பயன்படுத்தினேன். ஆனால், அது தேவையில்லாத பக்கங்களில் கூட அதன் நிரலை இறக்கித் தளத்தை மெதுவாக்கி வந்தது. இப்போது எப்படி இயங்குகிறது எனப் பார்க்கவில்லை.

    படிவ உருவாக்கத்துக்கு http://www.gravityforms.com/ பயன்படுத்துகிறேன். இதை அடிச்சுக்கு இன்னொரு நீட்சி பிறந்து தான் வரணும் :). ஆனால், இது ஒரு கட்டண நீட்சி.

    • பகீ சொல்லுகின்றார்: - reply

      நானும் சில இணையத்தளங்களில் Gravityforms இனை பயன்படுத்தியிருக்கின்றேன். நிச்சயமாக இப்போது கிடைக்கின்ற படிவங்கள் தொடர்பான நீட்சிகளில் சிறப்பானதுதான்.

      இருந்தாலும் http://wordpress.org/extend/plugins/wordpress-form-manager/ இனை நீங்கள் பயன்பத்தி பார்த்தீர்களானால், Gravityform கட்டாயாம் தேவைதானா என்கின்ற கேள்வி எழும்.

  2. […] பற்றி சில நாட்களின் முன்னர் ஒரு பதிவில் பார்த்தோம். இப்பதிவில் Contact Form 7 இனை […]

  3. Kris சொல்லுகின்றார்: - reply

    tamil type panuvatharku font install seiya venduma?

    • பகீ சொல்லுகின்றார்: - reply

      யுனிக்கோட்டில் தட்டச்சிட உங்களிடம் எழுத்துரு ஏதும் இருக்கத்தேவை இல்லை. ஆனால் NHM Wirter போன்ற மென்பொருள் இருத்தல் வேண்டும்.