diff --git a/assets/css/src/components-form-editor/_preview.scss b/assets/css/src/components-form-editor/_preview.scss index bed67a1494..39fbcb3ba2 100644 --- a/assets/css/src/components-form-editor/_preview.scss +++ b/assets/css/src/components-form-editor/_preview.scss @@ -67,3 +67,11 @@ .mailpoet_form_preview_modal_overlay { z-index: 100010; // Boosted z-index to cover Helpscout beacon } + +.mailpoet_form_preview_disclaimer { + bottom: 10px; + font-size: 0.9em; + position: absolute; + right: 0; + width: 380px; +} diff --git a/assets/js/src/form_editor/components/preview.jsx b/assets/js/src/form_editor/components/preview.jsx index f67c247a82..0ce7dda7db 100644 --- a/assets/js/src/form_editor/components/preview.jsx +++ b/assets/js/src/form_editor/components/preview.jsx @@ -34,6 +34,7 @@ const getPreviewType = () => (window.localStorage.getItem('mailpoet_form_preview const FormPreview = () => { const [iframeLoaded, setIframeLoaded] = useState(false); + const [previewType, setPreviewType] = useState(getPreviewType()); const formBlocks = useSelect( (select) => select('mailpoet-form-editor').getFormBlocks(), @@ -88,12 +89,12 @@ const FormPreview = () => { window.localStorage.setItem('mailpoet_form_preview_last_form_type', type); } - function setPreviewType(type) { + function onPreviewTypeChange(type) { + setPreviewType(type); window.localStorage.setItem('mailpoet_form_preview_last_preview_type', type); } const formType = getFormType(formData.settings); - const previewType = getPreviewType(); const urlData = { id: formData.id, form_type: formType, @@ -135,7 +136,7 @@ const FormPreview = () => { {!iframeLoaded && ( @@ -150,6 +151,11 @@ const FormPreview = () => { onLoad={() => setIframeLoaded(true)} data-automation-id="form_preview_iframe" /> + {formType === 'sidebar' && previewType === 'desktop' && ( +
+ {MailPoet.I18n.t('formPreviewSidebarDisclaimer')} +
+ )}
)} diff --git a/views/form/editor.html b/views/form/editor.html index 0128e7a2d5..aa57d591c5 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -155,6 +155,7 @@ 'formPreview': __('Form Preview'), 'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'), 'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'), + 'formPreviewSidebarDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'), 'noName': _x('no name', 'fallback for forms without a name in a form list'), }) %> <% endblock %>