Streaming live at 10am (PST)

Create pop up window and copy HTML code


#1

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)


#2

Hi @LeftProductions, thanks for the post :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: http://forum.webflow.com/t/tutorial-how-to-create-a-modal-pop-up-in-webflow/1229

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!


#3

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.


#4

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!


#5

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!


#6

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


#7

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


#8

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


#9

@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)


#10

I see !!!! Very nice.

AndI I agree with you.

It made me curious enough to ask :smile:


#11

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!


#12

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


#13

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