Streaming live at 10am (PST)

Create pop up window and copy HTML code

Hello everyone,

I want to design a pop-up window in Webflow and extract the HTML code. How can I do that in webflow?

The reason why I want to do that is that I use AgileCRM. With this CRM, I can create a pop-up on the website that is directly connected to a campaign.

Thanks very much for your help.
Augustin


Here is my public share link: LINK
(how to access public share link)

Hi @LeftProductions, thanks for the post :slight_smile:

There are a couple of ways this can be done. One way is to create a custom lightbox using interactions: http://help.webflow.com/faq/how-to-make-a-custom-lightbox-with-webflow-interactions.

Another way is to create a custom modal using interaction + jquery, which gives you a little more advanced capabilities: [Tutorial] How to create a modal/pop-up in Webflow

If you have a site you are working on, and would like some help, then post a read-only link to your site: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link and some screenshot of the design you are wanting to edit :smile:

I hope this helps! Thanks in advance!

Thanks very much. I’ve created the popup window. Now I need to extract the HTML code of this window to copy it in AgileCRM. How can I do that?

Here is a read-only link: https://preview.webflow.com/preview/leftproductions?preview=69e6f38d3427d2aa77f0dcfb25d06a6a . Go in the page “Modal Window” and you’ll find the pop-up.

Thanks very much.

Hi @LeftProductions, have you published the modal-window page? I tried to pull that up on

http://leftproductions.webflow.io/modal-window

But the page appears to be unpublished. I would publish this page, then inspect the html on the published site, and copy the html from there. I hope this helps!

Thanks you very much @cyberdave . I published it (sorry about that).

Can you explain how I can find that piece of HTML for future use?

Thanks!

curious.
why does the arrow point right… for left productions.

Hi @LeftProductions, Can you please update your post with some more info? Things like screenshots allow everyone to help you faster.

Hello @thewonglv,

Thanks for your message. Here is the situation. First, you’ll find a read-only link to my website here : https://preview.webflow.com/preview/leftproductions?preview=69e6f38d3427d2aa77f0dcfb25d06a6a

Now, here’s what I want to do : I want to copy the HTML code of this pop-up window ( http://leftproductions.webflow.io/modal-window ) to copy it in AgileCRM so that people that subscribe online will directly go in my CRM.

However, I’m not a developper and I don’t know how to do that. If you could just tell me how to do that, that would be perfect!

Thanks very much,
Augustin

@Revolution. Thanks for your message, here is the reason :

We are Left Productions,
The Right Company :wink:

(And we very much like the opposition between the name and the logo, it makes people react and remember our name)

I see !!! Very nice.

AndI I agree with you.

It made me curious enough to ask :smile:

Hi @LeftProductions, Here below is the form code from the published page http://.webflow.io/modal-window:

<div class="w-form"><form id="email-form" name="email-form" data-name="Email Form"><div class="w-row"><div class="w-col w-col-6 column-popup-left"><input id="name" type="text" placeholder="Your first name" name="name" data-name="Name" class="w-input contact-form-line popup"></div><div class="w-col w-col-6 column-popup-right"><input id="Last-name" type="text" placeholder="Your last name" name="Last-name" data-name="Last name" class="w-input contact-form-line popup"></div></div><input id="Email" type="email" placeholder="Your email" name="Email" data-name="Email" required="required" class="w-input contact-form-line popup"><input type="submit" value="Subscribe" data-wait="2 secondes ..." wait="2 secondes ..." class="w-button button"></form><div class="w-form-done"><p>Thank you! Your submission has-been received!</p></div><div class="w-form-fail"><p>Oops! Something went wrong while Submitting the form</p></div></div>

I hope this helps!

Thanks @cyberdave! I will need to repeat this process. Can you tell me where to find this piece of code? Thanks very much.

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