application form code

20
3
3
#1
delete nvm i already found an add-on for this.

During my days on zetaboard,s there was a code called Flexible Form Script, that would create a application form page (on the webpage) for users to use for submitting a form. That form would then be posted in the section you wanted it to be posted it in. I found out that xenforo allows you create a webpage too, in the node list and was wondering if anyone could modify the zetaboard code to fit xenforo's standards.

I have the code saved on my taptalk (formerly known as zetaboards) it's in the spoiler below.

Name: Flexible Form Script
Description:

I have done many form scripts in the past, but none of them really compare to this one in terms of flexibility. It isn't so much the form that is the nice part about this script; it's the amount of options you are given, which you'll see in a moment.

The application goes on a separate webpage (people adept at HTML can adapt it to go anywhere HTML is allowed, though). Then once the user types in all of the information, it can do several things depending on the options. Firstly, you can control whether or not guests can use it. Then, if they are not a guest, it can send a PM to a user or post the form in a topic somewhere. Or it can send both the PM and post the topic. All options concerning the PM and topic are controlled separately (title, username, etc).

That's really it. The reason I made it is because you have people who want a form to be PM'd to a person specifically, or you have those people who would prefer it be posted in a new forum. Sometimes, the user wants guests to be able to use it; sometimes, he doesn't. And the PM/topic titles as well as the fields possible vary across every user. This script is supposed to be nearly the end-all of form scripts. It takes care of mostly everything. It isn't necessarily super fancy, like I said, but its power is in its flexibility. It gets the job done.

It isn't the most complex form script I've ever made. I once made one to post a topic in a forum and it had an extremely detailed setup which lead to extremely nice and flexible forms. I would release that one, but there are three problems: it is a long, complicated setup; it is an exclusive code; and it still only lets members post topics.

That being said, I really enjoyed working on this script because I know how much use these types of things get.

Preview: Form here
When posted, goes into this forum

(All default options)

Installation:

The setup on this script is fairly complex as well, but it isn't so bad.

First, create a new webpage. All options are entirely up to you.

Secondly, this should be the content:
<form id='generic_form'>
<div class='category'>
<table class='cat_head'>
<tr>
<td><h2 style='text-align:center'>Generic Form</h2></td>
</tr>
</table>
</div>

<table>
<tr>
<td> </td>
</tr>
</table>

<table id='form_spec'>
<tr>
<th colspan='2'><h2>Please fill out the fields below:</h2></th>
</tr>
<tr>
<td>Name:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select>
<option>Male</option>
<option>Female</option>
<option>Neither/not sure</option>
</select>
</td>
</tr>
<tr>
<td>Why do you think cheese is awesome?</td>
<td><textarea rows='3'></textarea></td>
</tr>
<tr>
<td colspan='2' id='send_form'><button type='submit'>Submit</button></td>
</tr>
</table>

</form>

<style type='text/css'>
/* <![CDATA[ */
#form_spec tr td:first-child {
font-weight: bold;
width: 30%;
}
#form_spec input, #form_spec textarea {
width: 500px;
}
/* ]]> */
</style>

<script type='text/javascript'>
var form_script = {
form_id: $('#generic_form'),
status_id: $('#send_form'),
specific_id: $('#form_spec'),
enable_guests: false,
pm: {
enabled: false, // Does not work for guests
user: "Reid", // 1 user only
title: "New Form From {{user_name}}",
content: "{{form}}"
},
topic: {
enabled: true,
forum_id: 3170924, // 1 id only
title: "New Form From {{user_name}}",
description: "",
content: "{{form}}"
},
statuses: {
not_logged_in: "You must be registered and signed in to use this feature.", // Used if enable_guests: false
first: "Coagulating data...",
second: "Sending form...",
done: "Form sent!"
},
submission_formatting: {
separator: ' ',

before_all: '',
after_all: '',

before_question: '',
after_question: '
',

before_response: '',
after_response: '
'
},
possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it
};
</script>

<script type='text/javascript' src='http://z3.ifrm.com/313/104/0/p366373/form_script.js'></script>
You can see the examples of HTML I've set up and you can probably edit it from there. Note that you can have as many fields as you want; there is no set number or anything, just keep adding <tr>s with the same layout as above. If you need help with HTML, you can go to our Coding Assistance forum.

Then you need to edit the options block:
var form_script = {
form_id: $('#generic_form'),
status_id: $('#send_form'),
specific_id: $('#form_spec'),
enable_guests: false,
pm: {
enabled: false, // Does not work for guests
user: "Reid", // 1 user only
title: "New Form From {{user_name}}",
content: "{{form}}"
},
topic: {
enabled: true,
forum_id: 3170924, // 1 id only
title: "New Form From {{user_name}}",
description: "",
content: "{{form}}"
},
statuses: {
not_logged_in: "You must be registered and signed in to use this feature.", // Used if enable_guests: false
first: "Coagulating data...",
second: "Sending form...",
done: "Form sent!"
},
submission_formatting: {
separator: ' ',

before_all: '',
after_all: '',

before_question: '',
after_question: '
',

before_response: '',
after_response: '
'
},
possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it
};
Not all of that has to be edited; some of it is for advanced users who are familiar with HTML and so on.


form_id: This is the ID of the form, useful if you are a stickler about HTML (can be left default)
status_id: The ID of the element that should hold the status (can be left default)
specific_id: The ID of the table containing the fields (can be left default)

enable_guests: Should guests be able to use the script? Set to true or false. Note that guests cannot use the PM system, so this applies to topics only.

pm.enabled: Submit the form via PM as well? Set to true or false.
pm.user: Who to PM the form to (if enabled). One user only.
pm.title: The title of the PM that will be sent. In the title, {{user_name}} is automagically replaced with the name of the user submitting the form.
pm.content: The content of the PM that will be sent. {{form}} is replaced with the full form. You could change this to "I submitted a form" to notify someone that they submitted a form, for example.

topic.enabled: Submit the form via topic?
topic.forum_id: The ID of the forum to send the form to. The forum ID is the number at the end of the url (e.g. forum/12345).
topic.title: The title of the topic. {{user_name}} is automagically replaced with either the username or "Guest".
topic.description: The description of the topic. {{user_name}} works here as well.
topic.content: Same as pm.content, except for the topic.

A quick note about topics and permissions. If you enable the "start" permission but leave all other permissions off, then users can submit the form but not see the results or other forms. So, you could have a subforum in the staff forum that members/guests have "start" permissions on, but nothing else. Then all user forms would go there, but they couldn't view the topic or any other forms. That is very useful for things like staff applications.

statuses.not_logged_in: The status message to display if a user isn't logged in and he tries to submit the form. This is only used if guests are disabled.
statuses.first: When the script gathers up data to prepare for submission.
statuses.second: When the script is actually sending the form.
statuses.done: When the form has been submitted and the user can safely leave the page.

submission_formatting.separator: In the HTML, there are two <td>s for each field. The first <td> is some text, such as "Name:". The separator is what appears in the final result between the first td's text and the value that they put in. For example, I have "Name:" as my first td. In the textarea, I put "Reid". The separator is a blank space, so in the final result, it appears as "Name: Reid". Notice the blank space after the colon; that is the separator.

submission_formatting.before_all: What will be put at the beginning of the form post/pm. Useful if you want to use
[table]

[/table]
[table][/table]
 
Last edited: