Integrating TypeForm custom code; create custom modal on click

Hey everyone, I’m fairly new to webflow and am not really a designer but I have created a website for my HVAC company.

A big part of this website will be getting people to schedule their appointments online. I have chosen TypeForm as my go to form builder for this but need help implementing a full screen popup on a button press.

TypeForm gives you a code that will put a link on the site which initiates the full screen popup. Is there a way to hide the link inside of a link block?

Thanks a lot in advance!


Here is my public share link: https://preview.webflow.com/preview/dougs-fabulous-site?preview=d2c003065c05869c22fdabb52945f9af
(how to access public share link)

Hi Doug!

I’m a little confused by your question… when I look at your site, you already have the link included as Hero Schedule, and you’ve included what looks like the proper URL in the Link Settings, which opens the scheduler in a new tab.

Is there something about it that’s not working correctly? Do you want it to open in a popup, rather than a new tab? Can you explain what you mean by “hide the link inside of a link block?”

Just in case, here is a tutorial (which I have not tried to use, so I can’t vouch for how helpful it is): How to create a pop-up modal in Webflow

:grinning:

Sorry about my wording. I would like it to open up in a popup rather than a whole new tab. TypeForm gives you code to do this but it just puts a link on the published site with no styling. I’d like to use the button I’ve created instead of the one given to me in the code.

Is there a way to do this?

On my site, I’ve put the popup link just below the large yellow schedule button. I want to combine these two buttons.

Thanks so much!

It sounds like it’s simply a matter of adding the URL to the button you’ve created, but I suspect I’m still missing what it is you’d like to do…

I don’t see the button you’ve created or the “popup link just below the large yellow schedule button.” Can you share a screenshot?

The “Launch Me” text below the button opens a TypeForm popup. I’d like to make my yellow button do the same thing but am not really sure how to do that.

Does that help at all?

OK. I get it now. You’ve inserted custom JavaScript.

What you want to do is fairly advanced (for me, anyway), and requires modifying the JS to use the CSS classes you have configured for the yellow area, or adding styles directly in the JS script. I could figure it out if I had the ability to experiment by publishing the site and trying a few different things, but public share links don’t allow for publishing.

I’m sorry I can’t be more helpful! Maybe some JS expert will chime in and give you a hand…

Good luck!

:grinning:

Paste this in:

Page Settings > Custom Code > Footer Code

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.typeform-share').hide();
  $('.hero-schedule').click(function() {
    $('.typeform-share').trigger('click');
    return false;
  });
});
</script>

Also, feel free to contact me for further code help and/or customization of third-party plugins

2 Likes

Thanks a lot! It works great!

Hi @samliew

I’d like to do the exact same thing on my site, but i’m not sure what the references are in this custom code because the public share link is not active anymore.

Could i replace ‘.hero-schedule’ with the class from my button? Or is there more to it?

Thanks

typeform-share is the link, hero-schedule is the yellow button.

2 Likes

Hi @samliew

I don’t suppose you have a solution for this problem.

I’ve got 3 buttons on one page…all link to different typeform pop-ups.

So because typeform class ID’s are all ‘typeform-share’ your code doesn’t work… well it does, but i assume it doesn’t know which one to load because it doesn’t load the correct one.

If i use the button option instead of a link…where do you put in custom css styling to override the Typeform defaults? Is that even possible with Webflow?

You can simply add different numbers to the end of the IDs to make them unique.


Also, feel free to contact me for further code help and/or customization of third-party plugins

Do you mean like ‘typeform-share1’ or ‘typeform-share’ 1

because if you edit ‘typeform-share’ then the form doesn’t work.

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

Been stuck on this and need some help starting out with webflow. I have a code from typeform and want to embed it as popup using custom button. Where do I put the code from typeform? Also in footer custom code? Where do I create ids for buttons? I would really appreciate help.

If you need help, please read this first: Posting Guidelines for the Code Help Category