In the process of customizing a quote form or a weather widget, you'll be able to edit a section called App Event Steps. This section gives you complete control over the appearance and the content of your quote form—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?
Each "Form Panel" represents a step of your quote form or weather widget. 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 quote form or weather widget 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 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.
What App Event Step Customizations Are Available?
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:
The Elements tab includes the actual content of your Form Panel. For example, you can change the type and amount of information you are requesting from the user, you can insert a picture, you can add a comment box, you can rearrange the order of elements, and so on.
On the first Form Panel of your form, you must include the following user input fields: Name, address, and email or phone number. Learn why these specific form fields are required here.
As you might guess, the Style tab allows you to change how your form looks. You can make tons of customizations here, 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:
- Editing the header or paragraph text
- Linking to a webpage
- Adding an image or weather report
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:
- Site Tool Display Types: Explanations and Examples
- How to Create a Quote Form
- How to Create a Weather Widget - link coming soon!
- How to Customize a Quote Form
- How to Add a Site Tool to Your Website
- Different Ways to Use PSAI Quote Forms on Your Website