diff --git a/Components/ClicksForms/Question.js b/Components/ClicksForms/Question.js
new file mode 100644
index 0000000..25deeab
--- /dev/null
+++ b/Components/ClicksForms/Question.js
@@ -0,0 +1,164 @@
+import Styles from "../../styles/clicksforms/form.module.css"
+import { Component } from "react"
+
+class Question extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            status: null,
+            answer: this.props.type == "multichoice" ? [] : null,
+            errorString: null,
+        }
+    }
+
+    getCol(col) {
+        switch ( col ) {
+            case 'red':
+                return "#F27878";
+            case 'orange':
+                return "#E5AB71";
+            case 'yellow':
+                return "#F2D478";
+            case 'green':
+                return "#65CC76";
+            case 'blue':
+                return "#71AFE5";
+            case 'purple':
+                return "#A358B2";
+            case 'pink':
+                return "#D46899";
+            case 'grey':
+                return "#777777";
+            case 'default':
+                return "#D4D4D4";
+        }
+    }
+
+    onChange(answer) {
+        let valid = null;
+        let errorString = null;
+
+        switch ( this.props.type ) {
+            case 'text':
+                if ( !answer.length ) {
+                    valid = null
+                } else if ( answer.length < this.props.options.min ) {
+                    valid = false
+                    errorString = `Your answer must be at least ${this.props.options.min} characters long. Your response is ${answer.length}.`
+                } else if ( answer.length > this.props.options.max ) {
+                    valid = false
+                    errorString = `Your answer must be at most ${this.props.options.max} characters long. Your response is ${answer.length}.`
+                } else {
+                    valid = true
+                    errorString = null
+                }
+                break
+            case 'number':
+                if ( !answer.length ) {
+                    valid = null
+                } else if ( isNaN(parseInt(answer)) ) {
+                    valid = false
+                    errorString = `Your answer must be a number.`
+                } else if ( answer < this.props.options.min ) {
+                    valid = false
+                    errorString = `Your answer must be at least ${this.props.options.min}`
+                } else if ( answer > this.props.options.max ) {
+                    valid = false
+                    errorString = `Your answer must be at most ${this.props.options.max}`
+                } else {
+                    valid = true
+                    errorString = null
+                }
+                break
+            case 'multichoice':
+                if ( typeof answer != 'object' ) {
+                    valid = null
+                } else if ( !answer.length ) {
+                    valid = null
+                } else if ( answer.length < this.props.options.min ) {
+                    valid = false
+                    errorString = `You must select at least ${this.props.options.min} options.`
+                } else if ( answer.length > this.props.options.max ) {
+                    valid = false
+                    errorString = `You must select at most ${this.props.options.max} options.`
+                } else {
+                    valid = true
+                    errorString = null
+                }
+                break
+            case 'fileupload', 'date', 'time':
+                valid = answer != null ? true : null
+                break
+        }
+        this.setState({
+            answer: answer,
+            status: valid,
+            errorString: errorString,
+        })
+    }
+
+    render() {
+        let borderColor = this.state.status == false ? this.getCol("red") : this.getCol("default");
+        return (
+            <div className={Styles.questionContainer} style={{
+                boxShadow: `0px 0px 10px ${borderColor}`,
+            }}>
+                <h1 className={Styles.title}><div style={{color: this.getCol(this.props.colour), display: "inline"}}>&gt;</div> {this.props.title}</h1>
+                <h2 className={Styles.description}>{this.props.description}</h2>
+                <hr className={Styles.hr} style={{borderColor: this.getCol("default")}}/>
+                {
+                    (() => {
+                        switch ( this.props.type ) {
+                            case 'text':
+                                return (
+                                    <textarea className={Styles.input} onChange={(e) => this.onChange(e.target.value)} style={{
+                                        borderColor: borderColor,
+                                    }}></textarea>
+                                )
+                            case 'number':
+                                return (
+                                    <input
+                                    className={Styles.input}
+                                    type="number"
+                                        onChange={(e) => {
+                                            this.onChange(e.target.value)
+                                        }}
+                                        style={{borderColor: borderColor}}
+                                    />
+                                )
+                            case 'multichoice':
+                                return "not yet"
+                            case 'fileupload':
+                                return (
+                                    <input className={Styles.input} type="file" onChange={(e) => {
+                                        this.onChange(e.target.files[0])
+                                    }} style={{
+                                        borderColor: borderColor
+                                    }} />
+                                )
+                            case 'date':
+                                return (
+                                    <input className={Styles.input} type="date" onChange={(e) => {
+                                        this.onChange(e.target.value)
+                                    }} style={{
+                                        borderColor: borderColor
+                                    }} />
+                                )
+                            case 'time':
+                                return (
+                                    <input className={Styles.input} type="time" onChange={(e) => {
+                                        this.onChange(e.target.value)
+                                    }} style={{
+                                        borderColor: borderColor
+                                    }} />
+                                )
+                        }
+                    })()
+                }
+                <div className={Styles.errorContainer} style={{height: this.state.errorString ? "25px" : "0"}}>{this.state.errorString}</div>
+            </div>
+        )
+    }
+}
+
+export default Question;
diff --git a/pages/clicksforms/form.js b/pages/clicksforms/form.js
new file mode 100644
index 0000000..8aa9f27
--- /dev/null
+++ b/pages/clicksforms/form.js
@@ -0,0 +1,81 @@
+import Header from '../../Components/Header'
+import { Component } from 'react'
+import Styles from '../../styles/clicksforms/form.module.css';
+import Paragraph from '../../Components/Paragraph';
+import Question from '../../Components/ClicksForms/Question';
+
+export default class Form extends Component {
+	constructor(props) {
+		super(props);
+        this.form = {
+            'id': '1629451712.871201',
+            'active': true, 'anonymous': false, 'guild': 684492926528651336, 'created_by': 438733159748599813,
+            'name': 'Example form', 'description': 'The default form',
+            'required_roles': [], 'disallowed_roles': [], 'given_roles': [], 'removed_roles': [],
+            'auto_accept': false,
+            'questions': [
+                {
+                    'type': 'text', 'title': 'Text answer', 'description': 'some description',
+                    'colour': 'red', 'options': {'min': 1, 'max': 2000}, 'required': true, 'question': true, 'id': '1630426754.449609'
+                }, {
+                    'type': 'number', 'title': 'Number', 'description': 'Type something over 2 to trigger response validation',
+                    'colour': 'orange', 'options': {'min': 0, 'max': 2}, 'required': true, 'question': true, 'id': '1630426754.449615'
+                }, {
+                    'type': 'multichoice', 'title': 'Multiple choice!', 'description': '', 'colour': 'yellow', 'options': {
+                        'min': 1, 'max': 2, 'options': {'0': ['circl', false], '1': ['skware', false], '3': ['no', false]}
+                    },
+                    'required': false, 'question': true, 'id': '1630426754.449619'
+                }, {
+                    'type': 'fileupload', 'title': 'Files', 'description': '',
+                    'colour': 'green', 'options': {}, 'required': false, 'question': true, 'id': '1630426754.449629'
+                }, {
+                    'type': 'time', 'title': 'Enter a time', 'description': '',
+                    'colour': 'blue', 'options': {}, 'required': true, 'question': true, 'id': '1630426754.449632'
+                }, {
+                    'type': 'date', 'title': 'when', 'description': '',
+                    'colour': 'purple', 'options': {}, 'required': true, 'question': true, 'id': '1630426754.449635'
+                }
+            ]
+        }
+    }
+
+	render() {
+		return (
+			<>
+                <Header
+                    name={this.form.name}
+                    subtext={this.form.description + (this.form.active ? '' : <><br />This form is not accepting responses. Please check back later</>)}
+                    gradient={["71AFE5", "6576CC"]}
+                    wave="CF"
+                    buttons={[]}
+                />
+                <div id="start" />
+                <div className={Styles.form}>
+                    <div className={Styles.header}>
+                        Once completing this form, your response will be recorded
+                        {this.form.anonymous ? " and your name will not be shown" : " and your username will be visible"}
+                    </div>
+                    <div className={Styles.body}>
+                        {
+                            this.form.questions.map((question, index) => {
+                                return (
+                                    <>
+                                        <Question
+                                            key={index}
+                                            title={question.title}
+                                            description={question.description}
+                                            colour={question.colour}
+                                            type={question.type}
+                                            options={question.options}
+                                            required={question.required}
+                                        />
+                                    </>
+                                )
+                            })
+                        }
+                    </div>
+                </div>
+			</>
+		)
+	}
+}
diff --git a/styles/clicksforms/form.module.css b/styles/clicksforms/form.module.css
new file mode 100644
index 0000000..28eaa70
--- /dev/null
+++ b/styles/clicksforms/form.module.css
@@ -0,0 +1,84 @@
+.form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.header {
+    width: 100%;
+    text-align: center;
+    margin-block: 20px;
+    font-size: 20px;
+}
+
+.title {
+    font-size: 30px;
+    line-height: 30px;
+    font-weight: lighter;
+    color: var(--card-text-color);
+    margin-block: 0;
+}
+
+.description {
+    font-size: 20px;
+    line-height: 20px;
+    font-weight: lighter;
+    color: var(--card-text-color);
+    margin-block: 0;
+}
+
+.body {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.questionContainer {
+    background-color: var(--card-background-color);
+    border: solid 3px var(--card-border-color);
+    width: 75%;
+    max-width: 750px;
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: center;
+    padding: 20px;
+    gap: 5px;
+
+    transition: 0.3s;
+}
+
+.hr {
+    width: 100%;
+    border: solid 2px transparent;
+}
+
+.input {
+    background-color: var(--card-background-color);
+    border: solid 3px var(--card-border-color);
+    padding-block: 5px;
+    padding-inline: 5px;
+    border-radius: 7px;
+    font-size: 17px;
+    resize: vertical;
+    min-height: 37px;
+}
+.input:focus {
+    outline: none;
+}
+
+.errorContainer {
+	width: 100%;
+	height: 0px;
+	transition: 0.3s;
+	overflow: hidden;
+    margin-top: 5px;
+    margin-bottom: 0;
+}
\ No newline at end of file