How do I Customize Web builder Quick Add (Detailed) - Form

How do I Customize Web builder Quick Add (Detailed) - Form

By following this guide, you can easily customize forms in the PodUp Web Builder and optimize your website’s design and functionality.


1. Navigate to https://app.podup.com/home

2. Click "Page Builder"

3. Click the "Build" button on the page where you want to add a form

4. The PodUp Page Builder will load

5. Click "Add Block" icon

6. Drag & Drop "Form" block on your page.

7. The Form will be added to your site

8. To further customize it, click on the form to select it

9. Click on the "Settings" icon

10. Refer to "How to Format a Design Element" for the Design section, as it applies similarly to all elements

11. Click "Settings" to access the configuration options for this element

12. State: The different ways an element looks or acts depending on how someone interacts with it

  • Hover: This allows you to define a special set of styles that apply only when a user's mouse cursor is hovering over an element that has this class. It adds interactivity and visual feedback
  • Click: This allows you to define a special set of styles that apply when an element is being actively clicked or pressed down by the user. It provides immediate visual feedback that the user's action is being registered
  • Even/Odd: This allows you to apply different styles to elements based on their position in a sequence (even or odd number) within a common parent. This is incredibly useful for creating visual patterns, like "zebra striping" in lists or tables

13. Classes: A reusable set of styles that you can apply to multiple elements across your website. You can add specific elements that you have already programmed or they will be automatically added when you edit the menu

  • Tip: If this is your first website, leave this blank and let the software fill this in unless you have experience website building

14. Click "Text color"

  • Text Color: This property directly changes the color of the text characters within an element

15. Click "Background color"

  • Background Color: Sets a solid color that fills the background area of an element. This color sits behind the element's content and its padding, but inside its border

16. Click "Border Width"

  • Border Width: Controls the thickness of the line that forms the border around an element

17. Click " Border Color"

  • Border Color: Defines the color of the border line

18. Click "Border Radius"

  • Border Radius: This property rounds the corners of an element's border (and its background and content area). Instead of sharp 90-degree corners, you get smooth, curved ones

19. Click "ID" to assign a unique identifier to the element, allowing it to be styled, linked, or controlled independently from other elements on the page

20. Click "Title" to add a brief, optional description that provides additional context about the element.

21. Clicking the arrow icon moves the element to the next larger container, shifting it from a smaller block (such as a text block or section) into the broader layout to help position it more accurately on the page.

22. Move: Reposition the section to where you want. Click and hold this icon while you drag it to the desired location. A green line will indicate where it is being placed

23. Copy: Create a duplicate of the section

24. Delete: Remove the section entirely.
Note: If a duplicate exists, only one instance will be deleted

25. Click "Save" in the top-right corner once all edits are complete