When customizing a site tool (like a quote form or weather widget), there may be a section called App Event Steps. This section lets you edit the appearance and the content of your site tool, from its text and button color to the information it requests and its overall user flow.
Learn more about this section and its many customization options below.
What Are Form Panels?
With the App Event section, each "Form Panel" represents a step of your site tool. For most quote forms, you will have two types of customizable panels (as shown in the screenshot just above):
- Form Panel: This is what initially appears on your website, often showing the form fields and a submission button along with some text and perhaps an image. Depending on what you want to present, you can have multiple form panels in a single form or widget.
- End Panel: This is what appears after the user has successfully submitted the form, usually as some kind of thank you message and/or next step.
If your site tool is the "Button Opens Popup" display type, however, it will have an additional form panel for the Start Button (shown below).
If you are not familiar with "Button Opens Popup" or the other app display types, see some examples of display types here.
Form Panel Example
To understand form panels, check out the following example. This weather widget has four total panels, as shown in the screenshot below.
By clicking the button for "Preview," you can see each of these four panels in turn, as shown in the GIF below.
Every panel in this sequence can be fully edited, including being reordered and even deleted.
How Do I Edit Form Panels?
To edit any form panel—whether the start button, the form panels, or the end panel "thank you"—simply click the blue pencil icon for that particular panel.
Customizing the Start Button, Form Panels, and End Panel
The specific edits you can make will vary slightly depending on which form panel you're editing: the Start Button, a regular Form Panel, or the End Panel.
Let's look at each type of panel below.
Start Button Customizations
Remember: the Start Button panel will only appear for the Button Opens Popup display style.
When you click the blue pencil next to a Start Button panel, you will be brought to the page below. Here you can change the floating button's text by typing directly into the button on the left.
Additionally, you can use the panel at the right-hand side to make further edits, including:
- Button size
- Rounded or square corners
- Text style: bold or italics
- Button background color
- Button text color
- Screen position
Form Panel Customizations
The next type of panel is the Form Panel. Unlike the Start Button, Form Panels appear on all display types.
Clicking the pencil will bring up the advanced customization options shown in the screenshot below. On the left is a preview of the current form panel; on the right are all the elements you can add and customize.
Note that there are two tabs on the right-hand side of the Form Panel editing page:
- Elements
- Style
Elements tab
The Elements tab includes the actual content of your Form Panel. For example, you can change what information you are requesting from the user, change the order of the elements, and so on.
Please note the following:
- You can add multiples of certain elements, including text, text input, dropdown, radio group, and checkboxes.
- Certain elements are disabled because they must be included for your quote form to work, including name, address, and email or phone number.
- Adding your company logo will automatically insert the logo saved to your PSAI company settings.
Style tab
As you might guess, the Style tab allows you to change how your form looks, including:
- Showing or hiding input labels
- Adding a background color or image
- Changing the headline text, color, size, and more
- Customizing the button
All changes made to the Style tab are global, which means that they will affect every panel of your quote form. This is to ensure a cohesive look across the entire form.
End Panel Customizations
The final panel of any quote form or weather widget is the End Panel, which you can think of as a "thank you" message.
Because this is the final panel, you cannot request any further user input. Instead, you can make select changes (shown in the screenshot below), including:
The End Panel is a great opportunity to provide a next step. For instance, you could link to a gallery page to get them excited about their project or to a "how it works" page so that they're prepared for their consultation.
Editing, Deleting, and Reordering Panels
You can remove form panels by clicking the gray X, and you can insert new panels by clicking the blue plus sign (+). You can also drag each panel to reorder them.
If you do reorder your form panels, remember that the first panel must end up including name, address, and email or phone number.
Previewing Your Quote Form or Weather Widget
At any point in the process of customizing your quote form, you can click the Preview button to see how your design is looking.
This will open your form in another tab of your browser, where you can click through your app as if you were submitting it. (Real data is not required.)
Please note that if you preview a quote form of the "Exit Intent" display type, you'll have to move your mouse away from the page to see the form—just like a real customer would.
For more information on quote forms and weather widgets in PSAI, please refer to these resources:
- Editing the header or paragraph text
- Linking to a webpage
- Adding an image or weather report