Graphics requests HTML page question

by Kirbs September 6th 2015, 1:13 am

Hi, i've noticed that forumotion got a new HTML page that makes posting easier (like put it in a form) anyways this is the link https://help.forumotion.com/h9- and i was wondering if a staff member(or a member who knows the code) could share with us the HTML that apply in this page so i can use it for a different type of forms on my forumotion forum.

Thanks!

by Ange Tuteur September 6th 2015, 10:45 am

Hi @Kirbs,

The form uses JavaScript for the step forward, checking, etc.. HTML for the necessary website and form structure, and CSS for the design. Unfortunately, in it's entirety, I only developed this form to be used for the support forums of the Forumactif service.

I can however provide you with examples if you want. Note if you want it with multiple fields like the form here it's going to require a bit of JavaScript knowledge to place everything together once you hit the submit button. Let me know what you're looking for. Smile

by Kirbs September 6th 2015, 2:31 pm

I'm looking for a simple form that has multiple questions and some empty boxes to answer, as well as a simple nice design. I'd be thankful if you could provide me with such code Smile

by Ange Tuteur September 6th 2015, 3:51 pm

I suppose this would be a brief example of what you'll need to do. Note that you'll need a bit of knowledge in HTML, CSS, and JavaScript to modify it effectively.

Go to Modules > HTML Pages Management > Create new

Use your forum header : No
Paste the following :

Code::  <style type="text/css"> .section { background:#EEE; border:1px solid #CCC; border-radius:3px; padding:3px; margin:10px auto; width:80%; } .sectionRow { width:80%; margin:10px auto; } .section .inputbox { width:250px } .section label { width:80px; font-weight:bold; display:inline-block; } </style>  <form action="/post" method="post" name="post" enctype="multipart/form-data"> <div class="section"> <div class="h3">Section 1</div>  <div class="sectionRow"> <label for="inputFieldName">Name :</label> <input id="inputFieldName" type="text" placeholder="Desired name" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputFieldNumber">Number :</label> <input id="inputFieldNumber" type="text" placeholder="Desired number" class="inputbox" /> </div> <div style="text-align:center"> <input class="button1" type="submit" name="post" value="Submit" /> </div> </div>  <div style="display:none"> <input type="text" name="subject" value="Request by : " />  <input type="text" name="mode" value="newtopic" />  <input type="text" name="f" value="1" />  <textarea name="message"></textarea>  </div> </form>  <script type="text/javascript">//<![CDATA[ document.post.post.onclick = function() { var name = document.getElementById('inputFieldName'), number = document.getElementById('inputFieldNumber'), form = document.post; form.subject.value += name.value; form.message.value += '[b]Username :[/b] ' + name.value + '\n[b]Desired Number :[/b] ' + number.value; }; //]]></script>

Explanation :
We'll have faux form data such as the field inputFieldName which is denoted by a unique ID. This ID will be used later on in the JavaScript to get its value.

Code:: <input id="inputFieldName" type="text" placeholder="Desired name" class="inputbox" />

At the bottom of the code you'll see the script which is a simple binding to the submit button. We get the previously mentioned name field there :

Code:: name = document.getElementById('inputFieldName')

Then we can access and add it's value to other things, such as the subject :

Code:: form.subject.value += name.value;

However, more importantly, we still need some true form data :

Code::  <div style="display:none"> <input type="text" name="subject" value="Request by : " />  <input type="text" name="mode" value="newtopic" />  <input type="text" name="f" value="1" />  <textarea name="message"></textarea>  </div>

Each one is marked by a comment to explain the purpose.

Note : to submit the form you need to disable the following security option.
General > Security > Disallow unofficial forms to post on the form : No

If you have any questions, let me know.

by Kirbs September 7th 2015, 7:39 am

How do i make it post a reply to a certain topic instead of creating a whole new topic?

by Ange Tuteur September 7th 2015, 10:15 am

Change the true form data to :

Code:: <input type="text" name="mode" value="reply" />  <input type="text" name="t" value="1" />  <textarea name="message"></textarea>

> Remove subject
> Change mode value to "reply"
> Change f name to t, and change value to a topic id

Also make sure to remove the following from the javascript, since the subject no longer exists in the form data.

Code:: form.subject.value += name.value;

by Kirbs September 7th 2015, 8:25 pm

One more thing tho @Ange Tuteur
I don't want it to take you into the page you posted when it's done because when i add it in an Iframe it then shows you the page inside the iframe after being posted, anyway to fix that?

EDIT: this is the code i'm using after changing it

Code::  <style type="text/css"> .section { background:#EEE; border:1px solid #CCC; border-radius:3px; padding:3px; margin:10px auto; width:80%; } .sectionRow { width:80%; margin:10px auto; } .section .inputbox { width:250px } .section label { width:80px; font-weight:bold; display:inline-block; } </style>  <form action="/post" method="post" name="post" enctype="multipart/form-data"> <div class="section"> <div class="h3">Sign-Up Here</div>  <div class="sectionRow"> <label for="inputFieldName">Your Username :</label> <input id="inputFieldName" type="text" placeholder="Your username here" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputFieldName">Partner's Username :</label> <input id="inputFieldName" type="text" placeholder="Your partner's username here" class="inputbox" /> </div> <div style="text-align:center"> <input class="button1" type="submit" name="post" value="Submit" /> </div> </div>  <div style="display:none"> <input type="text" name="mode" value="reply" />  <input type="text" name="t" value="520" />  <textarea name="message"></textarea>  </div> </form>  <script type="text/javascript">//<![CDATA[ document.post.post.onclick = function() { var name = document.getElementById('inputFieldName'), number = document.getElementById('inputFieldNumber'), form = document.post; form.message.value += '[b]Your Username :[/b] ' + name.value + '\n[b]Partner Username :[/b] ' + number.value; }; //]]></script>

Once you hit submit it gives this message "You must enter a message when posting." and takes me to the reply mode without posting what i wrote in the form at all

by Ange Tuteur September 8th 2015, 4:21 pm

The problem is you have two fields with the id "inputFieldName" and no fields with the id "inputFieldNumber"

Seeing as you're accessing the following :

Code:: number = document.getElementById('inputFieldNumber'),

It's going to cause an error when you try to get its value because as I previously mentioned, inputFieldNumber doesn't exist.

by Kirbs September 8th 2015, 6:38 pm

Does that mean when there's inputFieldNumber the field can only have number and if it's inputFieldName the field can only have texts? if so i would like to know if there's a way to make the field have both name and number

by Ange Tuteur September 8th 2015, 6:58 pm

The id attribute is used in javascript to easily get a unique element. The name doesn't matter, however, there can only be one element with an id ; You can't have multiple elements with the same ID.

See this for more information and examples : http://www.w3schools.com/tags/att_global_id.asp

by Kirbs September 8th 2015, 7:05 pm

I wanna use this code (the original one you provided) to make it have 4 fields:

Code::  <style type="text/css"> .section { background:#EEE; border:1px solid #CCC; border-radius:3px; padding:3px; margin:10px auto; width:80%; } .sectionRow { width:80%; margin:10px auto; } .section .inputbox { width:250px } .section label { width:80px; font-weight:bold; display:inline-block; } </style>  <form action="/post" method="post" name="post" enctype="multipart/form-data"> <div class="section"> <div class="h3">Section 1</div>  <div class="sectionRow"> <label for="inputFieldName">Name :</label> <input id="inputFieldName" type="text" placeholder="Desired name" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputFieldNumber">Number :</label> <input id="inputFieldNumber" type="text" placeholder="Desired number" class="inputbox" /> </div> <div style="text-align:center"> <input class="button1" type="submit" name="post" value="Submit" /> </div> </div>  <div style="display:none"> <input type="text" name="subject" value="Request by : " />  <input type="text" name="mode" value="newtopic" />  <input type="text" name="f" value="1" />  <textarea name="message"></textarea>  </div> </form>  <script type="text/javascript">//<![CDATA[ document.post.post.onclick = function() { var name = document.getElementById('inputFieldName'), number = document.getElementById('inputFieldNumber'), form = document.post; form.subject.value += name.value; form.message.value += '[b]Username :[/b] ' + name.value + '\n[b]Desired Number :[/b] ' + number.value; }; //]]></script>

can you modify it to do that?

by Ange Tuteur September 9th 2015, 8:00 pm

@Kirbs sorry for the delay. Try this :

Code::  <style type="text/css"> .section { background:#EEE; border:1px solid #CCC; border-radius:3px; padding:3px; margin:10px auto; width:80%; } .sectionRow { width:80%; margin:10px auto; } .section .inputbox { width:250px } .section label { width:80px; font-weight:bold; display:inline-block; } </style>  <form action="/post" method="post" name="post" enctype="multipart/form-data"> <div class="section"> <div class="h3">Section 1</div>  <div class="sectionRow"> <label for="inputField1">Field 1 :</label> <input id="inputField1" type="text" placeholder="Field 1" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField2">Field 2 :</label> <input id="inputField2" type="text" placeholder="Field 2" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField3">Field 3 :</label> <input id="inputField3" type="text" placeholder="Field 3" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField4">Field 4 :</label> <input id="inputField4" type="text" placeholder="Field 4" class="inputbox" /> </div> <div style="text-align:center"> <input class="button1" type="submit" name="post" value="Submit" /> </div> </div>  <div style="display:none"> <input type="text" name="subject" value="Request by : " />  <input type="text" name="mode" value="newtopic" />  <input type="text" name="f" value="1" />  <textarea name="message"></textarea>  </div> </form>  <script type="text/javascript">//<![CDATA[ document.post.post.onclick = function() { var f1 = document.getElementById('inputField1'), f2 = document.getElementById('inputField2'), f3 = document.getElementById('inputField3'), f4 = document.getElementById('inputField4'), form = document.post; form.message.value += '[b]Field 1 :[/b] ' + f1.value + '\n[b]Field 2 :[/b] ' + f2.value + '\n[b]Field 3[/b]' + f3.value + '\n[b]Field 4[/b]' + f4.value; }; //]]></script>

I made each field numerical so it should be easier to identify. ^^ ( e.g. field 1, 2, 3... )

by Kirbs September 9th 2015, 10:59 pm

Ange Tuteur wrote:Change the true form data to :
Code:
<input type="text" name="mode" value="reply" />  <input type="text" name="t" value="1" />  <textarea name="message"></textarea> 

> Remove subject
> Change mode value to "reply"
> Change f name to t, and change value to a topic id

Also make sure to remove the following from the javascript, since the subject no longer exists in the form data.
Code:
form.subject.value += name.value;

After applying these changes to the code you just posted i am getting this error:
A browser error occured [Error #230], please contact the technical support.
here's the code after my changes:

Code:: <br />  <style type="text/css"> .section { background:#EEE; border:1px solid #CCC; border-radius:3px; padding:3px; margin:10px auto; width:80%; } .sectionRow { width:80%; margin:10px auto; } .section .inputbox { width:250px } .section label { width:80px; font-weight:bold; display:inline-block; } </style>  <form action="/post" method="post" name="post" enctype="multipart/form-data"> <div class="section"> <div class="h3">Section 1</div>  <div class="sectionRow"> <label for="inputField1">Field 1 :</label> <input id="inputField1" type="text" placeholder="Field 1" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField2">Field 2 :</label> <input id="inputField2" type="text" placeholder="Field 2" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField3">Field 3 :</label> <input id="inputField3" type="text" placeholder="Field 3" class="inputbox" /> </div> <div class="sectionRow"> <label for="inputField4">Field 4 :</label> <input id="inputField4" type="text" placeholder="Field 4" class="inputbox" /> </div> <div style="text-align:center"> <input class="button1" type="submit" name="post" value="Submit" /> </div> </div>  <div style="display:none"> <input type="text" name="mode" value="reply" />  <input type="text" name="t" value="353" />  <textarea name="message"></textarea>  </div> </form>  <script type="text/javascript">//<![CDATA[ document.post.post.onclick = function() { var f1 = document.getElementById('inputField1'), f2 = document.getElementById('inputField2'), f3 = document.getElementById('inputField3'), f4 = document.getElementById('inputField4'), form = document.post; form.message.value += '[b]Field 1 :[/b] ' + f1.value + '\n[b]Field 2 :[/b] ' + f2.value + '\n[b]Field 3[/b]' + f3.value + '\n[b]Field 4[/b]' + f4.value; }; //]]></script>

by Ange Tuteur September 9th 2015, 11:17 pm

Note : to submit the form you need to disable the following security option.
General > Security > Disallow unofficial forms to post on the form : No

via : https://help.forumotion.com/t143169-graphics-requests-html-page-question#975160