Custom Form to inject output into placeholder?

<script type="text/javascript" src="assets/js/imagebrowser.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#whites").sortable({
      handle : '.handle',
      update : function () {
		  var order = $('#whites').sortable('serialize');
  		$("#info").load("[~211~]?"+order);
      }
    });
});

<div id="whites">
<h2>Whites</h2>
[!Jot? &customfields=`bottle,club,image,position` &tplForm=`wtForm` &tplComments=`wtNotes` &tplModerate=`wtManage` &sortby=`position:a`&canpost=`Site Admins`!]
</div>

<a name="jf[+jot.link.id+]"></a>
<h2>[+form.edit:is=`1`:then=`Edit Item`:else=`Add a Note+]</h2>
[+form.error:isnt=`0`:then=`
<div class="jot-err">
[+form.error:select=`
&-3=You are trying to re-submit the same item. You have probably clicked the submit button more than once.
&-2=Your item has been rejected.
&-1=Your item has been saved, it will first be reviewed before it is published.
&1=You are trying to re-submit the same item. You have probably clicked the submit button more than once.
&2=The security code you entered was incorrect.
&3=You can only post once each [+jot.postdelay+] seconds.
&4=Your item has been rejected.
&5=[+form.errormsg:ifempty=`You didn't enter all the required fields`+]
`+]
</div>
`:strip+]
[+form.confirm:isnt=`0`:then=`
<div class="jot-cfm">
[+form.confirm:select=`
&1=Your note has been published.
&2=Your note has been saved, it will first be reviewed before it is published.
&3=note saved.
`+]
</div>
`:strip+]
<form method="post" action="[+form.action:esc+]#jf[+jot.link.id+]" class="jot-form">
	<fieldset>
	<input name="JotForm" type="hidden" value="[+jot.id+]" />
	<input name="JotNow" type="hidden" value="[+jot.seed+]" />
	<input name="parent" type="hidden" value="[+form.field.parent+]" />
		
		<label for="name[+jot.id+]">Name:<br />
			<input tabindex="[+jot.seed:math=`?+1`+]" name="title" type="text" size="40" value="[+form.field.title:esc+]" id="name[+jot.id+]" />
		</label><br />

		<label for="note[+jot.id+]">Note:<br />
			<textarea tabindex="[+jot.seed:math=`?+2`+]" name="content" cols="50" rows="8" id="note[+jot.id+]">[+form.field.content:esc+]</textarea>
		</label><br />

		<label for="bottle[+jot.id+]">Bottle:<br />
			<input tabindex="[+jot.seed:math=`?+3`+]" name="bottle" type="text" size="20" value="[+form.field.custom.bottle:esc+]" id="bottle[+jot.id+]" />
		</label><br />

		<label for="club[+jot.id+]">Wine Club:<br />
			<input tabindex="[+jot.seed:math=`?+4`+]" name="club" type="text" size="20" value="[+form.field.custom.club:esc+]" id="club[+jot.id+]" />
		</label><br />

		<label for="wtImage[+jot.id+]">Image:<br />
			<input tabindex="[+jot.seed:math=`?+6`+]" name="image" type="text" size="20" value="[+form.field.custom.image:esc+]" id="wtImage[+jot.id+]" /><input type="button" value="Select Image" onclick="BrowseServer('[+jot.id+]')" />
		</label><br />
	
	<div style="float:right;width: 100px;"></div>
	<input tabindex="[+jot.seed:math=`?+3`+]" name="submit" type="submit" value="[+form.edit:is=`1`:then=`Save Item`:else=`Add  Item`+]" />
	[+form.edit:is=`1`:then=`
		<input tabindex="[+jot.seed:math=`?+4`+]" name="submit" type="submit" value="Cancel" onclick="history.go(-1);return false;" />
	`+] 
	</fieldset>
</form>

<div class="tasteNotes" id="listItem_[+comment.id+]">
[+jot.moderation.enabled:is=`1`:then=`
	       <img class="handle" src="[(base_url)]assets/snippets/jot/templates/move.png" width="16" height="16" alt="Move item" title="Move Item" border="0" />
   `:strip+]
<div class="jot-mod">
	 [+jot.moderation.enabled:is=`1`:then=`
		<a href="[+jot.link.delete:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm('Are you sure you wish to delete this item?')" title="Delete Item"><img src="[(base_url)]assets/snippets/jot/templates/delete.gif" width="16" height="16" alt="Delete item" border="0" /></a>
		[+comment.published:is=`0`:then=`
		<a href="[+jot.link.publish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm('Are you sure you wish to publish this item?')" title="Publish Item"><img src="[(base_url)]assets/snippets/jot/templates/publish.png" width="16" height="16" alt="Publish Item" border="0" /></a>
		`+]
		[+comment.published:is=`1`:then=`
		<a href="[+jot.link.unpublish:esc+][+jot.querykey.id+]=[+comment.id+]#jotmod[+jot.link.id+]" onclick="return confirm('Are you sure you wish to unpublish this item?')" title="Unpublish Item"><img src="[(base_url)]assets/snippets/jot/templates/unpublish.png" width="16" height="16" alt="Unpublish Item" border="0" /></a>
		`+]
	 `:strip+]
	 [+jot.user.canedit:is=`1`:and:if=`[+comment.createdby+]`:is=`[+jot.user.id+]`:or:if=`[+jot.moderation.enabled+]`:is=`1`:then=`
		 <a href="[+jot.link.edit:esc+][+jot.querykey.id+]=[+comment.id+]#jf[+jot.link.id+]" onclick="return confirm('Are you sure you wish to edit this item?')" title="Edit Item"><img src="[(base_url)]assets/snippets/jot/templates/edit.gif" width="16" height="16" alt="Edit Item" border="0" /></a>
 `:strip+]

	</div>
		<span class="fl wtimage"><img src="[+comment.custom.image:esc+]" alt="[+comment.title:esc+]" height="200px" /></span>
		<div class="twothirds padh">
			<h3>[+comment.title:esc+]</h3>
			<p><h4>Bottle: <span>$[+comment.custom.bottle:esc+]</span></h4><h4>Wine Club: <span>$[+comment.custom.club:esc+]</span></h4></p>
			<h4>Notes:</h4>
			<p class="summary">[+comment.content:esc+]</p>
		</div>
<hr class="clearfix" />
</div>