Add code so form will pop up when clicked

Hi. I have this code from TypeForm that I want to paste so that when a user clicks the main button on my homepage the signup form will appear. Can you tell me where to place this code?

<a class="typeform-share button" href="https://form.typeform.com/to/dcESQfUm?typeform-medium=embed-snippet" data-mode="drawer_right" style="display:inline-block;text-decoration:none;background-color:#3A7685;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" target="_blank">Launch me </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

Hi @jhayles,

Thanks for reaching out.

I suggest that you will use the Content Area Modal Element, just style it like a button in your homepage and add your TypeForm Code there. Here’s how you can customize it like a button.

Hope that helps.

Thank you.

I like the way my button is now. I don’t want to restyle it manually with a lot of code. I don’t know code and it will take a while for me to learn how to style it the way I want. Isn’t there another way to have this code “activate” once someone clicks my button on the home screen? Here’s the code I’m using:
<a class="typeform-share button" href="https://form.typeform.com/to/dcESQfUm?typeform-medium=embed-snippet" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#3A7685;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:23px;line-height:57.5px;text-align:center;margin:0;height:57.5px;padding:0px 38px;border-radius:28px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" data-size="100" target="_blank">Launch me </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

Hey @jhayles,

That code is composed of the Typeform button and Javascript Popup so it’s already complete. Add that code in a Content Area element.

If you want to integrate it in a Button element, replicate its style or add the style to the Button element as Element CSS

For other attributes like the data-mode, add them up as Custom Attributes of the Button element. It’s under the Customize tab.

image

image

Still uses the Content Area element for the script part of the code.

Please just note that we do not provide support for custom codes. If that code doesn’t work, please hire a developer to fix the code or integrate the code for you.

Hope that helps and thank you for understanding.

I’m really confused. Sorry. Can I at least send the user to a URL after they click my button? How would I do that?

Also, I’m not finding the place to edit the links and text at the top right of my header: Can you help me with that?

Hello @jhayles,

You can create a new page. Take note of the page URL and this will be the URL for your main button. Once the user clicks the main button, they will go to the newly created page. Now, you will have to edit this page and insert a content area element so that you can also insert the code provided by Typeform.

Hope this makes sense.

I’m sorry…that’s not what I’m asking for:

  1. How do I add code to the button element to make the user go to a new page when it’s clicked? I know how to create a new page, but I don’t know how to make the button take them there when it’s clicked.
  2. How do I edit the links at the top right of my home page? When I click on them inside the editor I don’t see how I can edit the text or links they’re attached to.

Does this make sense?

Hello @jhayles,

1.) Please go to Appearance > Menus and edit your primary menu. You need to add the newly created page as your new menu item.

2.) Once the menu item is clicked, it will open the newly created page. And in your page, this is where you can insert the code given by typeform.

By the way, I am seeing that you are using the Pro theme. You can simply edit your header, insert a button element next to the navigation inline element and then follow the solution given to you by @Christian.

Thank you.

Thank you! I put an icon at the top for people to click on, I like that idea. However, I didn’t understand the instructions from Christian. In his example he highlighted a portion of the code that starts after “style=” and I tried pasting exactly what he highlighted but it doesn’t do anything. I also tried the data-mode instructions but that didn’t do anything either. I would love to have the Typeform appear after they click the button I’ve created, that’s my first preference. If that’s too difficult I want to take them to another page after they click the button. Can you help me with that?

Hey @jhayles,

I didn’t say you just paste the style code. I said you should use the Element CSS. It should look like the following:

$el {
/* style code here */
}

Please review the Element CSS documentation to learn more https://theme.co/docs/element-css.

My instruction would work if followed correctly and completely. If it is too complex for you, please redirect the button to another page or the Typeform page itself. It’s already in the code.

Simply add that to the HREF field of the Button element.

image

Thanks.

@christian I did follow your instructions, the best I could. I think you assumed I know more about code. I have a basic understanding of HTML and CSS, that’s it. I also read the instructions twice about CSS and they don’t mention anything about what I’m trying to accomplish (which is a pop-up after someone clicks a button or text).

Hello @jhayles,

Thanks for updating in! Is your site online already? To better assist you with your issue, kindly provide us access to your site so that we can check your settings and see what you have done so far. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

I replied above with the secure note. Thank you for your help.

Hey @jhayles,

You previously said:

That is exactly what your button is doing upon checking.

image

I’ve already provided instructions for you and they would work if followed carefully. I did not assume you know code. I’ve previously said that if you don’t know code and use the options in the builder as I’ve shown, you should hire a developer to integrate 3rd party codes for you.

Because you really like us to perform the instruction I’ve given to integrate 3rd party code which is outside the scope of our support, please watch the recording in the secure note. I hope it would be very clear now. You simply need to copy the attributes and values from the code into the Button element and place script codes inside a Content Area element which is much easier for beginners than what I’ve shown in the video using the Header JS.

If you have more integrations like this, please consider signing up to One where we provide customization guidance.

Regarding the CSS, it’s just to copy the style of the button in the code. I said nothing that it’s for the popup. It’s the Javascript that powers the popup.

Thank you.

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