Creating a contact version


I am trying to create a “contact section” like the one in webflow template:

In this template if you click on “contact” in the navigation bar a section (of whatever is called) appears from the bottom of the page with a description of fly and a “contact info” and “write us” columns.

How can I create this? Is there any manual that explains that? Or video? Or forum?

I’ve tried a few things and I just can’t get it…

Many thanks!

Hello @engraf

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

This will help me look at what you have already tried.

Thanks in advance! :slight_smile:

Hi @engraf, that contact section in the Fly template, is a variation of the click to show and hide interaction, with the interaction set on the Contact link to show the content box and the content, and another button to hide that on the contact element.

Take a peek at this tutorial that shows how to create the basic interaction:

Once you have watched that video, you can jump in with a real example:

Site: Demokit
Page: Show and Hide on Click

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:


Thank you both for your answers.
More or less I solve it…
Here you have the read-only link just in case you want to check:


Hello again,

I am sorry to go back to you with this issue but it is working partially…

Here you have the read-only link:

When the “contact” navbar is pressed, then the contact section appears nicely. But when the “x” is pressed to close the contact form it does not work. It’s funny beacuse the interaction works well in the preview option of the interactions menu…

Any help please? I am blocked with this issue…

Many thanks in advance!!

Finally, I have created a new contact section and now it works perfectly!!!

Thanks in any case!

Looks beautiful! Great job! :smiley:

one thing I would suggest, is to remove the display:none from your ContactSection. Then add a transform/translate of 100%

​Try these steps and let me know if you’re successful.

Good luck and have fun! :smile:

1 Like

Done, it works perfect now!! Yuhuuu!!
Many thanks!!!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.