Skip to content

Home

Jump to bottom
iJungleboy edited this page Jan 17, 2017 · 12 revisions

Quick Intro To The jQuery Simple Form app

This 2sxc app serves 4 core purposes

  1. create a standard contact form in any DNN web site in 1 minute
  2. easy to customize with more/custom input fields as you need
  3. create many same or different forms in your site
  4. use it as a starting point to create your own online AJAX 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

Add Other Validations on a Field

Just use HTML5 validation or follow the conventions of the ??? jQuery plugin. Read more about it in the customize fields section.

Customize E-Mail Templates / Subject

Read about it in customize e-mails

Clone this wiki locally