🛠️ Fix Form Embedding Style Conflicts in Website Studio

Camilo Aponte

Camilo Aponte

Last updated on Sep 30, 2026

🔍 Overview

When you add or update a form in Website Studio, the AI agent may apply style changes that affect elements beyond the form itself — such as card colors, button styles, or overall page layout. This article explains why this happens, how to prevent it, and what to do if it has already occurred.

⚙️ Why This Happens

Website Studio uses an AI agent to generate and embed forms. In some cases, the agent applies CSS or style rules too broadly, causing unintended changes to global styles. This is most common when:

  • You are editing an existing form rather than inserting a new one
  • Your project was originally imported via ZIP or HTML upload
  • The form prompt does not include enough scope-limiting instructions

A known issue where imported projects experienced broken layouts after form changes has been resolved. However, broad style conflicts can still occur if prompts are not specific.

✅ How to Update a Form Without Affecting Global Styles

  1. Open Website Studio. Go to the left sidebar and select Website Studio, or navigate directly to /website-studio.
  2. Open your project and locate the page containing the form you want to update.
  3. Write a scoped prompt. When instructing the agent, explicitly tell it to limit changes to the form only. For example: "Update the contact form fields only. Do not change any colors, fonts, buttons, or styles outside the form element."
  4. Review the preview before confirming. After the agent generates a response, inspect the right preview panel carefully. Check cards, buttons, and other elements to confirm they are unchanged.
  5. Accept or regenerate. If you notice unintended style changes in the preview, reject the change and refine your prompt before trying again. Avoid accepting changes that look incorrect, as reversing them may consume additional credits.

💡 Best Practices to Avoid Style Conflicts

  • Be specific in every prompt. Always tell the agent exactly what to change and, equally important, what not to change.
  • Make one change at a time. Avoid combining form updates with other design requests in a single prompt.
  • Use the preview panel. Always review the full page in the right preview panel before accepting any agent-generated change.
  • Save a working version first. Before editing a form, use the HTML download option to save a backup of your current project state.

🔄 What to Do If Styles Are Already Broken

If a form update has already changed colors, buttons, or cards unintentionally, try the following steps:

  1. Use the undo option if it is still available in your current session.
  2. Send a corrective prompt to the agent describing exactly what was changed and asking it to restore only those elements. For example: "Restore the original button color and card background color. Do not change the form."
  3. Re-upload a saved backup using the HTML upload feature if you saved a copy before the issue occurred.

💳 Credits Used During Troubleshooting

Credits are consumed each time the AI agent processes a prompt, including attempts that produce unexpected results. Search Atlas does not automatically reimburse credits used during troubleshooting. However, if you believe credits were lost due to a platform bug, our team can review your case. If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.

🆘 Still Need Help?

If you have followed the steps above and are still experiencing style conflicts after embedding or updating a form, our support team is ready to assist. If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.