Editing the design and display of the embedded form
With an embedded subscribe form, visitors can sign up without leaving your website. The form is placed directly on your own page. You put it together in Laposta, choose which fields to include, and you do not need a single line of code to do so.
You configure the form using the form editor. Open it from the corresponding list: go to Subscribers, click on your list and select Enrich → Subscribe. Under ‘Embedded form’, click on ‘Start’, even if you want to edit an existing form. Then click on ‘Configure’ on the main page of the form.
Working in the editor
Click on an element of the form to edit it. On the left, the settings will appear, divided into two tabs:
- Under ‘Content’, you can enter text, choose which fields are visible and select an image.
- Under ‘Design’, you can configure colours, fonts, margins and more.
On a small screen, elements are often stacked vertically and the text is larger than on a large screen. That is why you can switch between ‘Desktop’ and ‘Mobile’ in various places in the editor, allowing you to configure both views separately.
At the top of the editor, you will find the buttons ‘Undo’ (step back), ‘Redo’ (step forward) and ‘Preview’. Click on ‘Preview’ in the top right to view the result and switch between the standard and mobile views.
Opening general settings
Click in the white area next to the form to open the general settings for the entire form. On the left, the tabs ‘Content’, ‘Design’ and ‘Settings’ will appear.
Choosing a layout
On the ‘Content’ tab, choose the overall layout by clicking on one of the icons. This sets the position of the fields, the image and the button for both desktop and mobile.
Setting width and rounded corners
Go to the ‘Design’ tab. Under ‘Widget width’, set the width in pixels separately for desktop and mobile. Under ‘Rounded corner’, indicate whether the form should have rounded corners and how round they should be.
Choosing between inline, pop-up or slide-in
On the ‘Settings’ tab, under ‘Form placement’, choose how the form appears on your page:
- ‘At the place of the code’ (default): displays the form inline, right where the JavaScript code is placed.
- ‘Popup’: places the form in the middle of the page, overlaying the content.
- ‘Slide in’: makes the form slide into the page at a position you specify.
Setting when the form appears
By default, the form appears immediately when the page loads. If you want to change this, go to the ‘Settings’ tab and click on ‘Add condition’ under ‘When to show the form?’.
You can choose from three moments:
- ‘After some time’: a number of seconds after the page has loaded.
- ‘On exiting the page’: as soon as your visitor moves their mouse to leave the page. Until that moment, the form is invisible.
- ‘After scrolling’: the form only appears once your visitor has scrolled down a certain percentage of the page.
Setting when the form stops appearing
By default, the form is no longer shown once it has been completed. Under ‘When to hide the form?’, click on ‘Add condition’ to set other moments:
- ‘After closing’: the form has been dismissed. You can specify whether it may be shown again after a certain time.
- ‘After showing’: the form has been viewed. Here too, you can specify whether it may be shown again after a certain time.
- ‘After a number of times’: the form has been viewed a certain number of times.
You can combine conditions, both for showing and for hiding the form.
Choosing which pages display the form
By default, the form is active on all pages containing the code (indicated by the path /*). On the ‘Settings’ tab, you can change this under ‘On which pages of your website?’.
Via ‘Edit pages to show’, you specify where the form may be shown. Via ‘Edit pages to hide’, you indicate where it should not be shown. Enter paths here (parts of your website’s URLs). You can use a wildcard: contact/* stands for all pages starting with contact/.
Showing or hiding with JavaScript
Separately from the settings in Laposta, you or your web developer can also use JavaScript to determine when the form opens or closes. The two required functions, including the unique code for your form, can be found on the ‘Settings’ tab under ‘Show/hide with javascript’.
To read how to fill in and style the individual elements of the form, see Text in the embedded form, Image in the embedded form and Fields in the embedded form.