Forums/Tips & Tricks

Showing all the form fields in the message generated upon custom form submission

Michael Slater
posted this on July 21, 2010, 22:06

Note: you can still use the technique described in this article, but we've added new features that allow you to directly access all form fields in your email notification messages, making this technique unnecessary. See Customizing Email Notifications for Form Submissions.

When you create a form to enable site visitors to submit data to a custom item type, the notification that is sent to the site admin does not have the full content of the form; it has only a link to view the submitted information on the site.

You can control what is sent to admin by modifying the message text in the snippet "admin_notice_form_id", where "form_id" is replaced with whatever ID you entered when you created the form for the custom item type. This snippet is typically something like:

You received a new entry from form 'form_id'. Please review at: <w:url />

Now you might hope that you could add all your custom fields to this bit of text and display them in the message, but alas, this is not possible (yet). We plan to add that capability in the future.

Fortunately, there is a workaround you can use now. It's a little complicated, but it works fine. There are four parts to it:

  1. Add a hidden textarea, called "aux", to the form, to use as a storage area for the combined form fields.
  2. Add an onclick handler for the form submit, which triggers a function that combines all of the form fields into the aux field.
  3. Provide the function that does this work (combines the contents of all the fields and writes them to the aux field).
  4. Add <w:aux /> to the email message snippet, which inserts the form data into the email message.

Modifying the form

At the end of the form code, which you generated as for any custom item type submission form (see Creating forms for user submissions), add an additional textarea field using the code below. Replace "form_id" with whatever the ID is for your form, and replace item_type_name with the name of the custom item type.

Then add an onclick handler to the submit element. The following shows these two changes:


<form id="form_id" ...>
(regular form fields go here)
<!-- add a hidden textarea to use as a storage area for the combined data -->
<textarea style="display: none;" name="form_id[item_type_name][aux]" id="form_aux" rows="1" cols="1"></textarea>
<!-- add an onclick handler for the submit button to combine all the fields -->
<p><input id="dy_node_submit" onclick="serializeAndStore();return true;" name="commit" type="submit" value="SUBMIT" /></p>
</form>

Creating the JavaScript function

The following code can go at the end of the body section of the page with the form, or it can go in the head section in a "document ready" block. This version of the code assumes you have jQuery loaded.


<script  type="text/javascript">
function serializeAndStore() {
$('#form_aux').val('');
var fieldstring = $('#form_id').formSerialize(); //change 'form_id" in this line
if (fieldstring) {
var fields_ary = fieldstring.split('&');
var output = "";
for (var i = 0; i < fields_ary.length; i++) {
var kv = fields_ary[i].split('=');
var m = kv[0].match(/\w+%5B\w+%5D%5B(\w+)%5D/);
var key = (m && m[1]) ? m[1] : kv[0];
var val = kv[1];
if (val == "0") val = "";
val = decodeURIComponent(val);
val = val.replace(/\+/g,' ');
if (val != "") {
if (val == "1")
output = output + "<p>" + key.toUpperCase() + "</p>";
else    
if (key != 'form_id') {output = output + "<p>" + key + ": " + val + "</p>"}; // do not change 'form_id' in this line 
}
    }
$('#form_aux').val(output);
}
}
</script>

 

This JavaScript function is executed when the form is submitted (thanks to the onclick handler on the Submit element). It goes through all of the fields in the form, combines them into one block of text with some minimal HTML formatting, and writes the result to the "aux" field.

Be sure to replace "form_id" in the HTML form code and the 4th line of the JavaScript block above with the ID of your actual form.

Displaying the aux field in the email

Now for the easy part. In the admin_notice_form_id snippet, just add "<w:aux />", and it will display all the text that the serializeAndStore JavaScript function inserted into the aux field when the form was submitted.

 

Comments

Jed V

In newer jquery versions (such as my 1.4.2 version I use for my webvanta sites) the function formSerialize is now simply serialize.

Just incase anyone had that problem.

Jed.

July 22, 2010, 04:17