# Responsive form in Gated video

**URL:** <https://forum.mautic.org/t/responsive-form-in-gated-video/14401>\
**Category:** Product Support\
**Created:** [May 19, 2020, 1:11pm UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401 "2020-05-19T13:11:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![romancretnik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/romancretnik/32/12427_2.png) [@romancretnik](https://forum.mautic.org/u/romancretnik)\
**Post date:** [May 19, 2020, 1:11pm UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/1 "2020-05-19T13:11:47Z")

</div>

**Your software**  
My Mautic version is: 2.15.3  
My PHP version is: 7.1

**Your problem**  
My problem is: I use gated video on my WordPress website. I managed to make the video responsive but the form on the video isn’t.  
Please see the video: [https://nimb.ws/oT4jVe](https://nimb.ws/oT4jVe)

Does anyone have a hint what to change in the css to make it happen?

---

<div class="post-metadata">

**Author:** ![tomr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/tomr/32/2184_2.png) [@tomr](https://forum.mautic.org/u/tomr)\
**Post date:** [May 20, 2020, 3:58am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/2 "2020-05-20T03:58:25Z")

</div>

hi @romancretnik, I’ dont have a answer to your question but I was wondering if you could share how you embedded your Youtube video in gated form feature as I was unable to do so. Thank you in advance.

---

<div class="post-metadata">

**Author:** ![romancretnik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/romancretnik/32/12427_2.png) [@romancretnik](https://forum.mautic.org/u/romancretnik)\
**Post date:** [May 20, 2020, 9:24am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/3 "2020-05-20T09:24:11Z")

</div>

@tomr, I have a WordPress site where I installed the WP Mautic plugin - [https://wordpress.org/plugins/wp-mautic/](https://wordpress.org/plugins/wp-mautic/).  
Then I used the shortcode  
`[mautic type="video" gate-time="#" form-id="#" src="URL"]`  
Replace the # signs with the appropriate number, where

- gate-time is in seconds (how many seconds after the video started should the form come to action),
- form-id is self explanatory (go to Mautic Components \> Forms and see the ID of the form in the right column)  
and URL is the URL of the Youtube video.

That’s pretty much all. Hope it helps.

---

<div class="post-metadata">

**Author:** ![tomr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/tomr/32/2184_2.png) [@tomr](https://forum.mautic.org/u/tomr)\
**Post date:** [May 23, 2020, 4:31am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/4 "2020-05-23T04:31:02Z")

</div>

Thanks @romancretnik, thanks for that. Got it show the video but when the gate time triggers it comes up with ‘undefined’. Not sure what I am doing wrong.

---

<div class="post-metadata">

**Author:** ![romancretnik](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/romancretnik/32/12427_2.png) [@romancretnik](https://forum.mautic.org/u/romancretnik)\
**Post date:** [May 23, 2020, 4:49am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/5 "2020-05-23T04:49:46Z")

</div>

@tomr maybe check this: [Cannot connect - form give connection error](https://forum.mautic.org/t/cannot-connect-form-give-connection-error/14400/2)

---

<div class="post-metadata">

**Author:** ![tomr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/tomr/32/2184_2.png) [@tomr](https://forum.mautic.org/u/tomr)\
**Post date:** [May 23, 2020, 6:46am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/6 "2020-05-23T06:46:09Z")

</div>

@romancretnik OMG. Sometimes you do need to think twice before applying a setting. So, I couldn’t make the form work by adding the site (maybe I need to do further check) but disabling it got it to work. Thank you very much for getting this working for me 🙂.

---

<div class="post-metadata">

**Author:** ![tomr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/tomr/32/2184_2.png) [@tomr](https://forum.mautic.org/u/tomr)\
**Post date:** [May 23, 2020, 7:44am UTC](https://forum.mautic.org/t/responsive-form-in-gated-video/14401/7 "2020-05-23T07:44:40Z")

</div>

@romancretnik, I was able to use this [https://www.w3schools.com/howto/tryit.asp?filename=tryhow\_css\_inline\_form](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_inline_form) by applying to blank template “themes/blank/html/base.html.twig” and making sure the form was using the blank template and the button style was class=“form-inline” (input attributes). It work on a normal page but it does not work on gated video screen. It seems gated video has a separate style that is applied on top of anything.
