Documentation

Widget Design

How to customize form fields for my popup?

First name, last name and email form  

Select first name, last name, or email form to collect information about your customers. 

  • For these forms, you have the next editing options: label of the form, placeholder text and description.
forms
  • To make the field obligatory to fill make an active “Required” switcher.
  • If you want to make 2 form fields in one line, make active switcher “Half width”.
forms

Phone number form 

Use the Phone number form to add the field to your Popup where users can enter their phone number.

  • Add field label and description. 
  • Set the default country for the number (your customers will be able to change the country if needed).
Phone number form
  • To make the field obligatory to fill make an active “Required” switcher.
  • If you want to make 2 form fields in one line, make active switcher “Half width” 
Phone number form

Choice list form

Select the choice list form to give users several options to choose from. 

  • Plum gives three options for the choice list: dropdown list, single option, and multiple options.
  • To edit the name of the options, add and delete them, click on the Edit choice list. When you are happy with the look of your choice list don’t forget to click the Update button.
Choice list form
  • For the single option and multi option, you can choose the way it is going to show on your popup: vertical or horizontal.
  • To make the field obligatory to fill make an active “Required” switcher.
  • If you want to make 2 form fields in one line, make switcher “Half-width” active.
Choice list form

Spacer form

To add space between form fields you can use spacer form. 

  • Click on the Spacer form in the Form fields content and customize the height of the spacer. 
Spacer form

Date

Select the Date form to have a field in your popup where users can choose the date. 

  • You can edit the label of the form and description. 
  • Besides, you can decide if the date field is required and make it half-width.
Date

Single text form & Paragraph text

If you want to give the user the possibility to enter some text use single text form or paragraph text(depending on the length of the text required).

  • Edit form label, description and placeholder. 
  • Decide if you want to make this field obligatory or half-width. 
Single text form & Paragraph text
  • For Paragraph text set text height and limit of characters. 
Single text form & Paragraph text

File upload form

Use the File upload form if you want your clients to upload files before submitting the form.  

  • Customize field label and button style. 
  • Allow customers to upload several files, decide if a field is required, or make the form half-width.
File upload form

Input hidden

Add input hidden to include data that cannot be seen or modified by users when a form is submitted.

Input hidden

Swatch color

Select swatch color forms if you want to give your customer several color options to choose from.

  • If it is necessary, set a label for each label option, label for the list, and description. 
Swatch color
  • You can choose custom colors, delete, and add options.
You can choose custom colors, delete, and add options.
  • Select the list type and decide if it is possible to choose single or multiple options.
  • Click on the pencil icon to change the swatch style. Edit the gap between options, item width, and item height. Don’t forget to press the Save button when you are done with editing.
  • Besides it is possible to make the field obligatory and half-width.
it is possible to make the field obligatory and half-width.

Image swatch

Choose an image swatch form to give your customer several image options to choose from.

  • If it is necessary, set a label for each label option, a label for the list, and a description.
Image swatch
  • Upload the images using the most convenient way, and delete or add options.
Image swatch
  • Select the list type and decide whether it is possible to choose single or multiple options.
  • Click on the pencil icon to change the swatch style. Edit the gap between options, item width, and item height. Don’t forget to press the Save button when you are done editing.
  • Besides it is possible to make the field obligatory and half-width.
Image swatch

Toggle

Implement a toggle to gather customer information.

  • Remember to include a label and description for this toggle.
  • You also have the flexibility to choose whether to make it mandatory, have it activated by default, or set it to display at half-width.
  • Customize the toggle style if needed.
Toggle

Rating

Include a rating in your form to gather your customers’ feedback. 

  • Make up your label for this element.
  • Choose the type of icons and their number, and set their size. Note: in the “Emoji” type you try out different styles.
Rating
  • Customize the style of the icons by clicking on the pencil icon.
  • Edit the alignment and decide if you want to make this field obligatory or half-width.
Rating

Opinion scale/NPS

Another way to get feedback from your clients is an opinion scale.

  • Make up your label for this element and describe it if needed.
Opinion scaleNPS
  • Add the labels for “bad”, “good”, and “excellent” marks and select the number of scales on the popup.
Opinion scaleNPS
  • Customize the style of the scale by clicking on the pencil icon.
  • Edit the alignment and decide if you want to make this field obligatory or half-width.
Opinion scaleNPS

Form submit button

Decide what will happen after the customer presses on the Submit button.

  • Edit the name of the button
  • Give action to your button, including Submit form, Next step, Send to URL(don’t forget to add URL in the Button URL field), JS function or Spin the Wheel.
Form submit button
  • You can align your button, and customize the submit form button style by clicking on the pencil icon.
Form submit button