▼
Streaming live at 10am (PST)

How to create contact form that slides from right

#1

Hi all,

Apologies if this topic has been covered before, but I’m trying to set up a contact form which slides out from the right side of the page. Is this considered an interaction? Any guidance on where to begin would be greatly appreciated.

I’ve shared the link to my basic site below.

Thanks,

Natalie

Here is my public share link: https://preview.webflow.com/preview/natalie-jade-studio?utm_medium=preview_link&utm_source=designer&utm_content=natalie-jade-studio&preview=bc023742d8ee8b19dce689decf471b88&mode=preview
(how to access public share link)

#2

Hello @nataliejadestudio,

Welcome to the community. So instead of writing all the steps I’ve created a short video https://www.loom.com/share/b3bc78ee1eac43d299c3dbd5176c6842
I started with section on your page and I just added a simple form. I hope you can follow all the steps with the video, let me know if you have any questions. I hope this helps.

#3

Thank you so much for your quick response, Pablo!

I’m so sorry, I wasn’t totally clear - I would like the contact form to slide out from the right side of the page when the user clicked ‘Get in touch’ in the header, so it would slide in and out on the side of the page just like it does in the Mill template (http://mill-template.webflow.io/). Apologies for not being more specific the first time. Any further assistance you can provide would be great thank you.

Natalie

#4

Hello @nataliejadestudio,

I got it now. So it would be very similar to what I show in the video link I posted. What you have to do is to set your form inside a container that has overflow:hidden, then you move the form 100% in the direction that you want with an interaction, and with another interaction you put it back to the original position. In your case you will need two element interactions on first click/tap, one for the get in touch button and another one on the closing X of your form. I hope this helps.

1 Like
#5

Thanks so much Pablo. I haven’t had a chance to try this yet, but appreciate your quick response.

Natalie

#6

Hi Pablo,

I’m still struggling with this one. I created a side contact form symbol inside a container that has overflow hidden. When I try to set up a new timed interaction with the ‘Get in touch’ link as the trigger, it won’t let me select the form as the ‘element’ to animate. Any guidance would be much appreciated.

Thanks,

Natalie

#7

Hello @nataliejadestudio,

So once you select your ‘get in touch’ link as the trigger right click on it on the animations panel and you will have something like this
05%20PM
Select the change target option and from your navigator select the side contact box. Let me know if you have more questions.

#8

Thanks Pablo - that’s worked!

Hopefully my final question - I’ve managed to get the form to slide out on desktop view, but it’s not working for tablet/mobile views. I think it has something to do with it’s relative positioning in it’s initial state. Any suggestions?

Thanks,

Natalie

#9

Hello @nataliejadestudio,

I’m glad it is working for your desktop view, could you share your updated read only link so I can take a look at why it is not working on tablet and mobile views?

#10

Thanks Pablo. Here is the link…

https://preview.webflow.com/preview/natalie-jade-studio?utm_medium=preview_link&utm_source=designer&utm_content=natalie-jade-studio&preview=0ee1293ffb7935896e69ecac97e7d484&mode=preview

#11

Also, for some reason the brand/image scrolls down with the page as well…it’s probably a simple fix, but I’m a Webflow newbie and still trying to figure it all out!

#12

Hello @nataliejadestudio,

So I took a look at your site and there were a lot of elements that had the wrong positions that made the interaction really difficult to fix. I didn’t have much time to go over a fix for all your containers, but I did a quick video to show how you can solve your current problem. https://www.loom.com/share/4ef2587b664e4a508391e10a476cc9fd and so you understand better I deleted the section that had the form, and placed the form on a fixed div, full screen, inside your section 2. As for your band/image scrolling down, I didn’t experience that effect, it is probably because of a position fixed. Let me know if you can follow the video. Also, you need to fix your side scrolling on your mobile landscape view, let me know if you need help with that.