1
damaster
How To : Design a Formmail with Pico
  • 2007/9/29 10:14

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


(i post this here, as it is XOOPS compatible and to avoid a flame war)

D3 Module : Pico
Site url :http://xoops.peak.ne.jp/

After translation, i start to play with Pico, as you all know now, it's my favorite module. And as usual I start to put my-self in troubles changing the smarty "formmail4fleamarket" to "formvalidation". I had to go through phpmyadmin to fix my smarty bug.

Finally I decide to reset everything and start with a new form.
Please, check the following example code.

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!

I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

2
damaster
Make a New Content : myForm
  • 2007/9/29 10:14

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


1. Make New Content

Subject : myForm

Body :
<form id="myform">

<
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" /></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 “Submit” below!</label>
<
input type="submit" name="submit" value="SUBMIT" />
</
fieldset>

</
form>


Filters : [x] Smarty(XoopsTpl)

Options : Uncheck all
[ ] Visible
[ ] Show in navigation
[ ] Show in menu
[ ] Allow comments
[ ] use cache
[ ] Enable it only for static contents
[x] Lock (only moderators can edit/delete it)

Maybe you can check the last one!

Finally, push the button
[ register this form ]

/!\ Attention Keep in mind the ...content_id=01?
from your site url. It will be needed later.
I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

3
damaster
Make a New Content : myPage
  • 2007/9/29 10:15

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


2. Make New Content

Subject : myPage

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

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

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

form#myform legend {display: none;}

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

form#myform label 
{displayblock;
width310px;
font-size12px;
line-height14px;
padding0px 0px 12px 0px;}

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

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

form#myform label.field-first,
form#myform label.field-address,
form#myform label.field-city,
form#myform label.field-email 
{clearleft;}

form#myform label.field-first,
form#myform label.field-last,
form#myform label.field-city,
form#myform label.field-email,
form#myform label.field-phone 
{floatleft;margin0px 10px 0px 0px;width150px;}

form#myform label.field-first input,
form#myform label.field-last input,
form#myform label.field-email input,
form#myform label.field-city input,
form#myform label.field-phone input 
{floatleft;width150px;padding0px;}

form#myform label.field-zip 
{floatleft;width80px;}

form#myform label.field-zip input 
{floatleft;width80px;}

form#myform label.field-address 
{floatleft;width310px;margin0px;}

form#myform label.field-address input 
{floatleft;width310px;padding0px;}

form#myform input#radiobutton_1,
form#myform input#radiobutton_2,
form#myform input#radiobutton_3 
{clearleft;floatleft;padding0px;margin0px;}

form#myform label.radioitem 
{clearnone;margin0px 0px 0px 25px;padding0px 0px 15px 0px;}

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

form#myform input#checkbox_1,
form#myform input#checkbox_2,
form#myform input#checkbox_3 
{clearboth;floatleft;padding0px;margin0px;}

form#myform label.field-checkbox 
{clearnone;margin0px 0px 0px 25pxpadding0px 0px 15px 0px;}

-->
</
style>


Body :
<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>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>        
</
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 CSSusing Gijoe Pico smarty please share your changes with<br />
the community — Feel free topost new versions of this form for others to benefit fromThanks!<br />
</
p>


<{
capture}>
<{
pico [color=990000]id="01"[/color]}>
<{/
capture}>
<{
formmail4fleamarket mail_body_pre="A query for validation existnContact webmaster as soon as possiblenn" from_name="XHTML Validation" cc_field_name="youremail" cc_mail_subject="A confirmation for your query" cc_mail_body_pre="Thank you for querying us.nThis is the content you have queriedn"}>


/!\ Attention Remember your ...content_id=01?
and add it to pico id="01" to render your "myForm" !

Filters : [x] Smarty(XoopsTpl)

Finally, push the button
[ register this form ]

Note :
1) Add a CSS ID to your form, so it will not override your module or theme CSS
2) Check submissions from Pico administration "Extras"

I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

4
damaster
Screenshot
  • 2007/9/29 12:40

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


A picture is worth a thousand words is a proverb that refers to the idea that complex stories can be told with just a single still image...

So, here is how it looks like within a minimalist theme (ie. cube classic)!

Resized Image
I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

5
damaster
Re: Screenshot
  • 2007/9/29 21:28

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


Since i start creating a smarty bug,
here is Gijoe clear explanation about
Pico smarty plugins to create forms

Quote:

- 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)


Have Fun !

I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

6
pAraN0iD
Re: Screenshot
  • 2007/9/30 5:47

  • pAraN0iD

  • Just popping in

  • Posts: 24

  • Since: 2007/4/16


Thanks. Take a while to understand this but ide ais interesting.

7
damaster
Re: Screenshot
  • 2007/9/30 12:05

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


Hi Paranoid
This module and this example are clear solutions for web designers.
Who don't need to care anymore with php development.

They can focus on render content and easily create forms,
surveys, etc. Include an ajax or css framework, etc.

Here, we create a form 'myForm' which will have its own ID
Then we create a page content 'myPage' where we include
'myForm' with specific smarty.
I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

8
damaster
Re: Screenshot
  • 2007/10/1 0:49

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


Quite strange this new 'policy' that disable 'edit' options from some posts of a forum thread...

Well, the following should 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.
I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

9
damaster
myForm
  • 2007/10/1 0:54

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


1. Make New Content

Subject : myForm

Body :
<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" /></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 “Submit” below!</label>
<
input type="submit" name="submit" value="SUBMIT" />
</
fieldset>

</
form>


Filters : [x] Smarty(XoopsTpl)

/!\ Attention Keep in mind the ...content_id=1?
from your site url. It will be needed later.

Options : Uncheck all
[ ] Visible
[ ] Show in navigation
[ ] Show in menu
[ ] Allow comments
[ ] use cache
[ ] Enable it only for static contents
[x] Lock (only moderators can edit/delete it)

Maybe you can check the last one!

Finally, push the button
[ register this form ]
I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

10
damaster
myPage
  • 2007/10/1 0:55

  • damaster

  • Just can't stay away

  • Posts: 556

  • Since: 2003/5/11


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 
{displayblock;
width310px;
font-size12px;
line-height14px;
padding0px 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 
{clearleft;}

#myform label.field-first,
#myform label.field-last,
#myform label.field-city,
#myform label.field-email,
#myform label.field-phone 
{floatleft;margin0px 10px 0px 0px;width150px;}

#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 
{floatleft;width150px;padding0px;}

#myform label.field-zip 
{floatleft;width80px;}

#myform label.field-zip input 
{floatleft;width80px;}

#myform label.field-address 
{floatleft;width310px;margin0px;}

#myform label.field-address input 
{floatleft;width310px;padding0px;}

#myform input#radiobutton_1,
#myform input#radiobutton_2,
#myform input#radiobutton_3 
{clearleft;floatleft;padding0px;margin0px;}

#myform label.radioitem 
{clearnone;margin0px 0px 0px 25px;padding0px 0px 15px 0px;}

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

#myform input#checkbox_1,
#myform input#checkbox_2,
#myform input#checkbox_3 
{clearboth;floatleft;padding0px;margin0px;}

#myform label.field-checkbox 
{clearnone;margin0px 0px 0px 25pxpadding0px 0px 15px 0px;}

-->
</
style>


Body :
<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 CSSusing Gijoe Pico smarty please share your changes with<br />
the community — Feel free topost new versions of this form for others to benefit fromThanks!<br />
</
p>

<
div id="myform>
<{capture}>
<{pico [color=990000]id="
1"[/color]}>
<{/capture}>
<{formmail4fleamarket mail_body_pre="
A query for validation existnContact webmaster as soon as possiblenn" from_name="XHTML Validation" cc_field_name="youremail" cc_mail_subject="A confirmation for your query" cc_mail_body_pre="Thank you for querying us.nThis is the content you have queriedn"}>
</div>



/!\ Attention Remember your "myForm" ...content_id=1?
To render your form use it with smarty <{pico id="1"}>

Filters : [x] Smarty(XoopsTpl)

Finally, push the button
[ register this form ]

Note :
1) Add a div with ID to design your form, so it will not override your module or theme CSS
2) Check submissions from Pico administration "Extras"

I like people more than machines or money. But that's me!
Lets do something good and great: Lets do open source!

Login

Who's Online

197 user(s) are online (113 user(s) are browsing Support Forums)


Members: 0


Guests: 197


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits