Can I have a custom image as a "click to pop ONTRAform" option? [closed]

I know that it automatically has a little "click here" button but I want to use my custom branding.


edit retag flag offensive reopen merge delete

Closed for the following reason duplicate question by Frank
close date 2016-11-28 10:45:21.794270

1 answer

Sort by » oldest newest most voted

Really great question!

Customizing the button on a Click-to-Pop ONTRAform will require a bit of coding knowledge but is still simple enough for anyone to do with some guidance. Here are the step-by-step instructions on getting this to work:

  1. Find a hosted image and copy the URL like this one into a notepad somewhere: http://blog.conqueryourdebt.org/wp-content/uploads/2013/05/Startnow_button_resized.jpg
  2. Navigate to Forms and Open up your ONTRAform
  3. Click on the Publish Button and select the "Click-to-Pop" option shown here.
  4. Copy and paste this code into the "Link Text" area <img src="image_url.png" />
  5. Replace what is in between the quotes with your copied URL so it looks like this.
  6. Copy the form code to your clipboard
  7. Navigate to http://htmledit.squarefree.com/ for a real-time editing experience. Or, if you feel comfortable enough with coding, you can paste it into a notepad of your choice.
  8. Paste in your form code (Make sure to remove example text if you're using squarefree)
    • It will look something like this.
  9. Delete all code starting after <a and ending before href as this is the designated code for the button border and styling
    • See here for visualization.
  10. Your final product should look like this with your image being the button and the old border having been deleted:

<a href='javascript://' data-opf-trigger='p2c25283f58'><img src="http://blog.conqueryourdebt.org/wp-content/uploads/2013/05/Startnow_button_resized.jpg" /></a><script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c25283f58' data-opf-params='borderColor=#fff&borderSize=5px&formHeight=583&formWidth=40%&popPosition=mc&instance=n498752995'></script>

Now you should be ready to paste in that new code to your website with your very own image! If you hit any roadblocks along the way, I’m happy to help.

I recommend that you check out the ONTRAPORT Project Create an ONTRAform. You may also be interested in an article from the ONTRAPORT Blog on ONTRApages hacks.

edit flag offensive delete publish link more

Question Tools

1 follower


Asked: 2016-06-20 13:25:41 -0700

Seen: 50 times

Last updated: Jun 20 '16