In my Nuxt site, I have two separate Freshsales forms as components (formA and formB). I've customized the default form styles with scoped styles within those form components. However, when I use these forms on a page, the scoped styles don't get loaded and applied.
If I remove the scoping, the styles get applied but the styles from formA also affect any page using the formB component (which is expected in a Nuxt/Vue app).
Why aren't my scoped styles working?
Below is a sample code:
//contactForm.vue //xxx refers to the unique id
<template>
<div>
<script
src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
crossorigin="anonymous"
id="xxxxx"
></script>
</div>
</template>
<style scoped>
.fserv-form {
border-radius: 10px;
padding: 20px;
position: relative;
font-family: Arial, sans-serif;
}
.fserv-field:nth-child(3){
width: 187px;
padding-right: 5px;
display: inline-block;
}
.fserv-field:nth-child(5){
width: 140px;
padding: 0;
display: inline-block;
}
@media screen and (max-width: 360px) {
.fserv-field:nth-child(3) {
width: 135px;
}
.fserv-field:nth-child(5) {
width: 110px;
}
}
@media screen and (max-width: 986px) and (min-width: 525px){
.fserv-field:nth-child(3),.fserv-field:nth-child(5) {
width: 100%;
padding: 0 30px;
display: block;
}
}
</style>
//register.vue
<template>
<div>
<script
src="https://facilio.freshsales.io/web_forms/xxxxxx/form.js"
crossorigin="anonymous"
id="xxxxx"
></script>
</div>
</template>
<style scoped>
.fserv-form {
border-radius: 10px;
padding: 20px;
position: relative;
font-family: Arial, sans-serif;
}
.fserv-field{
padding: 40px !important;
}
.fserv-field:nth-child(3){
width: 187px;
padding-right: 5px;
display: inline-block !important;
}
.fserv-field:nth-child(4){
width: 140px;
padding: 0;
display: inline-block !important;
}
@media screen and (max-width: 360px) {
.fserv-field:nth-child(3) {
width: 135px;
}
.fserv-field:nth-child(4) {
width: 110px;
}
}
@media screen and (max-width: 986px) and (min-width: 525px){
...
};
</style>
I'm facing an issue where if I scope the styles, they are not applied at all. But if I remove the scoping, the contact form styles apply to both pages. Is there a proper way to handle this so that styles can be separately applied to each form without conflicts? Thank you!