How To : Design a Formmail with Pico [Theme designer talk]

1

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

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 Informationh3> 
 
<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 freelabel> 
<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 everythinglabel> 
fieldset> 
 
<h3>Your Opinion Countsh3> 
 
<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 expectationsh3> 
 
<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 freespan>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 everythingspan>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

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"> 
 
style>

Body :

 <h1>My Page with My Formh1> 
 
<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 Xli> 
<li>Safari 2.0 for Mac OS Xli> 
<li>OmniWeb 5.1.1 for Mac OS Xli> 
 
<li>Internet Explorer 5.2 for Mac OS Xli> 
<li>Camino 0.9a1 for Mac OS Xli> 
<li>Firefox 1.0 for Mac OS Xli> 
<li>Firefox 1.0.4 for Windowsli> 
<li>Internet Explorer 5.5 for Windowsli> 
<li>Internet Explorer 6.0 for Windowsli> 
 
<li>Opera 7.54 for Windowsli>         
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 — Feel free topost new versions of this form for others to benefit from. Thanks!<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

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

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

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

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

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

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 Informationh3> 
 
<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 freelabel> 
<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 everythinglabel> 
fieldset> 
 
<h3>Your Opinion Countsh3> 
 
<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 expectationsh3> 
 
<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 freespan>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 everythingspan>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

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"> 
 
style>

Body :

 <h1>My Page with My Formh1> 
 
<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 Xli> 
<li>Safari 2.0 for Mac OS Xli> 
<li>Safari 3.0 for Windowsli> 
<li>OmniWeb 5.1.1 for Mac OS Xli> 
<li>Internet Explorer 5.2 for Mac OS Xli> 
<li>Camino 0.9a1 for Mac OS Xli> 
<li>Firefox 1.0 for Mac OS Xli> 
<li>Firefox 1.0.4 for Windowsli> 
<li>Internet Explorer 5.5 for Windowsli> 
<li>Internet Explorer 6.0 for Windowsli> 
<li>Opera 7.54 for Windowsli> 
<li>Opera 9.0 for Windowsli>         
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 — Feel free topost new versions of this form for others to benefit from. Thanks!<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"}>

/!\ 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!

Stats
Goal:	$100.00
Due Date:	Nov 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

How To : Design a Formmail with Pico

Make a New Content : myForm

Make a New Content : myPage

Screenshot

Re: Screenshot

Re: Screenshot

Re: Screenshot

Re: Screenshot

myForm

myPage

Login

Search

Recent Posts

XOOPS MyMenus 1.54.0 Beta 10

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}