In This Article:

    Clean up error messages

    In This Article:

      When a donor forgets to provide a required field in a donation page, the result is a truly ugly set of error messages.


      Enlarge
      | See the errors full size.

      This article will give you some ideas about how to make these errors a bit more attractive and readable. We will

      • Remove the second set of error messages (an open bug, and this is the workaround)
      • Get rid of the error box, line of the error messages and generally make it a lot nicer to look at
      • Remove that really long line at the bottom of the dialog

      Remove the second set of error messages

      The first task is to remove the second set of error messages. We'll do this by adding some CSS to your template that hides the error messages in the User Information page of the donation page. Here are some steps that you can use:

      1. Edit the template for the donation page(s).
      2. Use the browser's search tool to locate the </head> tag.
      3. Insert a blank line just before the </head> tag.
      4. Click here to see the page where the CSS lives.
      5. Locate the file named donation_clean_hide_second_set.html.
      6. Click on the Raw button for that file. A window containing just the CSS will appear.
      7. Copy the contents of the window and close it.
      8. Return to the template editor.
      9. Paste the copied text into the newly inserted line in the template.
      10. Save the template.
      11. Test by opening a donation that that uses the template that you just modified. Click the Submit button and the error messages should look like the diagram (below).


      Enlarge
      | See the full size image.

      Clean up the errors with CSS

      The next step will be to clean up the remaining error messages. We'll do this by adding CSS to change the way that the errors are displayed.

      1. Edit the template for the donation page(s).
      2. Locate the </head> tag.
      3. Insert a blank line before the </head> tag.
      4. Click here to see the page where the CSS lives.
      5. Locate the file named donation_clean_error_appearance.html.
      6. Click on the Raw button for that file. A window containing just the CSS will appear.
      7. Copy the contents of the window and close it.
      8. Return to the template editor.
      9. Paste the copied text into the newly inserted line in the template.
      10. Save the template.
      11. Test by opening a donation that that uses the template that you just modified. Click the Submit button and the error messages should look like the diagram (below).

       


      Enlarge
      | See the full sized image.

      Remove the last line

      The last bit of cleanup will be to remove the line that starts with "Error fields:". We'll do this with a script. Use these steps to install the script:

      1. Edit the template used for donation page(s).
      2. Locate the </body> tag.
      3. Insert a blank line before the </body> tag.
      4. Click here to see the page where the CSS lives.
      5. Locate the file named donation_clean_error_last_line.html.
      6. Click on the Raw button for that file. A window containing just the script will appear.
      7. Copy the contents of the window and close it.
      8. Return to the template editor.
      9. Paste the copied text into the newly inserted line in the template.
      10. Save the template.
      11. Test by opening a donation that that uses the template that you just modified. Click the Submit button and the error messages should look like the diagram (below).

       


      Enlarge
      | See the full sized image.

      Questions?

      If you have any questions, then please gather this information.

      Send this information to support@salsalabs.com, and we'll be glad to help.

      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Please sign in to leave a comment.