1. Section Headings<\/h3>\n<h3>Personal Information<\/h3>\r\n<p>Please provide your contact details below.<\/p>\r\n<\/pre>\nResult:<\/strong><\/p>\nPersonal Information<\/strong>
\nPlease provide your contact details below.<\/p>\n2. Horizontal Divider<\/h3>\n<hr style=\"margin: 20px 0; border-top: 1px solid #ddd;\">\r\n<\/pre>\nResult:<\/strong> A clean line separating sections.<\/p>\n3. Instruction Box<\/h3>\n<div style=\"background: #f0f7ff; padding: 15px; border-radius: 5px; border-left: 4px solid #0073aa;\">\r\n <strong>Important:<\/strong> Please have your order number ready before proceeding.\r\n<\/div>\r\n<\/pre>\n4. Bulleted Instructions<\/h3>\n<p><strong>Before submitting, please ensure:<\/strong><\/p>\r\n<ul>\r\n <li>All required fields are completed<\/li>\r\n <li>Your email address is correct<\/li>\r\n <li>You've reviewed the terms below<\/li>\r\n<\/ul>\r\n<\/pre>\n5. Image<\/h3>\n<img src=\"https:\/\/yoursite.com\/wp-content\/uploads\/diagram.png\" \r\n alt=\"Process diagram\" \r\n style=\"max-width: 100%; height: auto;\">\r\n<\/pre>\n6. Embedded Video<\/h3>\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\">\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/VIDEO_ID\" \r\n style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" \r\n frameborder=\"0\" \r\n allowfullscreen><\/iframe>\r\n<\/div>\r\n<\/pre>\n7. Warning\/Alert Box<\/h3>\n<div style=\"background: #fff3cd; padding: 15px; border-radius: 5px; border: 1px solid #ffc107;\">\r\n \u26a0\ufe0f <strong>Warning:<\/strong> Submissions cannot be edited after sending.\r\n<\/div>\r\n<\/pre>\n8. Success\/Info Box<\/h3>\n<div style=\"background: #d4edda; padding: 15px; border-radius: 5px; border: 1px solid #28a745;\">\r\n \u2713 Your progress is automatically saved.\r\n<\/div>\r\n<\/pre>\n9. Privacy Notice<\/h3>\n<p style=\"font-size: 12px; color: #666;\">\r\n Your information is protected under our \r\n <a href=\"\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>. \r\n We will never share your data with third parties.\r\n<\/p>\r\n<\/pre>\n10. Terms and Conditions Summary<\/h3>\n<div style=\"max-height: 150px; overflow-y: auto; padding: 10px; border: 1px solid #ddd; font-size: 12px;\">\r\n <h4>Terms of Service<\/h4>\r\n <p>By submitting this form, you agree to...<\/p>\r\n <!-- More terms content -->\r\n<\/div>\r\n<\/pre>\n<\/span>Form Layout Examples<\/span><\/h2>\nMulti-Section Form<\/h3>\n[HTML Block: Section 1 - Personal Info heading]\r\nName field\r\nEmail field\r\nPhone field\r\n\r\n[HTML Block: Divider]\r\n\r\n[HTML Block: Section 2 - Project Details heading]\r\nProject type dropdown\r\nDescription textarea\r\nBudget field\r\n\r\n[HTML Block: Divider]\r\n\r\n[HTML Block: Section 3 - Final Steps heading]\r\nFile upload\r\nTerms checkbox\r\nSubmit button\r\n<\/pre>\nInstructional Form<\/h3>\n[HTML Block: Welcome message and instructions]\r\n\r\n[HTML Block: Step 1 indicator]\r\nQuestion 1\r\nQuestion 2\r\n\r\n[HTML Block: Step 2 indicator]\r\nQuestion 3\r\nQuestion 4\r\n\r\n[HTML Block: Review reminder]\r\nSubmit button\r\n<\/pre>\nApplication Form<\/h3>\n[HTML Block: Company logo]\r\n[HTML Block: Position title and description]\r\n\r\nName field\r\nEmail field\r\n\r\n[HTML Block: \"Upload your resume\" instruction with format requirements]\r\nFile upload field\r\n\r\n[HTML Block: Equal opportunity statement]\r\nSubmit button\r\n<\/pre>\n<\/span>Styling HTML Blocks<\/span><\/h2>\nInline Styles<\/h3>\n
Add styles directly to elements:<\/p>\n
<p style=\"color: #333; font-size: 16px; line-height: 1.6;\">\r\n Your styled content here.\r\n<\/p>\r\n<\/pre>\nCommon Style Properties<\/h3>\nBackground: background: #f5f5f5;\r\nPadding: padding: 15px;\r\nMargin: margin: 20px 0;\r\nBorder: border: 1px solid #ddd;\r\nBorder radius: border-radius: 5px;\r\nFont size: font-size: 14px;\r\nColor: color: #333;\r\nText align: text-align: center;\r\n<\/pre>\nCreating Styled Boxes<\/h3>\n
Info Box (Blue):<\/strong><\/p>\n<div style=\"background: #e7f3ff; padding: 15px; border-left: 4px solid #2196F3; margin: 15px 0;\">\r\n \u2139\ufe0f Information message here\r\n<\/div>\r\n<\/pre>\nSuccess Box (Green):<\/strong><\/p>\n<div style=\"background: #e8f5e9; padding: 15px; border-left: 4px solid #4CAF50; margin: 15px 0;\">\r\n \u2713 Success message here\r\n<\/div>\r\n<\/pre>\nWarning Box (Yellow):<\/strong><\/p>\n<div style=\"background: #fff8e1; padding: 15px; border-left: 4px solid #FFC107; margin: 15px 0;\">\r\n \u26a0\ufe0f Warning message here\r\n<\/div>\r\n<\/pre>\nError Box (Red):<\/strong><\/p>\n<div style=\"background: #ffebee; padding: 15px; border-left: 4px solid #f44336; margin: 15px 0;\">\r\n \u2715 Error or important alert here\r\n<\/div>\r\n<\/pre>\n<\/span>Responsive Design Tips<\/span><\/h2>\nImages<\/h3>\n
Always use max-width for responsive images:<\/p>\n
<img src=\"image.jpg\" style=\"max-width: 100%; height: auto;\">\r\n<\/pre>\nVideos<\/h3>\n
Use responsive wrapper for embedded videos:<\/p>\n
<div style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;\">\r\n <iframe ... style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe>\r\n<\/div>\r\n<\/pre>\nText Readability<\/h3>\n\n- Use relative font sizes (em, rem)<\/li>\n
- Keep line lengths readable<\/li>\n
- Adequate padding on mobile<\/li>\n<\/ul>\n
<\/span>Best Practices<\/span><\/h2>\n1. Keep It Concise<\/h3>\n\n- Short, scannable text<\/li>\n
- Bullet points over paragraphs<\/li>\n
- Only essential information<\/li>\n<\/ul>\n
2. Visual Hierarchy<\/h3>\n\n- Clear headings<\/li>\n
- Consistent styling<\/li>\n
- Logical flow<\/li>\n<\/ul>\n
3. Accessibility<\/h3>\n\n- Alt text for images<\/li>\n
- Sufficient color contrast<\/li>\n
- Semantic HTML (h2, h3, p, ul)<\/li>\n
- Don’t rely only on color for meaning<\/li>\n<\/ul>\n
4. Don’t Overdo It<\/h3>\n\n- Too much content overwhelms<\/li>\n
- Balance content with input fields<\/li>\n
- Purpose for every HTML block<\/li>\n<\/ul>\n
5. Test Thoroughly<\/h3>\n\n- Preview on desktop and mobile<\/li>\n
- Check all links work<\/li>\n
- Verify images load<\/li>\n
- Test in different browsers<\/li>\n<\/ul>\n
<\/span>Advanced HTML Block Ideas<\/span><\/h2>\n