Is it possible to use existing toast notifications in Forms?

asked on May 12

I am looking to add a notification when a Form is loaded, either hidden after a set delay or closed by the user. Working in forms I have seen existing notification toasts being used, either with the user submitting the Form when required fields are not filled or building the Form when saving the form is completed.

Here is an example of the notifications I am referencing above:

Is it possible to use LFForm or some vanilla JavaScript or even CSS to leverage these existing toast notifications? I haven't been able to find any references to their uses, although I have achieved moderate success with replicating HTML structure, CSS classes, and some JavaScript code utilizing bootstrap assets.

I have used LFForm to intercept submissions with onFormSubmission and display a custom notification, so I am hoping there is something similar that can be done with form loading, not just submitting.

0 0

replied on May 13

Hi Dean, try this out.

- Add a custom HTML field with empty contents. Preview the form and inspect the page to get it's component-id (e.g. `dc2fcecc-efe9-4633-993a-d66a3beecf65`), copy and save this.

Add custom JS, note to replace the TOAST_COMPONENT_ID.

const TOAST_COMPONENT_ID = 'dc2fcecc-efe9-4633-993a-d66a3beecf65';

const TOAST_COLORS = {
    success: ['#e8fbf6', '#0eb887'],
    info: ['#eff8ff', '#5db4ff'],
    warning: ['#fff8e5', '#ffb600'],
    error: ['#ffeeef', '#ff5963'],
};

window.showToast = (message, type, duration) => {
    const [bg, border] = TOAST_COLORS[type] ?? TOAST_COLORS.success;
    const closeCode = `LFForm.changeFieldSettings({componentId:'${TOAST_COMPONENT_ID}'},{default:''})`;

    const html =
        `<div style="position:fixed;top:20px;left:0;right:0;margin:0 auto;min-width:320px;max-width:calc(100% -
  320px);width:fit-content;z-index:2000;font-weight:600;font-size:16px;">` + 
        `<div style="padding:.75rem 1.25rem;padding-right:2.5rem;border:1px solid
  ${border};border-radius:.25rem;min-height:20px;display:flex;align-items:center;position:relative;color:#000;background:${bg};">` + 
        `<span style="margin-right:20px;">${message}</span>` + 
        `<button onclick="${closeCode}" title="Close"
  style="position:absolute;right:8px;top:8px;background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;opacity:.6;">` + 
        `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6"
  y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>` + 
`</button></div></div>`;

    LFForm.changeFieldSettings({
        componentId: TOAST_COMPONENT_ID
    }, {
    default:
        html
    });

    if (duration > 0) {
        setTimeout(() => LFForm.changeFieldSettings({
                componentId: TOAST_COMPONENT_ID
            }, {
            default:
                ''
            }), duration);
    }
};

window.closeToast = () =>
LFForm.changeFieldSettings({
    componentId: TOAST_COMPONENT_ID
}, {
default:
    ''
});

// Show on form load
window.showToast('Test load from toast', 'success', 5000);

The example above will load the toast on form load. Or we can also trigger it via custom JS such as button clicks.

  <button onclick="showToast('Your form has been saved.', 'success', 0)" style="padding:6px 16px;margin-right:8px;cursor:pointer;">Open Toast</button>
  <button onclick="closeToast()" style="padding:6px 16px;margin-right:8px;cursor:pointer;">Close Toast</button>
  <button onclick="showToast('Your form has been saved.', 'success', 3000)" style="padding:6px 16px;cursor:pointer;">Open Toast (3s)</button>

The toast style can be modified as needed, but I've kept it similar to the default forms one.

0 0

replied on May 14

Hey Joey,

Thank you for the reply and the code. I actually tried something very similar using a custom HTML field, and it works to an extent.

This does provide a solution close to what I am looking to use. I was hoping to discover an existing method in LFForm object or other included libraries, but it does appear this will need to be a custom setup like you provided. Thanks again!

0 0

Question

Question

Is it possible to use existing toast notifications in Forms?

Replies

Sign in to reply to this post.