Sana Natsuko
A Wandering Name
All this code below is pretty much stolen from the BBCode+ guide by Lyro and the bottom will probably be the same except I have played with the colours and a bit of script. As of right now, this is a submission box like seen in the BBCode+ Tutorial for a character sheet. What I have added is a validation to make sure the user has entered something into each field, added a few more aesthetic features and made it also look appealing on phones
[div class=form]
[div class=formTitle]A test for submission[/div]
[div class=formInformation]The whole purpose of this is to see if I can have a bot enter the information that the user entered as its own message. This would allow everyone to stay hidden, making room for more
town of salem like roleplays[/div]
[div class=formLabel]Character Name: [/div][input class="formInput formName" type=text][/input]
[div class=formLabel]Character Age: [/div][input class="formInput formAge" type=text maxlength=3][/input]
[div class=formLabel]Character Description: [/div][input class="formInput formDescription" type=textarea][/input]
[input class=formSubmit type=button]Send Anonymous Message[/input]
[div class=formCode]
[div class="formValue formNameValue"][/div]
[div class="formValue formAgeValue"][/div]
[div class="formValue formDescriptionValue"][/div]
[/div]
[div class=formError]Please fill in all the fields before entering[/div]
[/div]
[class name=form]
background: #7E2400;
box-sizing: border-box;
border: solid 5px orange;
border-radius: 3px;
max-width: 1000px;
margin: 10px auto;
padding: 10px;
width: 100%;
[/class]
[class name=formTitle]
box-sizing: border-box;
font-size: 32px;
font-weight: bold;
color: white;
text-align: center;
[/class]
[class name=formInformation]
box-sizing: border-box;
margin: 10px 0;
font-size: 16px;
color: white;
[/class]
[class name=formLabel]
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
vertical-align: top;
width: 50%;
[/class]
[class name=formLabel maxWidth=640px]
text-align: center;
width: 100%;
[/class]
[class name=formSubmit]
background: #7E2400;
border: solid 2px orange;
color: white;
font-weight: bold;
border-sizing: border-box;
border-radius: 5px;
display: inline-block;
padding: 10px 0;
width: 100%
[/class]
[class name=formInput]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
border-sizing: border-box;
display: inline-block;
color: white;
padding: 10px;
margin-bottom: 10px;
width: 47%
[/class]
[class name=formInput maxWidth=640px]
width: 95%;
[/class]
[class name=formCode]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
box-sizing: border-box;
color: white;
font-weight: bold;
display: none;
margin-top: 10px;
margin: 10px 0;
padding: 10px;
[/class]
[class name=formError]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
color: white;
font-weight: bold;
display: none;
margin-top: 10px;
padding: 10px;
[class name=formValue]
display: inline-block;
[/class]
[class name=formSubmit state=hover]
background: #671D00;
color: #E0E0E0;
cursor: pointer;
[/class]
[script class=formSubmit on=click]
// This hides the error message and the unknown details
hide formError
hide formCode
// This declares all the variables and sets them as what the user entered into the fields
set name (getVal formName)
set age (getVal formAge)
set description (getVal formDescription)
// I entered this as a validation to make sure the user entered something, if you find a way to have two functions happen in one scenario, you can cut the number of if statements in half by having
// 'if (eq ${name} 0) (slideDown 1000 formError and stop)' or something like that
if (eq ${name} 0) (slideDown 1000 formError)
if (eq ${name} 0) (stop)
if (eq ${age} 0) (slideDown 1000 formError)
if (eq ${age} 0) (stop)
if (eq ${description} 0) (slideDown 1000 formError)
if (eq ${description} 0) (stop)
// This sets the code that comes down as 'Name: (What the user entered)'. I did it like this rather than how Lyro did it because I kept getting the name the user entered below 'Name:'
setText "Name: ${name}" formNameValue
setText "Age: ${age}" formAgeValue
setText "Description: ${description}" formDescriptionValue
// This just slides down the users details after they have entered everything... Now it is coming up for 03:20 here and I have been doing this for 4ish hours. I am going to collapse on my bed, see
// ya!
slideDown 1000 formCode
//Again most of this script has just been taken by Lyro
[/script]
Code:
[nobr]
All this code below is pretty much stolen from the BBCode+ guide by Lyro and the bottom will probably be the same except I have played with the colours and a bit of script. As of right now, this is a submission box like seen in the BBCode+ Tutorial for a character sheet. What I have added is a validation to make sure the user has entered something into each field, added a few more aesthetic features and made it also look appealing on phones
[div class=form]
[div class=formTitle]A test for submission[/div]
[div class=formInformation]The whole purpose of this is to see if I can have a bot enter the information that the user entered as its own message. This would allow everyone to stay hidden, making room for more
town of salem like roleplays[/div]
[div class=formLabel]Character Name: [/div][input class="formInput formName" type=text][/input]
[div class=formLabel]Character Age: [/div][input class="formInput formAge" type=text maxlength=3][/input]
[div class=formLabel]Character Description: [/div][input class="formInput formDescription" type=textarea][/input]
[input class=formSubmit type=button]Send Anonymous Message[/input]
[div class=formCode]
[div class="formValue formNameValue"][/div]
[div class="formValue formAgeValue"][/div]
[div class="formValue formDescriptionValue"][/div]
[/div]
[div class=formError][plain]Please fill in all the fields before entering[/plain][/div]
[/div]
[class name=form]
background: #7E2400;
box-sizing: border-box;
border: solid 5px orange;
border-radius: 3px;
max-width: 1000px;
margin: 10px auto;
padding: 10px;
width: 100%;
[/class]
[class name=formTitle]
box-sizing: border-box;
font-size: 32px;
font-weight: bold;
color: white;
text-align: center;
[/class]
[class name=formInformation]
box-sizing: border-box;
margin: 10px 0;
font-size: 16px;
color: white;
[/class]
[class name=formLabel]
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
vertical-align: top;
width: 50%;
[/class]
[class name=formLabel maxWidth=640px]
text-align: center;
width: 100%;
[/class]
[class name=formSubmit]
background: #7E2400;
border: solid 2px orange;
color: white;
font-weight: bold;
border-sizing: border-box;
border-radius: 5px;
display: inline-block;
padding: 10px 0;
width: 100%
[/class]
[class name=formInput]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
border-sizing: border-box;
display: inline-block;
color: white;
padding: 10px;
margin-bottom: 10px;
width: 47%
[/class]
[class name=formInput maxWidth=640px]
width: 95%;
[/class]
[class name=formCode]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
box-sizing: border-box;
color: white;
font-weight: bold;
display: none;
margin-top: 10px;
margin: 10px 0;
padding: 10px;
[/class]
[class name=formError]
background: #671D00;
border: solid 1px orange;
border-radius: 5px;
color: white;
font-weight: bold;
display: none;
margin-top: 10px;
padding: 10px;
[class name=formValue]
display: inline-block;
[/class]
[class name=formSubmit state=hover]
background: #671D00;
color: #E0E0E0;
cursor: pointer;
[/class]
[script class=formSubmit on=click]
// This hides the error message and the unknown details
hide formError
hide formCode
// This declares all the variables and sets them as what the user entered into the fields
set name (getVal formName)
set age (getVal formAge)
set description (getVal formDescription)
// I entered this as a validation to make sure the user entered something, if you find a way to have two functions happen in one scenario, you can cut the number of if statements in half by having
// 'if (eq ${name} 0) (slideDown 1000 formError and stop)' or something like that
if (eq ${name} 0) (slideDown 1000 formError)
if (eq ${name} 0) (stop)
if (eq ${age} 0) (slideDown 1000 formError)
if (eq ${age} 0) (stop)
if (eq ${description} 0) (slideDown 1000 formError)
if (eq ${description} 0) (stop)
// This sets the code that comes down as 'Name: (What the user entered)'. I did it like this rather than how Lyro did it because I kept getting the name the user entered below 'Name:'
setText "Name: ${name}" formNameValue
setText "Age: ${age}" formAgeValue
setText "Description: ${description}" formDescriptionValue
// This just slides down the users details after they have entered everything... Now it is coming up for 03:20 here and I have been doing this for 4ish hours. I am going to collapse on my bed, see
// ya!
slideDown 1000 formCode
//Again most of this script has just been taken by Lyro
[/script]
[/nobr]
Last edited:
