Creating a contact version

Hello,

I am trying to create a “contact section” like the one in webflow template: http://webflow.com/template/Fly

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 - General - Forum | Webflow

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: http://interactions.webflow.com/click-to-show-content-video

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

Site: Demokit
https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page: Show and Hide on Click

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

Cheers,
Dave

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:
https://preview.webflow.com/preview/enbelcap?preview=0d39a9238980d887cf6bc1179e2bf865

Thanks!

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:
https://preview.webflow.com/preview/enbelcap?preview=0d39a9238980d887cf6bc1179e2bf865

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%

https://www.evernote.com/l/AiRiWi4_isNALqUFAJjzmYLZMEA00FVL8J0

​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.