The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Graphics requests HTML page question

View previous topic View next topic Go down

Solved Graphics requests HTML page question

Post by Kirbs on 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 linkhttp://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!


Last edited by Kirbs on September 10th 2015, 12:42 am; edited 1 time in total

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on 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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on 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

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on 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:
<!-- 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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on 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?

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

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

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;

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on 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:

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

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on 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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on September 8th 2015, 6:38 pm

Does that mean when there'sinputFieldNumber the field can only have number and if it'sinputFieldName 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

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on 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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on September 8th 2015, 7:05 pm

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
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

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

@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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on September 9th 2015, 10:59 pm

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

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on 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 : http://help.forumotion.com/t143169-graphics-requests-html-page-question#975160

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Kirbs on September 10th 2015, 12:42 am

Thanks ange Smile

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: Graphics requests HTML page question

Post by Ange Tuteur on September 10th 2015, 12:46 am

You're welcome Mr. Green

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum