Graphics requests HTML page question

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!

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.

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

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:

<!-- STYLES -->
<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 -->
<form action="/post" method="post" name="post" enctype="multipart/form-data">
 
  <div class="section">
    <div class="h3">Section 1</div>
 
    <!-- FAUX FORM DATA -->
    <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>
 
  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="subject" value="Request by : " /> <!-- TOPIC TITLE -->
    <input type="text" name="mode" value="newtopic" /> <!-- MESSAGE MODE -->
    <input type="text" name="f" value="1" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </div>
</form>


<!-- SCRIPTING -->
<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:

  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="subject" value="Request by : " /> <!-- TOPIC TITLE -->
    <input type="text" name="mode" value="newtopic" /> <!-- MESSAGE MODE -->
    <input type="text" name="f" value="1" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </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.

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

Change the true form data to :

Code:

    <input type="text" name="mode" value="reply" /> <!-- MESSAGE MODE -->
    <input type="text" name="t" value="1" /> <!-- TOPIC ID THE REPLY GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->

> 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;

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:


<!-- STYLES -->
<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 -->
<form action="/post" method="post" name="post" enctype="multipart/form-data">
  
  <div class="section">
    <div class="h3">Sign-Up Here</div>
  
    <!-- FAUX FORM DATA -->
    <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>
  
  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="mode" value="reply" /> <!-- MESSAGE MODE -->
    <input type="text" name="t" value="520" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </div>
</form>


<!-- SCRIPTING -->
<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

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.

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

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

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

Code:


<!-- STYLES -->
<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 -->
<form action="/post" method="post" name="post" enctype="multipart/form-data">
  
  <div class="section">
    <div class="h3">Section 1</div>
  
    <!-- FAUX FORM DATA -->
    <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>
  
  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="subject" value="Request by : " /> <!-- TOPIC TITLE -->
    <input type="text" name="mode" value="newtopic" /> <!-- MESSAGE MODE -->
    <input type="text" name="f" value="1" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </div>
</form>


<!-- SCRIPTING -->
<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?

@Kirbs sorry for the delay. Try this :

Code:


<!-- STYLES -->
<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 -->
<form action="/post" method="post" name="post" enctype="multipart/form-data">
 
  <div class="section">
    <div class="h3">Section 1</div>
 
    <!-- FAUX FORM DATA -->
    <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>
 
  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="subject" value="Request by : " /> <!-- TOPIC TITLE -->
    <input type="text" name="mode" value="newtopic" /> <!-- MESSAGE MODE -->
    <input type="text" name="f" value="1" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </div>
</form>


<!-- SCRIPTING -->
<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... )

Ange Tuteur wrote:Change the true form data to :

Code:

    <input type="text" name="mode" value="reply" /> <!-- MESSAGE MODE -->
    <input type="text" name="t" value="1" /> <!-- TOPIC ID THE REPLY GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->

> 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 />
<!-- STYLES -->
<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 -->
<form action="/post" method="post" name="post" enctype="multipart/form-data">
  
  <div class="section">
    <div class="h3">Section 1</div>
  
    <!-- FAUX FORM DATA -->
    <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>
  
  <!-- TRUE FORM DATA -->
  <div style="display:none">
    <input type="text" name="mode" value="reply" /> <!-- MESSAGE MODE -->
    <input type="text" name="t" value="353" /> <!-- FORUM ID THE TOPIC GOES INTO -->
    <textarea name="message"></textarea> <!-- TOPIC MESSAGE -->
  </div>
</form>


<!-- SCRIPTING -->
<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>

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

Thanks ange

You're welcome

Topic archived

Have a good day.