1. Home
  2. Docs
  3. Poptics Documentation
  4. Creating From
  5. How to Customize Popup Form in Poptics

How to Customize Popup Form in Poptics

After creating the campaign, you will be redirected to the Form Builder page. Here you can add, edit, and customize different blocks for your campaign form. The screenshot below shows the main customization options:

Add New Block

  1. Click the “+” icon to add a new block.
  2. In the block search bar, type “Poptics” to view all available blocks, such as
    • Poptics Form – Add a form to collect user information such as email, phone number, or feedback.
    • Poptics Countdown – Display a countdown timer to create urgency for offers, events, or sales.
    • Poptics Button – Insert a customizable button that can link to pages, trigger actions, or submit forms.
    • Poptics Image – Add a single image to your campaign for branding, promotion, or visual appeal.
    • Poptics Heading – Insert a heading or title text to grab attention or introduce your campaign.
    • Poptics Image Box – Combine an image with text and optional buttons in one block for a structured layout.
  3. Select the block you want to use in your campaign.

Block Settings Panel

  1. Once you select a block, the Block Settings will appear on the right sidebar.
  2. You will see three main tabs: Content, Style, and Advanced. The available options inside these tabs vary depending on the selected block, and each block will provide different customization settings. Example: Email Field Customization
    • Content Tab Settings: In this tab, you define the basics of the field. You can make it required, set the input type (text, email, etc.), assign a unique name for form data reference, add a label (e.g., “Email”), and set a placeholder (e.g., “Enter your email”). You can also control the field’s layout and alignment.
    • Style Tab Settings: This tab handles the design. You can style the label (color, font, size), adjust the placeholder text appearance, and customize the input box with border, background, padding, and other visual options.
    • Advanced Tab Settings: Here, you control fine details like field height and width, box shadow effects, and extra spacing or positioning. Advanced settings give you more flexibility to make the form look polished and professional.

Layer Panel

  • From the left sidebar, you can manage form layers.
  • Use the Main Layer to add and arrange different blocks of your campaign.

Device Preview (Desktop/Mobile)

  • At the top of the Form Builder, you can switch between desktop and mobile preview modes.
  • This lets you check how the campaign form looks on different devices and ensure responsiveness.
  • You can create a separate mobile layout if you want a design tailored for smaller screens.
  • Or, you can use the same layout for both desktop and mobile devices.

Save and Preview

  • After customization, click Save to keep changes.
  • Use Preview to see how your form will look before publishing.
  • Finally, click Save & Continue to move to the next step.

How can we help?