Aissac Blog

Announcing the Radiant Sitemap XML Extension.

Features

• Allows you to specify in Radiant admin which pages appear in the sitemap;
• Gives you the possibility to set the change_frequency and priority per page.

Check out the source code on github.

For installation and configuration details visit the Radiant Sitemap XML Extension documentation page.

Forms validation on the client-side is very important as it saves time and bandwidth, and gives you the option to point out to the user what they’ve done wrong in filling out the form. Having said that let me present you the way we do client-side validation of the email forms created using Radiant Mailer Extension.

First, of course you will need to set up a new Radiant project and install the Radiant Mailer Extension. You can checkout the repository I made for this post on github.

We’re using Andrew Tetlaw’s validation.js. You can download it here.

Now, that you have the project ready, let’s create a Contact page in Radiant. This is a Mailer page so you need to create a mailer page part with the following content:

  
    subject: From the website of Whatever
    from: noreply@example.com
    redirect_to: /contact/thank-you
    recipients:
      - one@one.com
      - two@two.com
  

Create the email form:

  
    <div id="flash" style="display:none;"></div>
    <r:mailer:form id="mailer-form">
      <label for="name">Name:</label><br/>
      <r:mailer:text name="name" /><br/>

      <label for="email">Email:</label><br/>
      <r:mailer:text name="email" /><br/>

      <label for="message">Message:</label><br/>
      <r:mailer:textarea name="message" /> <br/>

      <input type="submit" value="Send" />
    </r:mailer:form>
  

Great, we have the email form ready and the Radiant Mailer configured to use. Let’s start adding the Javascript. In your layout, link to the prototype.js and validation.js.

  
    <script type="text/javascript" src="/javascripts/prototype.js"></script>
    <script type="text/javascript" src="/javascripts/validation.js"></script>
  

In order the activate validation on the form you need a little Javascript snippet the will pass the form’s id attribute and will show the flash. You can put it in the layout also:

  <script type="text/javascript">
    function FormValidationCallback(passed_validation, form) {
       if (!passed_validation) {
         $('flash').update('<div class="error">The form contains errors!</div>');
         $('flash').show();
       } else {
         $('flash').hide();
       }
      }
      document.observe("dom:loaded", function () {
        new Validation($('mailer-form'), {onFormValidate: FormValidationCallback});
      });
  </script>

To activate validation on certain fields you just need to ad the proper class. Here’s the list of classes available to add to your field elements:

• required (not blank)
• validate-number (a valid number)
• validate-digits (digits only)
• validate-alpha (letters only)
• validate-alphanum (only letters and numbers)
• validate-date (a valid date value)
• validate-email (a valid email address)
• validate-url (a valid URL)
• validate-date-au (a date formatted as; dd/mm/yyyy)
• validate-currency-dollar (a valid dollar value)
• validate-selection (first option e.g. ‘Select one…’ is not selected option)
• validate-one-required (At least one textbox/radio element must be selected in a group)

  
    <r:mailer:text name="name" class="required" />
  

The validation library uses CSS classes to indicate validation status. Let’s style them a little:

  
    div.error {
      background:#CC0000 url(/images/site/exclamation.png) no-repeat 10px 5px;
      padding:5px 10px 5px 30px;
      color:#FFF;
      font-weight:bold;
      border:2px solid #CCCC99;
      margin:10px 0 5px 10px;
    }
    .validation-advice {
      background:#FFF url(/images/site/exclamation_advice.png) no-repeat left 5px;
      color:#9E2522;
      font-size:85%;
      padding:8px 0 5px 22px;
    }
  

You have here a screenshot of the validated form:

This about covers it. You can find out more about the options validate.js library gives you on Andrew Tetlaw’s blog. And you can see a working example of this technique on our company’s contact form.

Radiant Database Mailer Extension is used to add database persistency to emailed forms, and it just got fresh features.

Besides the possibility to save posted form fields and entire email messages to the database and export data to CSV and XLS, now it saves e-mail attachments using paperclip. Any attachments that the email might have will be saved on the file system. They can be downloaded from the details page of every record.

Also, the extension got thoroughly tested using Cucumber and webrat/email_spec.

Check out the source code on github.

For installation and configuration details visit the Radiant Database Mailer Extension documentation page.