User Tools

Site Tools


contentpopup

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
contentpopup [2017/06/27 20:00]
brittany [I would like a Contact Us button instead of a text hyperlink]
contentpopup [2017/06/27 20:05] (current)
brittany [To create a Contact Us button]
Line 1: Line 1:
 +====== 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.
 +
 +{{:​editsource01.png|}}
 +
 +This will launch the raw code of the page. Locate the position where you want to insert the code and add the following:
 +
 +<code html>
 +<a class="​popup"​ href="/​member/​contact/">​Contact Us</​a> ​
 +</​code>​
 +
 +This will generate a text only hyperlink to the Contact form, which will pop up on top of the existing page.
 +
 +{{:​contactform01.png|}}
 +
 +=====I would like a "​Contact Us" image instead of a text hyperlink=====
 +
 +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.
 +
 +{{::​contact.png|}}
 +
 +Upload the image to your [[uploading|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:
 +
 +<code html>
 +<img src="​http://​u.realgeeks.media/​YOURSITENAME/​FILENAME.png">​
 +</​code>​
 +
 +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:
 +
 +<code html>
 +<a class="​popup"​ href="/​member/​contact/">​
 +<img src="​http://​u.realgeeks.media/​YOURSITENAME/​FILENAME.png">​
 +</a>
 +</​code>​
 +
 +This will insert your specified button on to the page, linking to the same pop up contact form.
 +
 +=====To create a "​Contact Us" button=====
 +
 +<code HTML>
 +<a class="​button contact_us popup" style="​background:​ #CC6699; color: #​ffffff;"​ href="/​member/​contact/">​
 +<​span>​Contact Us</​span>​
 +</a>
 +</​code>​
 +
 +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.
contentpopup.txt ยท Last modified: 2017/06/27 20:05 by brittany