Thanks Towhid,

That worked perfectly. 🙂

Sorry, not sure what happened there.

Hopefully you can see the image below.

If not please click this link click me

Cheers.

Hi Towhid,

Thanks for the response. I had a look and understand that adding multiple forms to the same page is currently not possible.

Here is what I have I done as a workaround for anyone who want’s to give the impression of multiple forms on the same page

Create and style an unordered list to your liking (I used this article for style reference). Once you have your list you can create multiple pages, one for each form you want to create. Then copy the <ul> to each page, link each <li> item to the appropriate pages you have just created. You need a “current” class to display only the content from the <li> item you want.

The HTML I used

<div class="container">
<ul class="tabs">
	<li class="tab-link" data-tab="tab-1"><a href="">Heading Here</a></li>
	<li class="tab-link" data-tab="tab-2"><a href="">Heading Here</a></li>
	<li class="tab-link" data-tab="tab-3"><a href="">Heading Here</a></li>
	<li class="tab-link current" data-tab="tab-4">Heading Here</li>
</ul>
<div id="tab-1" class="tab-content"></div>
<div id="tab-2" class="tab-content"></div>
<div id="tab-3" class="tab-content"></div>
<div id="tab-4" class="tab-content current">link form to be displayd here</div>
</div><!-- container -->

And some CSS

.tab-content{
	display: none;
	}

.tab-content.current{
	display: inherit;
	}

As long as your pages load in a reasonable time it gives a seamless transition between forms.

Cheers