Skip to content
iJungleboy edited this page Jan 17, 2017 · 12 revisions

Quick Intro To The jQuery Simple Form app

This 2sxc app serves 3 core purposes

  1. It can be used to quickly create a contact form in any DNN web site
  2. You can easily customize it to have more input fields, to use it for any other form you need
  3. You can use it to create many forms in your site
  4. You can use it as a starting point to create your own online forms in DNN

Already Implemented Features

Since this is a 2sxc-app, you can customize it to be anything you want! This list just shows what it already does, so you know what you get out-of-the-first-box.

  1. Basic contact form with Subject, Message, Name, E-Mail
  2. This is saved, together with the timestamp and SenderIP
  3. It also sends an e-mail
    1. to the site owner and the customer...
    2. using fully templated e-mails based on Razor templates
    3. both subject and body are templateable
    4. you can set a different Reply-To address
    5. you can also CC both the customer and owner mail to more people
  4. All labels and messages are multi-language, and translated into English and German/Deutsch
  5. All interactions are AJAX / WebAPI, so no postbacks etc.
  6. Form validation uses jQuery
  7. You can easily review / manage the submitted items
  8. export all submissions into an Excel-compatible XML format

Because it's so simple and uses 2sxc, you can easily

  • translate it into any other language in minutes
  • add more fields, even with special validation in minutes
  • customize the e-mail templates
  • send more e-mails, trigger other actions

Getting Started

This app is only useful is you use DNN. So assuming you have a DNN installation, all you need to do is install 2sxc and this app.

Now you can use this app as-is, or customize it to be whatever you need it to be.

Customizing Basic Things

Add Another Form Fields

The standard setup saves data in the ContentSimple content-type. To add more fields which the user can submit, you must

  1. add the new field in the content-type, with the correct data-type (text, number, etc.) - if you have no idea how to do this, best look at this tutorial
  2. add the input field in the HTML template for the form, in any way you want to

If you want to use a special field like a drop-down etc. just do it in HTML - again all is explained in the section customize fields

Clone this wiki locally