PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Format {all_fields}-Table with CSS

  1. hansb_
    Member

    Hello,
    I would like to format the notification table which is generated by the {all_fields}-tag with css. The colors of the rows are formated by "tr bgcolor"-attribute, but I would prefer classes like "label", "value" and "odd" and "even" for the table rows.
    How can I change this?

    Thank you for your help,

    hansb_

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  2. Without modifying the plugin files, you would have to craft your own HTML email notification. You can view the source of a notification email and use that as your template, then make your changes and use that HTML as the basis for your custom notification.

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  3. hansb_
    Member

    Hello Chris, thanks for your quick answer. I do not find anything in the documentation to this topic. Therefore can you please tell me, were to find the template which is used for the notification mail and notification message on the website - and how to embed a modified template? How can I modify the template update save?

    Thanks a lot, hansb_

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  4. If we are talking about the user notification, you can find that on the Notifications tab of the form in question. It looks like this: http://chrishajer.minus.com/lbp7gnipuLLz1g

    In that notification area, you might normally see {all_fields}. You can remove that because you are going to be crafting your one HTML notification. Be sure to check the box "Disable Auto-formatting" as well, since your HTML will not require further processing. Be sure also to use the HTML tab in the visual editor.

    View the source of an email notification which used {all_fields} in the past, to get an idea of what your custom notification needs to be formatted like. You can copy most of that, and change the items from hard-coded colors and values to classes or whatever you want to use.

    Then, insert the merge tags from the drop down into your HTML table layout. Your notification area might look something like this once you are done. http://pastebin.com/kK3MsEem

    You can then add the CSS styles to your HTML email and style and adjust the layout as you want. It's a lot of work, but you have complete control over the look of the notification. We use a table layout with inline styles because it's supported by most every email client. You can, however, experiment with whatever CSS you want. Here is a really good article from Mailchimp about crafting HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails/

    My favorite line: "... if you can code your own web page, you can code your own HTML email templates. There is a little catch, though. You have to code like it's 1996 (explanation later)."

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  5. hansb_
    Member

    Hello Chris, again thank you very much for your answer. But the solution you described is a per form solution and I would prever a per blog solution for all forms. The disadvantages of your solutions:
    * You have to create a html table for every form twice (notification on webpage after form submitting and notification in the email) which is hard to maintain and
    * in forms with a lot of conditional logic you will have a lot of "empty" table rows which is hard to read and unreasonable for visitors.

    Is there a possibility to embed my own php template that renders the {all_fields}-table dynamically (with add_filter or whatever ...)?

    (I have experience in php and newsletter designing)

    Thanks a lot, hansb_

    Posted 7 years ago on Wednesday August 8, 2012 | Permalink
  6. There is no possibility to do that currently. You would have to create some sort of function to handle notifications on your own. I have no experience with this as it has not been requested often. I imagine you could use the gform_pre_submission filter to change the autoresponder email.

    http://www.gravityhelp.com/documentation/page/Gform_pre_submission

    The filter has access to the $form object and in there is the autoresponder. http://www.gravityhelp.com/documentation/page/AutoResponder

    You could write a flexible function to loop through all the submitted values and always craft your own HTML notification, and not use the built-in notification from Gravity Forms. It would be a lot of work, but you have complete control over the look at that point.

    Posted 7 years ago on Thursday August 9, 2012 | Permalink
  7. Hi Hans

    Did you figured this already out with an own written notification?
    Also here we have a quite complicated very long form with a lot of conditional logics.

    But we want a more simple notification.
    But also, we don't want to get the empty fields.

    Thx for your update.
    Kristof

    Posted 6 years ago on Tuesday April 16, 2013 | Permalink