• Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Тема: Кастомізація стилю JS форми в HTML

Привіт.

Є наступний js код форми який я встравляю в HTML код. Мені потрібно змінити його стиль і вигляд


Код:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153"
});
</script>

Так виглядає страндартно: https://replace.org.ua/uploads/images/9358/8458f79d7026e2036d116f83858a1609.png



Таким потрібно зробити: https://replace.org.ua/uploads/images/9358/4b8b4eec8639b15b6052a30f8ef3e42d.png



Хардкодити пробувала, знаходила потрібні класси, проставляла !important - всеодно не працює :(


Допоможіть будь ласка! Буду дуже вдячна

2 Відповідь від koala Востаннє редагувалося koala (20.09.2019 11:33:40)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 602
    • Репутація: 13310

Re: Кастомізація стилю JS форми в HTML

hbspt - це ніби HubSpot? Будь ласка, якщо використовуєте якісь технології, вказуйте їх, бажано навіть якщо вони стандартні. Ви назвали лише js, про HubSpot (чи щось інше) ви не написали жодного слова. І свої спроби не описуйте словами, а викладайте сюди, щоб ми розуміли, як вам краще це виправити.
https://developers.hubspot.com/docs/met … rm_options підказує, що треба додати до форми клас css:

hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});

а тоді можна вже в css задавати

.my-custom-form input[type=text] {
  border: 1px solid black;
}

Але це якщо у вас дійсно HubSpot і якщо я все правильно зрозумів (я про нього щойно вперше дізнався).

Подякували: tak,ya-divchuna, leofun012

koala вебсайт

3 Відповідь від tak,ya-divchuna

  • Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Re: Кастомізація стилю JS форми в HTML

koala написав:

hbspt - це ніби HubSpot? Будь ласка, якщо використовуєте якісь технології, вказуйте їх, бажано навіть якщо вони стандартні. Ви назвали лише js, про HubSpot (чи щось інше) ви не написали жодного слова. І свої спроби не описуйте словами, а викладайте сюди, щоб ми розуміли, як вам краще це виправити.
https://developers.hubspot.com/docs/met … rm_options підказує, що треба додати до форми клас css:

hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});

а тоді можна вже в css задавати

.my-custom-form input[type=text] {
  border: 1px solid black;
}

Але це якщо у вас дійсно HubSpot і якщо я все правильно зрозумів (я про нього щойно вперше дізнався).

Так, це Хабспот
Вибачте, що не сказал :-X

4 Відповідь від tak,ya-divchuna

  • Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Re: Кастомізація стилю JS форми в HTML

koala написав:

hbspt - це ніби HubSpot? Будь ласка, якщо використовуєте якісь технології, вказуйте їх, бажано навіть якщо вони стандартні. Ви назвали лише js, про HubSpot (чи щось інше) ви не написали жодного слова. І свої спроби не описуйте словами, а викладайте сюди, щоб ми розуміли, як вам краще це виправити.
https://developers.hubspot.com/docs/met … rm_options підказує, що треба додати до форми клас css:

hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});

а тоді можна вже в css задавати

.my-custom-form input[type=text] {
  border: 1px solid black;
}

Але це якщо у вас дійсно HubSpot і якщо я все правильно зрозумів (я про нього щойно вперше дізнався).

Чомусь не працює :(

<style>
    
.my-custom-form input[type=text] {
  border: 1px solid black;
}

</style>



<div>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});
</script>
    
</div>

5 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 602
    • Репутація: 13310

Re: Кастомізація стилю JS форми в HTML

tak,ya-divchuna написав:

Вибачте, що не сказал :-X

А у вас цицьки відклеїлися :)

koala вебсайт

6 Відповідь від tak,ya-divchuna

  • Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Re: Кастомізація стилю JS форми в HTML

koala написав:
tak,ya-divchuna написав:

Вибачте, що не сказал :-X

А у вас цицьки відклеїлися :)

без коментарів

7 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 602
    • Репутація: 13310

Re: Кастомізація стилю JS форми в HTML

І замість "не працює" - якось конкретніше. Як саме виглядає згенерована форма (ПКМ-інспектувати)? Там є цей клас?

koala вебсайт

8 Відповідь від tak,ya-divchuna

  • Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Re: Кастомізація стилю JS форми в HTML

koala написав:

І замість "не працює" - якось конкретніше. Як саме виглядає згенерована форма (ПКМ-інспектувати)? Там є цей клас?

Я б могла зараз наробити скрінів і показати що воно не створює цей клас і далі б ви ще запитали б щось напевно)

тому мені здається простіше буде, якщо ви просто вставите: 

<style>
    
.my-custom-form input[type=text] {
  border: 1px solid black;
}

</style>



<div>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
    portalId: "6402240",
    formId: "c39e10cd-caf3-4853-b412-fef2e723c153",
    cssClass: "my-custom-form"
});
</script>
    
</div>


у свій редактор коду і відкриєте

9 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 602
    • Репутація: 13310

Re: Кастомізація стилю JS форми в HTML

Якщо я вставлю це у свій редактор коду і відкрию, то побачу лише

VM154:1 Uncaught ReferenceError: hbspt is not defined

Мені доведеться ще встановлювати HubSpot і розбиратися, як його підключати.
Але оскільки ви, замість показати мені те, що вже маєте, відправляєте мене розбиратися самому - я, мабуть, зроблю те саме із вами. Мені воно не дуже потрібно, взагалі-то.

koala вебсайт

10 Відповідь від tak,ya-divchuna

  • Дата реєстрації: 02.08.2019
  • Повідомлень: 15
    • Репутація: 1

Re: Кастомізація стилю JS форми в HTML

koala написав:

Якщо я вставлю це у свій редактор коду і відкрию, то побачу лише

VM154:1 Uncaught ReferenceError: hbspt is not defined

Мені доведеться ще встановлювати HubSpot і розбиратися, як його підключати.
Але оскільки ви, замість показати мені те, що вже маєте, відправляєте мене розбиратися самому - я, мабуть, зроблю те саме із вами. Мені воно не дуже потрібно, взагалі-то.


Не створює
Тільки те що я прописала:
https://replace.org.ua/uploads/images/9358/6710c251db3c62bf288aaa6717000630.png
https://replace.org.ua/uploads/images/9358/ee16f94e2c03403e8ade5274e1f988a9.png