Separation of forms & also drop down menu alteration when object selected - joomla

Question

In the image provided of my registration page, I wish to put a vertical separator inbetween the form on the left to have another form on the right to be completed for the registration but I have no idea how to do it.
http://puu.sh/1FJIA
Also the second part of my question pertains to the drop down menu, how would I put an extra option other than #_usergroups that when selected will alter the drop down menu to change into a text box? Below is the coding used for the xml.
<?xml version="1.0" encoding="UTF-8"?>
<form>
<fieldset name="default"
label="COM_USERS_REGISTRATION_DEFAULT_LABEL"
>
<field name="spacer" type="spacer" class="text"
label="COM_USERS_REGISTER_REQUIRED"
/>
<field name="name" type="text"
description="COM_USERS_REGISTER_NAME_DESC"
filter="string"
label="COM_USERS_REGISTER_NAME_LABEL"
message="COM_USERS_REGISTER_NAME_MESSAGE"
required="true"
size="30"
/>
<field name="username" type="text"
class="validate-username"
description="COM_USERS_DESIRED_USERNAME"
filter="username"
label="COM_USERS_REGISTER_USERNAME_LABEL"
message="COM_USERS_REGISTER_USERNAME_MESSAGE"
required="true"
size="30"
validate="username"
/>
<field name="password1" type="password"
autocomplete="off"
class="validate-password"
description="COM_USERS_DESIRED_PASSWORD"
field="password2"
filter="raw"
label="COM_USERS_REGISTER_PASSWORD1_LABEL"
message="COM_USERS_REGISTER_PASSWORD1_MESSAGE"
required="true"
size="30"
validate="equals"
/>
<field name="password2" type="password"
autocomplete="off"
class="validate-password"
description="COM_USERS_REGISTER_PASSWORD2_DESC"
filter="raw"
label="COM_USERS_REGISTER_PASSWORD2_LABEL"
message="COM_USERS_REGISTER_PASSWORD2_MESSAGE"
required="true"
size="30"
/>
<field name="email1" type="email"
description="COM_USERS_REGISTER_EMAIL1_DESC"
field="id"
filter="string"
label="COM_USERS_REGISTER_EMAIL1_LABEL"
message="COM_USERS_REGISTER_EMAIL1_MESSAGE"
required="true"
size="30"
unique="true"
validate="email"
/>
<field name="email2" type="email"
description="COM_USERS_REGISTER_EMAIL2_DESC"
field="email1"
filter="string"
label="COM_USERS_REGISTER_EMAIL2_LABEL"
message="COM_USERS_REGISTER_EMAIL2_MESSAGE"
required="true"
size="30"
validate="equals"
/>
<field name="title" type="sql"
default="-None Listed-"
label="Select your University"
description="Select the University you are currently attending, if
it's not on the list then create it below"
query="SELECT title FROM #__usergroups WHERE ID > '8 ' "
required="true"
/>
<field
name="captcha"
type="captcha"
label="COM_USERS_CAPTCHA_LABEL"
description="COM_USERS_CAPTCHA_DESC"
validate="captcha"
/>
</fieldset>
</form>

Answer 1

1. Vertical separator:
you can use a hack i.e. create some fields which will output markup.
The idea here is to insert an extra
<div style='width:50%'>
before the first field;
Then a
</div><div style='width:49%;border-left:1px dashed black'>
where you want the separator
and finally a at the end.
Create three new spacer fields.
You can either insert properly escaped html directly:
<field type="spacer" name="splitterinit" label="<div>" />
or put the html as language constants in the language file:
SPLITTER_MID="</div><div style='width:49%;border-left:1px dashed black'>"
and simply use the constant in the .xml:
<field type="spacer" name="splittermid" label="SPLITTER_MID" />
2. Extra text option:
Easy: Simply add a text field below to allow the user to type in.
Harder: Create a custom element, there you can write php and make it
as you want it
3. A word of advice
Chronoforms features a user registration override that lets you define all the fields you want, and for sure you'll find more similar extensions on the JED
Also, all community solutions feature custom profiles.