Pop Up attached to custom button (which is an image)

Hi @CaseyT If you’d like to use your own existing button, you’ll need to use custom code. Though, @mathio might be able to offer some advice for you!

Thank you for this! I have it kinda figure out. But when I insert my Form ID (which I believe is the last bit of the URL link to the form) it still takes me to the typeform main page to log in when I click it on my website. Any thoughts? 

Yes, your typeform link is in the following format and ID is the last part (after last slash):

https://form.typeform.com/to/<form-id>

It might have some other characters after the ID, eg. hidden fields, so make sure to omit those:

https://form.typeform.com/to/<form-id>#name=value

Can you please share the code you are using or the website where it is embedded? I can have a look what might be the issue.

Hi @CaseyFt , if you want to add a pop-up dialog box to a custom button such as a an image, there are several ways to achieve this depending on the platform or website you are using. Here are a few common approaches,

 1) JavaScript/ jQuery, You can add an event listener to the button/ image and within, trigger a pop-up dialog box using JavaScript or jQuery. You can use libraries like Bootstrap Modal or jQuery UI Dialog to create and customize the pop-up

2) CSS and HTML, You can use CSS to create a hidden pop-up dialog box and then use HTML markup classes to show or hide the pop-up when the button/ image is clicked. This can be achieved using techniques sush as CSS transitions, animations or the ": target" pseudo-selector.

 3) Front- end framework, If you are using a Front-end framework such as React, Angular or Vue.js, these frameworks usually have their own mechanisms for creating pop-up dialog their built-in components, plugins or libraries to easily create and customize the the pop-up.

The specific implementation details will depend on your development environment, programming language and the framework or libraries you are using. It's recommendations or resources specific to your chosen platform or framework to find the best approach for creating a pop-up dialog box attached to a custom button or image.

@Ibrahim masudi - what does your response have to do with the Typeform functionality? 

Hello! It sounds like you want to link a pop-up form to your custom "Birthday Club" button on your website. To do this without using a built-in button creator, you can follow these general steps:

Edit the HTML: Access the HTML code of your website and locate the image button code for "Birthday Club." It should look something like this:

<a href="#" class="birthday-club-button"><img src="birthday-club-button-image.jpg" alt="Birthday Club"></a>

Add JavaScript: You'll need to add JavaScript to trigger the pop-up when this button is clicked. You can use a library like jQuery for simplicity. Here's an example:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

  $(document).ready(function() {

    $(".birthday-club-button").click(function(e) {

      e.preventDefault(); // Prevent the default link behavior

      // Show your pop-up here, e.g., using a modal or custom code

      // You may also use a pop-up library like Magnific Popup or Bootstrap Modal

    });

  });

</script>

Create the Pop-up: You can create the pop-up content using HTML and CSS. You can style it to match your website's design. Here's a simple example:

<div id="popup" class="popup">

  <h2>Sign Up for Our Birthday Club</h2>

  <!-- Add your form and content here -->

</d

iv>

Style the Pop-up: Use CSS to style the pop-up and make it visually appealing. You can match the styling to your existing buttons.

Show/Hide Pop-up: In the JavaScript code from step 2, when the "Birthday Club" button is clicked, you can use JavaScript to show the pop-up. You might need to toggle a CSS class or use a JavaScript library designed for pop-ups.

Remember to replace the placeholder code with your actual pop-up content cursed toad images and customization. If you're unfamiliar with HTML, CSS, and JavaScript, it may be helpful to consult with a web developer or use a website builder that offers pop-up creation features.

Hi @Alizaa7 

it looks like your answer is related to popups in general. However Typeform Embed SDK provides a better solution. It has a popup designed specifically for displaying typeforms with much less code necessary.

Please see my answer above for proper solution.