Forums

I tried to use mambot (tabs and slides in content itens - JoomlaWorks), but the in form doesn't work.
My form has many questions organized by category (like Pessoal Info, Business Info, etc).
So, my suggestion is this.
One special command that enable the tabs like that:
http://www.soliclima.com/formlib/fotovoltaica_conectada_red_formulario.php

You mean you tried to use the mambot inside the form code ? did you enable "enable mambot" in the form edit page, general tab ?

Cheers

Max

Yes, I installed the plugin(tabs & slides). In form, I set enable mambot, but, nothing happen when I put {tab=test} in my content in form code.

So the mambot is enabled and the "enable mambot" in Chronoforms is enabled ? no idea then, both Chronoforms and the mambot are for the same Joomla version ? in case its J1.5 you didn't use legacy ?

may be you can search the forums for the code to add tabs!

Cheers

Max

If you use the ChronoForms Mambot the tabs/sliders will work properly. HTH

My fail, now it is working... (I am sorry for this topic)

No worries, it took me some time to figure out as well.

This solution works for the sliders, I am however having problems with the form fields validation within the mambot.

Are there issues with validation working within the mambot?

If I view the form outside the mambot, validation works. hmm.

Hi kstlouis,

I suggest that you look at the JS lines of code loaded with the mambot and those loaded at the component page and see if there is any difference! if you have problem then let us know!

Cheers

Max

When using the mambot the following lines of code are missing:

<script src="components/com_chronocontact/js/prototype.js" type="text/javascript"></script>
<script src="components/com_chronocontact/js/effects.js" type="text/javascript"></script>
<script src="components/com_chronocontact/js/validation.js" type="text/javascript"></script>

Hi kstlouis,

Then you are using mootools with this form ? which Joomla version do you have ? Chronoforms version ? mambot version ?

Ok thanks for the hint.
Everything was the new version except for the mambot.
I upgraded the mambot and the validation seem to work fine now.

Thank you!

do you mind sharing your example of form using tabs? Or simply tell us the steps you took and provide a link where one might see your form in action. I am trying to duplicate a a multi-page form I created using facileforms but not sure how to do it in Chronoforms since the tabs are created in facileforms.

thx.

P.s. I am trying to base all of my form development onchronoengine as it provides the best flexibility to layout the form.

Hi Obisi,

to start a tab panel and open the first tab :

<?php
			jimport('joomla.html.pane');
			$pane   = JPane::getInstance('tabs');
			echo $pane->startPane("content-pane2");
			echo $pane->startPanel( 'General', "general" );
		?>

to end the first tab and open the 2nd one :

<?php
			echo $pane->endPanel();
			echo $pane->startPanel( 'Legend', "legend" );
		?>

to close the 2nd one and the panel :

<?php
			echo $pane->endPanel();
			echo $pane->endPane();
		?>

Regards

Max

Max--

I've not seen anyone who develops a software and moderates a forum as well as you do. This community owes you kudos and financial support. I will do my part by buying yur product soon after I get my cobwebs cleared.

Now my follow up question:

Do I put the form code after this statement in each tab:

echo $pane->startPanel( 'Legend', "legend" );

I am also assuming by placing the "submit" button in the last panel, all of the data entered on each tab will then be collected and sent. Right?
Regarding payment integration, will my current strategy of including the Paypal dynamic form in the Onsubmit after email sending still work? That is, does this that form get displayed in an additional tab or just simply a new web page?
Lastly, if I need to do a review in one of the tabs before submitting the form, do I include that script in the JS tab or in the tab in the form code?

Thx

Hi obisi, thank you!

#1 yes
#2 new web page
33 I don't know how to do this or didn't understand it!

Regards

Max

I am sorry guys to post the form code below but I have checked and used Dreamweaver validator to validate the code as correct with no errors but I am geting the following errors when pasted into CF and run.

Parse error: syntax error, unexpected '<' in C:\wamp\www\rsg\components\com_chronocontact\chronocontact.html.php(320) : eval()'d code on line 21

I can't seem to find the "unexpected < character" on any line of the code. Here's the form code, maybe the error refers to something else. Please note that I am on J1.5 Thx

============== start form code implementing 2 form tabs =========================

<style type="text/css">
<!--
.style1 {color: #FFFF00}
.style2 {
	color: #FFFFFF;
	font-weight: bold;
}
.style3 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: large;
}
-->
</style>

<?php
         jimport('joomla.html.pane');
         $pane   = JPane::getInstance('tabs');
         echo $pane->startPane("coFormPage2");
         echo $pane->startPanel( 'Property', "property" );
<table width="740" border="0" align="center">
    <tr>
      <td colspan="4" bgcolor="#FF0000"><div align="center">
        <p class="style3">RIVERS STATE OF NIGERIA</p>
        <p class="style2">APPLICATION FOR A CERTIFICATE OF OCCUPANCY ON UNDEVELOPED</p>
        <p class="style2">RESIDENTIAL, URBAN & RURAL LAND</p>
      </div></td>
    </tr>
    <tr>
      <td width="27"><div align="center">12</div>
        <label></label>
      <div align="right"></div></td>
      <td width="360"><div align="right">Select capacity in which you own this property :</div></td>
      <td width="164" bgcolor="#99CCCC"><p>
        <label>
          <input type="radio" name="ownershipType" value="Lease" id="ownershipType_0" />
          Lease</label>
        <br />
        <label>
          <input type="radio" name="ownershipType" value="Purchase" id="ownershipType_1" />
          Purchase</label>
        <br />
        <label>
          <input type="radio" name="ownershipType" value="Inheritance" id="ownershipType_2" />
          Inheritance</label>
        <br />
      </p></td>
      <td width="165" bgcolor="#99CCCC"><label>Date since owned:
          <input type="text" name="ownershipDate" id="ownershipDate" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">13</div></td>
      <td><div align="right">Upload registration particulars of Power of Attorney (if any):</div></td>
      <td colspan="2" bgcolor="#99CCCC"><label>
        <input type="file" name="powerOfAty" id="powerOfAty" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">14.</div></td>
      <td><div align="right">Property is to be used for::</div></td>
      <td colspan="2" bgcolor="#99CCCC"><p>
        <label>
          <input type="radio" name="propertyUse" value="Residential" id="propertyUse_0" />
          Residential</label>
        <br />
        <label>
          <input type="radio" name="propertyUse" value="Commercial" id="propertyUse_1" />
          Commercial</label>
        <br />
        <label>
          <input type="radio" name="propertyUse" value="Industrial" id="propertyUse_2" />
          Industrial</label>
        <br />
        <label>
          <input type="radio" name="propertyUse" value="Residential/Commercial" id="propertyUse_3" />
          Residential/Commercial</label>
        <br />
        <label>
          <input type="radio" name="propertyUse" value="Social/Religious" id="propertyUse_4" />
          Social/Religious</label>
        <br />
      </p>        <label></label></td>
    </tr>
    <tr>
      <td><div align="center">15.</div></td>
      <td><div align="right">Describe exact location of property (e.g. plot on a named layout):</div></td>
      <td bgcolor="#99CCCC"><label>
        <textarea name="propertyLocation" id="propertyLocation" cols="45" rows="5"></textarea>
      </label></td>
      <td bgcolor="#99CCCC"><label>Upload property layout plan:
          <input type="file" name="layoutPlan2" id="layoutPlan2" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">16.</div></td>
      <td><div align="right">Approximate size of property:</div></td>
      <td bgcolor="#99CCCC"><label>Area of Land:
          <input type="text" name="propertySize" id="propertySize" />
      </label></td>
      <td bgcolor="#99CCCC"><label>Upload Survey Plan:
          <input type="file" name="surveyPlan" id="surveyPlan" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">17.</div></td>
      <td><div align="right">
        <p>Evidence of title:</p>
        </div></td>
      <td bgcolor="#99CCCC"><p>
        <label>
          <input type="radio" name="titleEvidence" value="Conveyance" id="titleEvidence_0" />
          Conveyance</label>
        <br />
        <label>
          <input type="radio" name="titleEvidence" value="Agreement" id="titleEvidence_1" />
          Agreement</label>
        <br />
        <label>
          <input type="radio" name="titleEvidence" value="Receipts" id="titleEvidence_2" />
          Receipts</label>
        <br />
      </p>        <label></label></td>
      <td bgcolor="#99CCCC"><label>Upload copy of evidence:
          <input type="file" name="evidencePhotocopy" id="evidencePhotocopy" />
      </label></td>
    </tr>
    <tr>
      <td>18</td>
      <td>State whether property is:</td>
      <td colspan="2" bgcolor="#99CCCC"><label>
        <input type="radio" name="propertyLienStatus" value="Freehold" id="propertyLienStatus_0" />
Freehold</label>
        <br />
        <label>
        <input type="radio" name="propertyLienStatus" value="Leasehold" id="propertyLienStatus_1" />
Leasehold</label>
        <br />
        <label>
        <input type="radio" name="propertyLienStatus" value="Subject to Mortgage" id="propertyLienStatus_2" />
Subject to Mortgage</label></td>
    </tr>
    <tr>
      <td>19</td>
      <td><div align="right">Particulars of  approved building plan (if any):</div></td>
      <td colspan="2" bgcolor="#99CCCC"><label>
        <textarea name="approvalParticulars" id="approvalParticulars" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
    <tr>
      <td>20</td>
      <td><div align="right">Money planned to invest for developing or completing development of land:</div></td>
      <td bgcolor="#99CCCC"><label>
        <input type="text" name="investmentPlanned" id="investmentPlanned" />
      </label></td>
      <td bgcolor="#99CCCC"><label>When do you plan to make the investment:
          <input type="text" name="startDate" id="startDate" />
      </label></td>
    </tr>
    <tr>
      <td>21</td>
      <td><div align="right">Give approximate size of other properties owned in Rivers State::</div></td>
      <td colspan="2" bgcolor="#99CCCC"><label>
        <textarea name="sizeOfotherProp" id="sizeOfotherProp" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
    <tr>
      <td><div align="center">22.</div></td>
      <td><div align="right">Current income tax receipt or particulars of current P.A.Y.E.</div></td>
      <td bgcolor="#99CCCC"><p>
        <label></label>
        <label>
        <input type="file" name="incomeTaxReceipt" id="incomeTaxReceipt" />
        </label>
        <br />
      </p>        <label></label></td>
      <td bgcolor="#00FF00"><label>
        <input type="submit" name="submit" id="submit" value="Send Form" />
      </label></td>
    </tr>
  </table>
      ?>

<?php
         echo $pane->endPanel();
         echo $pane->startPanel( 'Personal', "personal" );

  <table width="740" border="0" align="center">
    <tr>
      <td colspan="3" bgcolor="#0000FF"><div align="center">
        <p class="style3">RIVERS STATE OF NIGERIA</p>
        <p class="style2">APPLICATION FOR A CERTIFICATE OF OCCUPANCY ON UNDEVELOPED</p>
        <p class="style2">RESIDENTIAL, URBAN & RURAL LAND</p>
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><div align="right">Property located in (name of town or village): 
      </div>
        <label></label>
      <div align="right"></div></td>
      <td bgcolor="#99CCCC"><input name="propLocation" type="text" class="style1" id="propLocation" size="35" /></td>
    </tr>
    <tr>
      <td width="27"><div align="center">1.</div></td>
      <td width="360"><div align="right">Applicant's Titles (Select all applicable):</div></td>
      <td width="331" bgcolor="#99CCCC"><span class="style1">
        <label>
        <select name="applicantTitle" id="applicantTitle">
          <option>Chief</option>
          <option selected="selected">Mr.</option>
          <option>Mrs.</option>
          <option>Dr.</option>
          <option>Prof.</option>
          <option>Rev.</option>
          <option>Pastor</option>
          <option>Hon.</option>
          <option>Alhaji</option>
          <option>Mallam</option>
          <option>Sir.</option>
          <option>Barrister</option>
          <option>Engineer</option>
          <option>Architect</option>
          <option>Bishop</option>
        </select>
        </label>
      </span></td>
    </tr>
    <tr>
      <td><div align="center">2.</div></td>
      <td><div align="right">Applicant's full names:</div></td>
      <td bgcolor="#99CCCC"><label>
        <input name="name" type="text" id="name" size="35" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">3.</div></td>
      <td><div align="right">Applicant's Photograph (Please upload):</div></td>
      <td bgcolor="#99CCCC"><label>
        <input type="file" name="passport" id="passport" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">4</div></td>
      <td><div align="right">Occupation of applicant:</div></td>
      <td bgcolor="#99CCCC"><label>
        <input type="text" name="occupation" id="occupation" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">5</div></td>
      <td><div align="right">Name and address of current or last employer (if any):</div></td>
      <td bgcolor="#99CCCC"><label>
        <textarea name="employer" id="employer" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
    <tr>
      <td><div align="center">6.</div></td>
      <td><div align="right">Home town:</div></td>
      <td bgcolor="#99CCCC"><label>
        <input name="homeTown" type="text" id="homeTown" size="35" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">7.</div></td>
      <td><div align="right">Local Government Area (LGA):</div></td>
      <td bgcolor="#99CCCC"><label>
        <select name="LGA" id="LGA">
          <option value="Abua/Odial" selected="selected">Abua/Odial</option>
          <option value="Ahoada">Ahoada</option>
          <option value="Ahoada West">Ahoada West</option>
          <option value="Akuku">Akuku</option>
          <option value="Andoni/Opobo">Andoni/Opobo</option>
          <option value="Aseri Toru">Aseri Toru</option>
          <option value="Bonny">Bonny</option>
          <option value="Degema">Degema</option>
          <option value="Ehana">Ehana</option>
          <option value="Elerne">Elerne</option>
          <option value="Emohua">Emohua</option>
          <option value="Etche">Etche</option>
          <option value="Gokana Tai/Elerne">Gokana Tai/Elerne</option>
          <option value="Ikwerre">Ikwerre</option>
          <option value="Iyigbo">Iyigbo</option>
          <option value="Ndoni">Ndoni</option>
          <option value="Obio/Akpor">Obio/Akpor</option>
          <option value="Ogba/Egbema">Ogba/Egbema</option>
          <option value="Ogu/Bolo">Ogu/Bolo</option>
          <option value="Okrika">Okrika</option>
          <option value="Omumma">Omumma</option>
          <option value="Opobo/Nkoro">Opobo/Nkoro</option>
        </select>
      </label></td>
    </tr>
    <tr>
      <td><div align="center">8.</div></td>
      <td><div align="right">State of Origin:</div></td>
      <td bgcolor="#99CCCC"><label>
        <input name="stateOrigin" type="text" id="stateOrigin" size="35" />
      </label></td>
    </tr>
    <tr>
      <td><div align="center">9.</div></td>
      <td><div align="right">Present Contact Address in Nigeria:</div></td>
      <td bgcolor="#99CCCC"><label>
        <textarea name="naijaAddress" id="naijaAddress" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
    <tr>
      <td><div align="center">10.</div></td>
      <td><div align="right">
        <p>Corporate name if registered under the Companies Decree or Registration of Business Names Act or Co-operative name if licensed under the Co-operative Societies Law or under the Land (Perpetual Succession) Act:</p>
        </div></td>
      <td bgcolor="#99CCCC"><label>
        <textarea name="coyName" id="coyName" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
    <tr>
      <td><div align="center">11.</div></td>
      <td><div align="right">Registration details of paragraph 8 above (e.g. by lease, by purchase, by inheritance or how else and since when (date)</div></td>
      <td bgcolor="#99CCCC"><label>
        <textarea name="regDetails" id="regDetails" cols="45" rows="5"></textarea>
      </label></td>
    </tr>
  </table>
      ?>

<?php
         echo $pane->endPanel();
         echo $pane->endPane();
      ?>

=====================  end form code ( with 2 tabs) ===================

I see you started PHP and didn't close the tag before going into HTML :

<?php
jimport('joomla.html.pane');
$pane = JPane::getInstance('tabs');
echo $pane->startPane("coFormPage2");
echo $pane->startPanel( 'Property', "property" );
<table width="740" border="0" align="center">

Max

Sorry Max I am not following. I am using the code skeleton in the "forms and tab" thread that asked that I put my form code in a specific section wihtin the <php code block. My form codes (page 1 and page 2) start with the <table> tags.

Pls advise on how I should modify the code or point an arrow (or the word "remove") on the line that is in error. I looked at the code again against your resonse and can't see what you're advising to do.

Thx.

Hi obisi7,

The code that Max posted changes from PHP - which must be inside <?php . . .?> tags to html - which must not.

    <?php
    jimport('joomla.html.pane');
    $pane = JPane::getInstance('tabs');
    echo $pane->startPane("coFormPage2");
    echo $pane->startPanel( 'Property', "property" );

?> <!-- add this php tag to separate the php and the html -->

    <table width="740" border="0" align="center"> 

Bob

Got it. However, the tabs are listed vertically in a left column. I was expecting a horizontal layout above the form.
Is there a way to achieve that? That is have the form displayed below the tabs, arranged in a horizontal layout, when clicked.
An additional enhancement would be to color the tab backround as well. I suspect this has to be done in the php code segment.

Can you assist; rather please assist as I believe you'd know how to accomplish this.

Thx

Hi obisi,

show me a screenshot of your tabs, maybe this is an HTML layout problem.

cheers,
Max

Max--

I don't have a screen grabber program to show you a screenshot. However, let me try and describe better than I did before.
1. there are 2 tabs created via the php code named Property and Personal (see form code sent earlier for reference).
2. Both tabs are stacked above each other in a vertical column on the left and in the order in which they appear in form code.
3. The form attached to each tab (via html code) is displayed as expected upon clicking the corresponding tabs.

From your suggestion, it seems putting each tab's php and form code in a table cell arranged in a horizontal fashion should correct the layout issue. I will try that trick to see and update everyone.

However, I do have these remaining question on the form tabs:

1. How can one apply colors to the tab's background since their creation is called from the Joomla panel call routine and no param option for this that I know of. Some background/foreground color values will be desirous.

2. How can one implement form data review prior to submission for this or any form submission (multi or single)? I've read Bob's suggestion of creating cookies and storing data as you go from page to page but the mechanics of doing it is not obvious ot newbies like us. It would be most helpful if such code snippets and other ideas on mulit-form submission in this forum can be harmonized into a complete example that can be adapted to other needs. I offer my code for all to use as the framework. This sample will combine the use of form tabs, multi-page forms with data review before submission expressed desires of many users of CF.

BTW, I've enjoyed CF and paid for a license not only b'cos of how good the program is but the support made the difference for me. Folks in this forum are friends and gentlemen and ladies.

Thx for your continued asistance with this need.

Hi obisi,

I didn't play with the tabs css before, but I think you can change the colors easily by finding the correct css classes to change and including them in your form code between style tags.

you mean you need to have a review page for submitted data before a final submission ? try to make a new form and make teh first form submit to the 2nd one by changing the action url, then, use the PHP code <?php echo $_POST["field_name_at_form1"]; ?> at the 2nd form to show the submitted data and publish hidden fields with it!

Cheers,
Max

Max--

Thanks as usual for your willinness to help newbies like me.
Regarding your advice, please direct on how to do them namely:

1. where to find the correct css classes for the tabs
2. once found, where to place the modified css classes in my site
3. your advice on the review page sounds very good but not sure how to implement or code the different parts. Can u describe this using 3 forms: form 1 submitting to form2 and form 2 submitting results of forms 1 and 2 to form 3 (review page). How to implementthe hidden fields (say 3 form fields: name, email, and address) to be captured from form1, form 2 and submitted to form 3 (the review page form) and how to edit the data in case there is an error before final submission.

I am sorry to be asking for specifics but that is the only way I learn and can implement your good suggestions.

Thx my friend.

Hi obisi,

#1- you can find the css classes by viewing the tabs and using Firefox with Firebug to write click a tab and choose "inspect element", this is the easiest way!

#2- at form 2 and 3, add :

<input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">

Cheers,
Max

Did all this stuff work out?
I'm doing the same thing: Forms with Tabs(joomlaworks).
Now the validation in each tab is the main problem.
I'd appreciate any hints or code snipets..

cheers

Hi ifritz,

Validation in tabs is a problem because you cannot always see the input being validated. There have been a couple of long threads about this a month or so back.

Bob

I know, yes. Thats why i'm struggling a bit right know.
How about creating three froms and posting all the fields from one to another and vice versa?

Hi ifritz,

That's easier - the multi-page plugin is designed to help with that.

Bob