PEAK XOOPS - How To : Design a Formmail with Pico in englishin japanese

How To : Design a Formmail with Pico

  • You cannot open a new topic into this forum
  • Guests cannot post into this forum
Previous post - Next post | Parent - Children.1 .2 .3 | Posted on 2007/9/29 7:52 | Last modified
gigamaster  »°Åù·³Áâ From: Geneva, Switzerland  Posts: 94
This should result with a validated xhtml form, I hope

1.Make a new content : myForm
a) Body with sample form that will validate XHMTL 1.0 Strict

2.Make a new content : myPage
a) HTML headers with style css
b) Body with html and smarty plugin

3.Free to design and Have Fun Sharing!

Votes:1 Average:10.00
Previous post - Next post | Parent - Children.1 | Posted on 2007/9/29 8:16 | Last modified
gigamaster  »°Åù·³Áâ From: Geneva, Switzerland  Posts: 94
1. Make New Content

Subject : myForm

Body :
[code]<form>

<h3>My Form Basic Information</h3>

<fieldset>
<label class="field-first">First Name *
<input type="text" name="first_name" value="" class="required" />
</label>
<label class="field-last">Last Name *<input type="text" name="last_name" value="" class="required" /></label>
<label class="field-address">Home Address
<input type="text" name="address" value="" /></label>
<label class="field-city">City
<input type="text" name="city" value="" /></label>
<label class="field-zip">Zip Code
<input type="text" name="zip" value="" /></label><br style="clear: left;" />
<label class="field-email">Email *<input type="text" name="youremail" value="" class="email required" /></label>
<label class="field-phone">Phone<input type="text" name="phone" value="" /></label>
</fieldset>

<h3>Choose Your Illusion *</h3>

<fieldset>
<input id="radiobutton_1" type="radio" name="radiobutton_type" value="" />
<label class="radioitem" for="radiobutton_1">D3 Modules set your imagination free</label>
<input id="radiobutton_2" type="radio" name="radiobutton_type" value="" />
<label class="radioitem" for="radiobutton_2">D3 Modules are intuitive and powerful </label>
<input id="radiobutton_3" type="radio" name="radiobutton_type" value="" />
<label class="radioitem" for="radiobutton_3">D3 Modules allow one to do almost everything</label>
</fieldset>

<h3>Your Opinion Counts</h3>

<fieldset>
<label class="field-describe">Tell us what is important to you :<br /><textarea name="message" cols="40" rows="5"></textarea></label>
</fieldset>

<h3>Your evaluation help to match your expectations</h3>

<fieldset>
<input id="checkbox_1" type="checkbox" name="d3modules" value="free" /><label for="checkbox_1" class="field-checkbox"><span class="radioitem">D3 Modules set your imagination free</span></label>
<input id="checkbox_2" type="checkbox" name="d3modules" value="powerful" /><label for="checkbox_2" class="field-checkbox"><span class="radioitem">D3 Modules are intuitive and powerful </span></label>
<input id="checkbox_3" type="checkbox" name="d3modules" value="all" /><label for="checkbox_3" class="field-checkbox"><span class="radioitem">D3 Modules allow one to do almost everything</span></label>
</fieldset>

<h3>Have Fun!</h3>

<fieldset>
<label>Click
Votes:1 Average:0.00
Previous post - Next post | Parent - Children.1 | Posted on 2007/9/29 8:51 | Last modified
gigamaster  »°Åù·³Áâ From: Geneva, Switzerland  Posts: 94
2. Make New Content

Subject : myPage

HTML headers :
check 'display the textarea'
<style type="text/css">
<!--

#myform {width: 340px; text-align: left;}

#myform fieldset {margin: 0;border: 0;padding: 0;}

#myform legend {display: none;}

#myform h3 {clear: both;padding: 5px 0px 10px 0px; font-size:14px;}

#myform label 
{display: block;
width: 310px;
font-size: 12px;
line-height: 14px;
padding: 0px 0px 12px 0px;}

#myform input {display: block;margin-top: 3px;}

#myform select {float: left;display: block;}

#myform label.field-first,
#myform label.field-address,
#myform label.field-city,
#myform label.field-email 
{clear: left;}

#myform label.field-first,
#myform label.field-last,
#myform label.field-city,
#myform label.field-email,
#myform label.field-phone 
{float: left;margin: 0px 10px 0px 0px;width: 150px;}

#myform label.field-first input,
#myform label.field-last input,
#myform label.field-email input,
#myform label.field-city input,
#myform label.field-phone input 
{float: left;width: 150px;padding: 0px;}

#myform label.field-zip 
{float: left;width: 80px;}

#myform label.field-zip input 
{float: left;width: 80px;}

#myform label.field-address 
{float: left;width: 310px;margin: 0px;}

#myform label.field-address input 
{float: left;width: 310px;padding: 0px;}

#myform input#radiobutton_1,
#myform input#radiobutton_2,
#myform input#radiobutton_3 
{clear: left;float: left;padding: 0px;margin: 0px;}

#myform label.radioitem 
{clear: none;margin: 0px 0px 0px 25px;padding: 0px 0px 15px 0px;}

#myform textarea {display: block;margin-top: 3px;}

#myform input#checkbox_1,
#myform input#checkbox_2,
#myform input#checkbox_3 
{clear: both;float: left;padding: 0px;margin: 0px;}

#myform label.field-checkbox 
{clear: none;margin: 0px 0px 0px 25px; padding: 0px 0px 15px 0px;}

-->
</style>

Body :
[code]<h1>My Page with My Form</h1>

<p>This sample form will validate XHMTL 1.0 Strict, and it will render with reasonable consistency across the following Web browsers:</p>

<ul>
<li>Safari 1.2 for Mac OS X</li>
<li>Safari 2.0 for Mac OS X</li>
<li>Safari 3.0 for Windows</li>
<li>OmniWeb 5.1.1 for Mac OS X</li>
<li>Internet Explorer 5.2 for Mac OS X</li>
<li>Camino 0.9a1 for Mac OS X</li>
<li>Firefox 1.0 for Mac OS X</li>
<li>Firefox 1.0.4 for Windows</li>
<li>Internet Explorer 5.5 for Windows</li>
<li>Internet Explorer 6.0 for Windows</li>
<li>Opera 7.54 for Windows</li>
<li>Opera 9.0 for Windows</li>
</ul>

<p>Forms are notoriously difficult to style, and to get a form even to this point takes some effort. <br />
So you are welcome to use this form in whole or in part to create one of your own.<br />
Khoi Vinh shared a markup and CSS simple and flexible to be applied by almost everyone.<br />
If you choose to credit the original author , that would be terrific.</p>
<p>If you can improve this markup and, or the CSS, using Gijoe Pico smarty please share your changes with<br />
the community
Votes:1 Average:0.00
Previous post - Next post | Parent - No child | Posted on 2007/9/30 6:17
GIJOE  ÀèǤ·³Áâ   Posts: 4110
It looks a good documentation!

I'm surprised with /!\ Attention
(I've misunderstood that it's a image file )

And do you know the differences between "formmail","formmail4fleamarket" and "survey"?

- formmail
-- send an email to "adminmail"

- formmail4fleamarket
-- send an email to the creator of the content.
-- store the query into extra table (admins can refer it in admin area)

- survey
-- no emails will be sent.
-- just store the query into extra table (admins can refer it in admin area)


Of course, you can add email addresses by adding a parameter to="" inside <{command}>
Votes:0 Average:0.00
Previous post - Next post | Parent - No child | Posted on 2007/9/30 16:29
Shine  ¾åÅùʼ From: Netherlands  Posts: 35
Will this documentation be included within the module as a readme file?
Would ben very handy for the future.

Thanks Gigamaster and offcourse GIJOE.
Votes:0 Average:0.00
Previous post - Next post | Parent - No child | Posted on 2007/10/1 10:15
gigamaster  »°Åù·³Áâ From: Geneva, Switzerland  Posts: 94
Update to fix css ID to avoid conflicts with Smarty.

+ remove form id (conflict with smarty)
+ div with id=myform
+ email class=required
+ test with opera 9
+ test with safari 3 for windows

Steps:
------

1. Make a new content with subject : myForm

2. Make a second content with subject : myPage



Follow instructions above to make a formmail, survey, etc.
Votes:2 Average:10.00

  Advanced search


Login
Username or e-mail:

Password:

Remember Me

Lost Password?

Register now!