User Tools

Site Tools


contentpopup

Inserting popup contact form links into your content

If you want to insert a link to a popup contact form, you will need to add a specific line of code to your page's source code. The contact widget will not work for internal Real Geeks websites as it is designed to only work for external sites.

First you will need to open up the page that you wish to add the contact form to.

Once the page is open, locate the edit source button in the edit box.

This will launch the raw code of the page. Locate the position where you want to insert the code and add the following:

<a class="popup" href="/member/contact/">Contact Us</a> 

This will generate a text only hyperlink to the Contact form, which will pop up on top of the existing page.

This can be performed by adding an <img src> code into the code block.

You will first need an image to use as a button. Feel free to use this button we are using as an example or create/locate one of your own.

Upload the image to your File Browser and take note of the filepath URL.

You will then replace the “Contact Us” text with the code linking to the image, which will look like this:

<img src="http://u.realgeeks.media/YOURSITENAME/FILENAME.png">

Make sure everything is copied verbatim for the image's filepath including:

  • The proper site name so the correct File Browser is accessed
  • File name of the image
  • The image's file extension (*.png, *.jpg, etc.)

The entire code block that would look like this:

<a class="popup" href="/member/contact/">
<img src="http://u.realgeeks.media/YOURSITENAME/FILENAME.png">
</a>

This will insert your specified button on to the page, linking to the same pop up contact form.

To create a "Contact Us" button

<a class="button contact_us popup" style="background: #CC6699; color: #ffffff;" href="/member/contact/">
<span>Contact Us</span>
</a>

You can change the background and color of the button by going to http://www.w3schools.com/colors/colors_picker.asp and replacing #CC6699 and #ffffff with the color code of your choice.

Click here to learn how to add the Contact Us button on an external site (not your realgeeks site).

contentpopup.txt · Last modified: 2019/06/27 19:42 by brittany