Jquery tabs with contact form

[asosking]

Hi, how can I do something like this: 4 tabs and in one of this always a contact form.thanks

[kongondo]

You mean like this? So as to do this...If yes, there's a solution right on that post.

[asosking]

Hi kongondo, thanks for your answer, but this isn't what I will. I give a example:

4 jquery tabs:

Tab1 name

+Tab1 content

Tab2 name

+Tab2 content

And now:

Tab3 contact us (as name)

+and as content for this tab:contact-form

I hope it is now clear enough and SORRY for my English. Thanks anyway

[diogo]

Still not clear. You say 4 tabs, but there are only 3 there. Can you make a quick sketch to explain?

[Macrura]

this should be not a problem.. don't reinvent the wheel?

just make your tabs (css or jquery based) and then embed your form in the last tab

maybe you need to buy some tabs on codecanyon?

http://codecanyon.net/item/tabs-accordion/2906434?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=Lamovo

http://codecanyon.net/item/zozo-tabs/3327836?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=ZozoUI

[asosking]

@diogo Sorry my mistake, 3 tabs and the last have this contact form.thanks

[Luis]

Mh Joshs html kickstart,Twitter bootstrap,zurbs Fundation, gumby... pick one of those. They all provide some tab thingy

[asosking]

hi Luis, thanks, but my problem is:how can I make a pw template like this,should I make this with repeater fields, I don't understand how, but I will learn this.

[Macrura]

you can do the tabs with fields, repeaters or pages; depends on how flexible you need and the specific application. I've done tabs with all 3 scenarios;

here are examples – note you will have to use the structure and class/ID names needed by your scenario (bootstrap etc..)

1.) Tabs using 2 fields on a page:

<div class="tabs tab-container">
        <ul class="etabs">
            <li class="tab"><a href="#tab-1">Japanese</a></li>
            <li class="tab"><a href="#tab-2">English</a></li>
        </ul>
    <div class="panel-container">
        <div id="tab-1">
            <?php echo $page->bio_jp; ?>                
        </div>
        <div id="tab-2">
            <?php echo $page->bio_en; ?>
        </div>
    </div><!-- end panel container -->
    
</div><!-- end tab-container -->

Example 2 - tabs using repeaters:

<?php //check to see if there are tabs
          if(count($page->tabs)) { ?>
       <div class="clear"></div>    
     <div class="tabs tab-container">
        <ul class="etabs">
        <li class="tab"><a href="#tab-0">Additional Album Information</a></li>
            <?php
            $counter = 0;
            foreach($page->tabs as $tab) {
            $counter++;
            ?>
          <li class="tab"><a href="#tab-<?php echo $counter ?>"><?php echo $tab->tab_title ?></a></li>
          <?php } ?>              
        </ul>
    
    <div class="panel-container">
      <div id="tab-0">
        <p>Please use the tabs to select further info.</p>
      </div>
              <?php
            $counter = 0;
            foreach($page->tabs as $tab) {
            $counter++;
            ?>        
      <div id="tab-<?php echo $counter ?>">
        <?php echo $tab->tab_content ?>
      </div><?php } ?>
      
    </div> <!-- end panel container -->       
  </div><!-- end tab container --><?php } ?>

Example 3 using child pages (bootstrap)

<div class="content-tabs"> 
	<!-- wrapper required -->
	
	<?php $tabs = $page->children; ?>					
	<ul class="tabs">
	<?php foreach ($tabs as $tabtitle) { 
	?>						
		<li class="tab"> <a href="#<?php echo $tabtitle->name; ?>"><?php echo $tabtitle->title ?></a> </li><?php } ?>
	</ul>
	
	<div class="panels">
	<?php foreach ($tabs as $tabcontent) { 
	?>	
		<div class="pane" id="<?php echo $tabcontent->name; ?>">
			<?php echo $tabcontent->body . "\n"; ?>
		</div>
		<!--close #<?php echo $tabcontent->name; ?> --><?php } ?>						
	</div>
	<!--close panels--> 
</div>
<!-- /.content-tabs--> 

[MatthewSchenker]

Greetings,

It's also easy to create tabs with a simple JQuery snippet.  I put together a Fiddle, which I use on a lot of my sites:

http://jsfiddle.net/matthewschenker/avP9W/

Just insert your own ProcessWire references, similar to what you see in the basic structure below:

<ul id="simple-tabs">
    <li><a id="tab1">Form 1</a></li>
    <li><a id="tab2">Form 2</a></li>
    <li><a id="tab3">Form 3</a></li>
</ul>
<div class="simple-tabs-container" id="tab1C">
    <h2><?php $page->form1_name; ?></h2>
    [YOUR FORM1 ELEMENTS HERE]
</div>
<div class="simple-tabs-container" id="tab2C">
    <h2><?php $page->form2_name; ?></h2>
    [YOUR FORM2 ELEMENTS HERE]
</div>
<div class="simple-tabs-container" id="tab3C">
    <h2><?php $page->form3_name; ?></h2>
    [YOUR FORM3 ELEMENTS HERE]
</div>

Just call the JQuery script directly below the code shown above, then style it with your own CSS.

Thanks,

Matthew

[kongondo]

Matthew,

Thanks for this. Small typo, the last li -> a also has id= 2 instead of id = 3. 

Good example!

[MatthewSchenker]

Hello,

Thanks kongondo!  I was copying a two-tab example into a three-tab example.

Fixed in the post above.

Thanks again,

Matthew