如何调整Squarespace站点嵌入FormAssembly表单的边距与对齐问题

问题说明 #

你需要调整嵌入Squarespace站点的FormAssembly iframe表单对齐效果，当前FormAssembly默认样式自带过多顶部、左侧内边距和外边距，导致表单无法和站点原有风格适配。你已经在浏览器端调试出可用的CSS规则，但是在FormAssembly自定义代码编辑器添加后没有生效，希望直接在Squarespace侧实现样式修改。
你已验证生效的CSS规则如下：

.wFormContainer .wForm form {
    padding: 0 !important;
}
.wFormContainer .wForm {
    padding: 0 !important;
    margin-top: 0 !important; 
}
.wFormContainer .wFormHeader {
    height: 0;
    margin: 0;
}

解决方案 #

可以直接在Squarespace侧完成样式调整，根据你的嵌入方式选择对应方案即可：

方案一：改用无iframe嵌入（推荐） #

跨域场景下父页面的CSS无法直接修改iframe内部的DOM样式，改用HTML直接嵌入后即可直接覆盖表单样式：

• 登录FormAssembly后台，进入对应表单的发布页，选择嵌入分类下的无iframe内嵌HTML选项，复制生成的代码
• 进入Squarespace对应页面的编辑界面，删除原有iframe嵌入块，新增代码块粘贴刚才复制的HTML代码
• 打开Squarespace后台「网站设置-自定义CSS」面板，粘贴你已经验证过的CSS代码，保存后即可生效

方案二：保留iframe嵌入，通过外层容器抵消边距 #

如果必须使用iframe嵌入，可以通过调整外层容器的边距抵消表单内部的多余留白：

• 找到你当前嵌入FormAssembly的iframe代码，外层新增一个带自定义类的容器，同时调整iframe的基础属性：

<div class="fa-embed-wrapper">
<iframe src="你的FormAssembly表单地址" width="100%" height="按表单实际高度填写" frameborder="0" scrolling="no"></iframe>
</div>

• 在Squarespace自定义CSS面板添加如下样式，数值可以根据实际多余的边距微调：

.fa-embed-wrapper {
  overflow: hidden;
  margin-top: -45px; /* 抵消表单顶部多余外边距 */
  margin-left: -20px; /* 抵消表单左侧多余内边距 */
}
.fa-embed-wrapper iframe {
  width: calc(100% + 20px); /* 避免左侧负边距导致表单被裁剪 */
}

额外提示 #

你之前在FormAssembly侧添加CSS不生效，大概率是自定义代码优先级低于系统默认样式，可以检查FormAssembly自定义CSS面板的「覆盖默认样式」开关是否开启，或者在所有CSS属性值后加!important提升优先级。

内容的提问来源于stack exchange，提问作者user17020044