'

Introduction Jazz Form Dynamic Content

Dynamic content is an exciting new functionality in Jazz Forms that enables powerful content customization. With dynamic content, you can send personalized emails or generate PDF documents (requires the PDF Add-On) using HTML-formatted text dynamically displayed based on field values.

For example, you can structure the subject line of your emails to dynamically display the appropriate user name, avoiding hard-coded values:

Thanks {{ Name }}, we have received your message!

Dynamic content is currently available in:

  • Confirmation Messages
  • Confirmation Emails
  • Email Notifications
  • Premium Add-Ons like Conditional Emails or PDF generation.

Variables

Variables allow you to dynamically insert user-provided data into your messages. To use variables, enclose them within double curly braces: {{ variable_name }}. For example:

  • Field Label: {{ Your Name }} dynamically replaces this placeholder with the value the user entered in the “Your Name” field.
  • Field ID: For unlabeled fields, use their Field ID, e.g., {{ text_1 }}.

Additional variables include:

  • Form Information:
    • {{ form_id }}: Form ID.
    • {{ form_name }}: Form Name.
  • Submission Information:
    • {{ submission_id }}: Submission ID.
    • {{ submission_number }}: Submission Number.
    • {{ submission_table }}: HTML-formatted content of all form fields.
    • {{ submission_text }}: Text-formatted content of all form fields.
    • {{ created_at }}: Submission date.
  • User Information:
    • {{ ip_address }}: Sender’s IP Address.
    • {{ user_agent }}: Browser’s user agent of the sender.
    • {{ url }}: Web page URL where the form is embedded.
    • {{ referrer }}: Web page URL the user arrived from.
    • {{ country }}, {{ city }}, {{ latitude }}, {{ longitude }}: Geolocation details of the sender.
  • Utility:
    • {{ edit_link }}: URL for editing a submission (requires “Save to DB” & “Editable” enabled).
    • {{ optin_link }}: Link to the Opt-In Confirmation Page (requires “Save to DB” enabled).

Auto-Suggest Tool

Jazz Forms makes working with variables simple using the Auto-Suggest Tool. By typing {, a list of available form fields appears, allowing you to quickly select and insert fields without memorizing their exact names.

Filters

Filters let you modify the output of variables for enhanced customization. Here are some common examples:

Use Default Values

Set a default value for non-required fields: Thanks {{ Name | default: "friend" }}, we have received your message!

  • If the user inputted “John,” it outputs: Thanks John, we have received your message!
  • Without a name, it defaults to: Thanks friend, we have received your message!

Change Date Formats

Convert timestamps into a different format:

  • {{ created_at | date: "%a, %b %d, %y" }} → Fri, Jul 17, 20
  • {{ created_at | date: "%Y" }} → 2020

Use Timezone and Locale with Date Formats

Format dates using timezones and locales:

  • {{ created_at | timezone: "America/New_York" | date: "%Y-%m-%d %H:%M" }} → 2020-07-17 01:00
  • Unix Locale: {{ date_1 | locale: "en_US" | timezone: "America/New_York" | date: "%A, %B %d, %y" }} → Monday, February 28, 22
  • Windows Locale: {{ date_1 | locale: "Spanish_Spain.1252" | timezone: "America/New_York" | date: "%A, %B %d, %y" }} → lunes, febrero 28, 22

URL Encoding

Encode variables for safe use in URLs:

New Line to Break Filter

Convert newlines (\n) in textarea fields into HTML line breaks (<br>):

  • {{ Your Message | newline_to_br }} outputs:cssCopy codeDear ACME Team,<br> I am writing in reference to the ABC Project.

Signatures

Jazz Forms supports dynamic signatures with various formats:

  • Raw Data (JSON): {{ hidden_signature_1 }}
  • Image (HTML <img> Tag): {{ hidden_signature_1 | signature }}
  • Data URL (for <img> src Attribute): {{ hidden_signature_1 | signature: 'data_url' }}
  • Raw Data (Alternate): {{ hidden_signature_1 | signature: 'data' }}
  • Image (Alternate): {{ hidden_signature_1 | signature: 'image' }}

Conditionals

Conditional logic customizes content for specific user inputs. For example, send emails in different languages:

liquidCopy code{% if Language == 'Spanish' %}
  Hola {{ Name }}!
{% elsif Language == 'French' %}
  Bonjour {{ Name }}!
{% else %}
  Hello {{ Name }}!
{% endif %}

Use conditionals to show images uploaded in a form:

liquidCopy code{% if file_1[0] %}
  <div class="image-item-1">
    <img src="{{ file_1[0] }}" width="300" height="300" alt="First Image" />
  </div>
{% endif %}

Modifiers

Modifiers display selected labels instead of values in select fields, radio buttons, or checkboxes. For example:

  • Selected Country Codes: {{ selectlist_1 }} → US, FR, ES
  • Selected Country Names: {{ selectlist_1:label }} → United States, France, Spain

This guide covers all aspects of dynamic content in Jazz Forms, empowering you to create personalized, impactful, and efficient communication experiences. Let me know if further adjustments are needed!

Type to search