Smart Code Visual Builder
Advanced visual form editor with drag-and-drop interface, container support, and real-time preview. Create custom HTML layouts without coding.
Overview
The Smart Code Visual Builder is an advanced visual form editor that allows you to create custom HTML layouts using a drag-and-drop interface. Unlike the basic HTML editor mode, Smart Code provides a visual canvas with pre-built elements, container support, and real-time preview capabilities—no coding knowledge required.
Visual Interface
Drag and drop elements without writing any code
Container Support
Nested layouts with rows, columns, and containers
Real-time Preview
See changes instantly as you build
Key Benefits
- • No coding required - Visual interface for everyone
- • Container support - Build complex nested layouts
- • Data persistence - Layouts save and restore perfectly
- • Element library - Pre-built components ready to use
Getting Started
Step 1: Enable Smart Code Mode
When editing a Custom Code field:
- Navigate to your form field settings
- Scroll to the Editor Mode section
- Select "Smart Code" radio button
- The Smart Code canvas will appear automatically
Step 2: Add Your First Element
Use the element toolbar on the right side of the canvas:
- Choose from Content elements (Heading, Text, Image, Link)
- Or select Interactive elements (Button, Input, Link)
- Click any element button to add it to the canvas
- Elements appear instantly with entrance animations
Element Types
📄 Content Elements
📰 Heading
Creates H1-H6 headings with customizable styles and content.
Styles: Font size, color, weight, text transform
📄 Text
Paragraph text blocks with rich text editing capabilities.
Styles: Font family, size, color, line height, spacing
🖼️ Image
Responsive images with alt text, links, and style controls.
Styles: Width, height, border radius, object fit
🔗 Link
Clickable links with target options and custom styling.
Styles: Color, hover color, text decoration, font weight
⚡ Interactive Elements
🔘 Button
Clickable buttons with custom actions and styling.
Styles: Background, color, padding, border radius, hover effects
📝 Input
Form input fields (text, email, number, etc.).
Styles: Width, padding, border, focus effects
📦 Layout Elements
📦 Container
Wrapper div for grouping elements with styling options
➡️ Row
Horizontal flexbox row for side-by-side layouts
⬇️ Column
Vertical flexbox column for stacked content
Container System
The Container System allows you to build complex nested layouts by adding elements inside containers, rows, and columns.
How to Use Containers
- Add a Container, Row, or Column element to the canvas
- Click inside the empty container area
- A popup menu will appear showing available elements
- Select an element type from the menu
- The element will be added inside the container
- Repeat to build complex nested layouts
Example: Two-Column Layout
Left Column
Right Column
Element Controls
Each element on the canvas has hover controls for customization:
Settings
Configure element properties and content
Styles
Customize colors, sizes, spacing, and more
Delete
Remove element from canvas
Tips & Best Practices
✅ Do's
- ✓ Use containers for organized layouts
- ✓ Set proper heading hierarchy (H1, H2, H3)
- ✓ Test your layout on mobile devices
- ✓ Use semantic HTML elements appropriately
- ✓ Add alt text to all images
- ✓ Save your work frequently
❌ Don'ts
- ✗ Don't nest containers too deeply (3-4 max)
- ✗ Don't use inline styles when not necessary
- ✗ Don't forget to test form functionality
- ✗ Don't skip accessibility considerations
- ✗ Don't use too many different font sizes
- ✗ Don't create layouts that break on mobile
Troubleshooting
Elements not appearing?
- Ensure Smart Code mode is selected (not HTML mode)
- Check if JavaScript is enabled in your browser
- Clear browser cache and reload the page
- Check browser console for error messages
Can't add elements to containers?
- Click inside the container area (not on borders)
- Look for the element selection popup menu
- Ensure container has enough space to display
- Try refreshing the page if popup doesn't appear
Changes not saving?
- Click the main form Save or Update button
- Verify you have proper permissions to edit forms
- Check for WordPress admin AJAX errors in console
- Try saving in HTML mode and switching back to Smart Code
Need Advanced Layouts?
Our team can help you design and implement complex Smart Code layouts for your specific use case.Contact support for assistance.
Master Smart Code Builder
Watch our comprehensive video tutorial on creating custom layouts
Watch Video Tutorial