View Categories

Content & Form Management

Table of Contents

The LeadSpheres Sites Module gives you complete control over your website’s content and forms. You can easily add, edit, and style elements in real-time, manage lead capture forms, and even customize the site’s code using the integrated editor.

This guide covers:

  • Adding Contact Forms
  • Embedding CRM Forms
  • Live Editing & Styling
  • Advanced Code Editing

1. Adding Contact Forms #

Contact forms help visitors connect with you directly from your website.
With LeadSpheres, you can add built-in forms or embed CRM-native forms for advanced lead management.

Using Built-in Forms #

  1. Open the Sites Module and go to your page in the drag-and-drop builder.
  2. Click Add Element → Form.
  3. Choose from pre-designed form layouts (simple, multi-step, newsletter, etc.).
  4. Customize form fields:
    • Name, Email, Phone, and Message
    • Dropdowns, Checkboxes, or Radio Buttons
    • Captcha for spam protection
  5. Set up form submission actions:
    • Send an email notification to your team
    • Show a success message or redirect to a thank-you page

Tip: Use short forms to increase conversion rates. Ask only for essential information.

2. Embedding CRM Forms #

If you want leads to directly enter your CRM pipelines, you can embed CRM-native forms inside your website.

How to Embed a CRM Form #

  1. Go to the CRM Module inside LeadSpheres.
  2. Create a lead capture form and copy its embed code.
  3. In the Sites Module, open the page where you want to add the form.
  4. Click Add Element → HTML Embed.
  5. Paste the CRM form’s embed code.
  6. Save and publish your changes.

Once added, all submissions will automatically sync into your CRM pipelines for instant lead management.

3. Live Editing & Styling #

The drag-and-drop builder lets you customize any element visually and see updates in real-time — no need to write a single line of code.

What You Can Edit #

  • Spacing Controls: Adjust padding and margins easily.
  • Borders & Shadows: Add subtle shadows or rounded corners.
  • Backgrounds: Apply colors, gradients, or images.
  • Typography: Change fonts, sizes, weights, and text styles instantly.

How to Edit Elements Live #

  1. Select any element on the canvas.
  2. Use the style panel to tweak its design.
  3. See changes instantly in the preview.
  4. Toggle between desktop, tablet, and mobile views to ensure responsive design.

4. Advanced Code Editing #

For developers or power users, LeadSpheres provides a built-in code editor that gives you full control over your website.

Features of the Integrated Code Editor #

  • Custom CSS → Override global styles or create new ones.
  • Custom JavaScript → Add interactivity, animations, or tracking scripts.
  • HTML Editing → Modify page structure or embed third-party widgets.

How to Access the Code Editor #

  1. Open the drag-and-drop builder.
  2. Click on the Code Editor option.
  3. Choose the tab you want to edit:
    • CSS → For styling customizations
    • JS → For adding scripts
    • HTML → For structural edits
  4. Save your changes and preview instantly.

Pro Tip: Use custom CSS variables to maintain consistency across your entire site.

5. Best Practices #

  • Use built-in forms for simplicity; CRM-embedded forms for automation.
  • Keep forms short and relevant — fewer fields = higher conversions.
  • Test your site on desktop, tablet, and mobile after every styling change.
  • If editing CSS or JS manually, back up your code to avoid accidental issues.
  • Use the drag-and-drop editor first; only switch to code editing when necessary.

Next Steps #

Once you’ve set up your content and forms, you may want to explore:

What are your Feelings