Image to open contact form

Tom Foster · December 3, 2014

Sure this is something dead simple that I'm missing but is there a way to link an image to the contact form page? At the moment I'm using a Navbar with one item on a 'Contact' page but it looks bad because of custom CSS I've used for my main navbar (which is on every page). I like the Smugmug form but can't see any way of doing this so far!

Thank you!

rainforest1155 · December 3, 2014

This code should allow you to embed the contact form link in a html content block:

<div class="sm-footer-navitem-contact">
  Please use this <a href="#">Link</a> to schedule your session
</div>

While I haven't tested it, you should be able to replace the "Link" text with an <img> tag to add a photo. The photo should then be clickable and provide the link to the form.

Tom Foster · December 3, 2014

Can't get that to work unfortunately, even with using just text in the 'Link' part, it does nothing when you click it!

rainforest1155 · December 3, 2014

Are you sure that you're adding the code to a HTML content block? Also check that you did set up your customer contact email via the user profile and that you've also verified the email by clicking on the link in the verification email you were sent. If you've made sure of those two items, can you link to the page in question you added the code on, so we could take a look?

I just tested it and the code works fine with the text link. Works fine with a photo as well.

Tom Foster · December 3, 2014

rainforest1155 wrote: »

Are you sure that you're adding the code to a HTML content block? Also check that you did set up your customer contact email via the user profile and that you've also verified the email by clicking on the link in the verification email you were sent. If you've made sure of those two items, can you link to the page in question you added the code on, so we could take a look?

I just tested it and the code works fine with the text link. Works fine with a photo as well.

You're right! It does! I'm not sure why but it doesn't seem to work for me when I'm logged in (whereas the menu link does) so I just assumed it didn't work. Tried in other browsers though and it worked fine. I assumed it was a plugin that was causing it so I disabled them all and it still wasn't working in Chrome. Eventually when I logged out it worked.

http://www.edinburghphotography.com/Contact

Should be able to make this page look nicer but this should do for now at least! Thanks again, you've been very helpful!

EmilyGrace · May 16, 2015

I'm also having trouble getting this to work. I tried logging out, but it still did not work. Any suggestions?
My site: emilygrace.smugmug.com

Tom Foster · May 16, 2015

Use this code:

<div class="sm-footer-navitem-contact">
 <a href="#"><img src="@"></img></a> to schedule your session
</div>

...replacing the "@" with the link to your image (it should end .jpg probably). Place this code in an HTML content block and that should work. It won't work while you're logged in and you need a contact email set up first or again it won't work! Hope that helps!

EmilyGrace · May 16, 2015

I'm using smugmug's fonticon as my image--but it doesn't work with just text. (And I'm logging out to check.) This is my code:

I know the form works, because I had it up and running before redesigning my site. Any suggestions?

Tom Foster · May 17, 2015

EmilyGrace wrote: »

I'm using smugmug's fonticon as my image--but it doesn't work with just text. (And I'm logging out to check.) This is my code:
<div style="display: inline;" class="sm-footer-navitem-contact"><a href="#" class="sm-muted"><span class="sm-fonticon sm-fonticon-large sm-fonticon-Mail"></span></a>

I know the form works, because I had it up and running before redesigning my site. Any suggestions?

Is the image not showing or is clicking on it doing nothing? Could you link to the page? Don't know if it's because your ' class="sm-muted" ' is in an <a> tag rather than a <div>? Someone here probably knows better than me, I usually just fiddle around until things work!
If the image isn't showing at all you could download smugmug's icon as a .jpg and upload it to your site's Graphics album or link directly to its .jpg? <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

EmilyGrace · May 17, 2015

The image shows up just fine and other links work using the fonticons. Clicking on the mail icon takes you to my homepage with the address bar being: emilygrace.smugmug.com/#
The class="sm-muted" only affects the color, as far as I know. I removed it, and the link still does not work.
I also tried linking the icon to a contact page and having the link for the form in text on the page. However, it still did not work.

Any suggestions?

rainforest1155 · May 18, 2015

Hi Emily,
I would suggest that you create a separate html content block and test this with the plain code:

<div class="sm-footer-navitem-contact">
Please use this <a href="#">Link</a> to schedule your session
</div>

If that works, step by step make your modifications and test the link after each step. That way you can see at what change the code stops working.

Tom Foster · May 18, 2015

rainforest1155 wrote: »
Hi Emily,
I would suggest that you create a separate html content block and test this with the plain code:
<div class="sm-footer-navitem-contact">
Please use this <a href="#">Link</a> to schedule your session
</div>
If that works, step by step make your modifications and test the link after each step. That way you can see at what change the code stops working.

Good plan! I can vouch that this works if logged out! I don't know why it doesn't work when logged in though...one of Smugmug's little quirks!

EmilyGrace · May 18, 2015

rainforest1155 wrote: »
Hi Emily,
I would suggest that you create a separate html content block and test this with the plain code:
<div class="sm-footer-navitem-contact">
Please use this <a href="#">Link</a> to schedule your session
</div>
If that works, step by step make your modifications and test the link after each step. That way you can see at what change the code stops working.

I tried it both in IE and Firefox and it does not work for me and I made sure I was logged out.
I left it up on my site for now, directly underneath my header(on every page except for my homepage). You can try it and see: emilygrace.smugmug.com
Any ideas why it isn't working on my website?

Tom Foster · May 18, 2015

Do you have an ad blocker on or something? Will check when I get home!

EmilyGrace · May 18, 2015

Tom Foster wrote: »

Do you have an ad blocker on or something? Will check when I get home!

Nothing that should block this. I used to be able to open it on my own site using the menu and I can open it on your site now.

rainforest1155 · May 19, 2015

Emily,
After some investigation, I found that the code only works if you either have a menu content block set up with a regular contact page link or the full SmugMug footer displayed (with its built-in contact link). So what you could do, is add a small menu to the footer on your "entire site" that just includes one item pointing to the "contact page". That would ensure that the contact form is ready and your email icon in the header should work.

EmilyGrace · May 19, 2015

rainforest1155 wrote: »

Emily,
After some investigation, I found that the code only works if you either have a menu content block set up with a regular contact page link or the full SmugMug footer displayed (with its built-in contact link). So what you could do, is add a small menu to the footer on your "entire site" that just includes one item pointing to the "contact page". That would ensure that the contact form is ready and your email icon in the header should work.

I added a footer menu and it works. Thank you for your help--I appreciate it!

rainforest1155 · May 19, 2015

EmilyGrace wrote: »

I added a footer menu and it works. Thank you for your help--I appreciate it!

I'm happy to hear that. You're welcome.

Tom Foster · May 19, 2015

EmilyGrace wrote: »

I'm using smugmug's fonticon as my image--but it doesn't work with just text. (And I'm logging out to check.) This is my code:
<div style="display: inline;" class="sm-footer-navitem-contact"><a href="#" class="sm-muted"><span class="sm-fonticon sm-fonticon-large sm-fonticon-Mail"></span></a>

I know the form works, because I had it up and running before redesigning my site. Any suggestions?

rainforest1155 wrote: »

I'm happy to hear that. You're welcome.

Glad you got it fixed! Working now!

brandofamily · March 2, 2020

Bringing back an old thread...

Please use this Link to schedule your session

I used the above code in a html block on my homepage and it worked fine.
I added it to a custom html block footer to homepage and to entire site and it works for any page except homepage and one other internal info page that also has the link in a html content block.
So the above code is in 2 places in 2 different html content block on the same page. The 1st link on the page (in the html, non-custom footer block) works. The one in the footer takes me to the top of the home page.

Any ideas?

Hikin' Mike · March 2, 2020

.

brandofamily · March 2, 2020

Not sure how to post the code.

Phyxius · March 2, 2020

@brandofamily said:

Not sure how to post the code.

Hi! Where specifically did you want this code/link? And, what did you want to link to? The contact form?

An option may be to use our button content block which can be set to link to the contact form.

brandofamily · March 2, 2020

I used the code in this thread in a html block on my homepage and it worked fine. I also used it on an interior gallery page. It worked fine there too.
I added the code to a custom html block footer on my homepage and to entire site. The code in the footer works for any page except homepage and the other internal info page that also has the link in a html content block.
So when the above code is in 2 places in 2 different html content block on the same page. The 1st link on the page (in the html, non-custom footer block) works. The one in the footer takes me to the top of the home page.
I don't really want to use a button as it will not integrate to the footer.

Hikin' Mike · March 2, 2020

@brandofamily said:

Not sure how to post the code.

Copy the code and use the 'Code' button below and paste it between the backticks.

Hikin' Mike · March 2, 2020

If you have several lines, wrap the code in three backticks like this:

Allen · March 2, 2020

Drag to highlight all the code lines. Then click "Code" in drop menu.
Be sure to leave a blank line before and after "Code" or it won't work.

brandofamily · March 3, 2020

HTML content box code: The contact form code in this box works on home page.

<div style="font-size:20px; text-align:center; 
border-width: 1px;
border-style: solid;
border-color: #000; 
padding-top:166px; 
padding-bottom:166px;
background-color:#ffffff;">

<img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-cKpZjj8/0/2dba0528/Ti/FAVPNG_telephone-icon_tAjMehzB-Ti.png" width="25" height="25" hspace="10">815-931-4089
<br>

<div class="sm-footer-navitem-contact">
<a href="#"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-tgtSqFF/0/fce01722/Ti/FAVPNG_email-logo-clip-art_1RwRABHK-Ti.png" width="25" height="25" hspace="10"></img></a> 
  <a href="#">abby@lovingandlearningcare.com</a>
</div>

<br>

  <a href="https://www.facebook.com/Love-Learning-Daycare-100548941512397/?ref=aymt_homepage_panel&eid=ARAVD9JXjaF1PEWOTvUqOCDMyOhVmVmZdPWjErZX5JoT6PDAMdbbln64oZ7yGkHF7VCVljS2w1DNgsa5" target="_blank"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-gfNsh9C/0/f68c1782/Ti/FAVPNG_facebook-icon_9X35VXL6-Ti.png" width="35" height="35" hspace="20"></a>

  <a href="https://www.instagram.com/loveandlearningdaycare/" target="_blank"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-69t8qvh/0/f7e52d9e/Ti/580b57fcd9996e24bc43c521-Ti.png" width="35" height="35" hspace="20"></a>

</div>

brandofamily · March 3, 2020

Custom foot HTML Code: This contact form code works on all pages but the home page and the interior gallery that has the above code too.

<div style="text-align:center;">
Web Hosting by <a href="http://www.smugmug.com/?referrer=8jDMwxj6yp4f2">Smugmug</a> • All Images © Abby Miller - Love & Learning Daycare   

  <div style="display: inline;" class="sm-footer-navitem-contact">
<a href="#"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-tgtSqFF/0/fce01722/Ti/FAVPNG_email-logo-clip-art_1RwRABHK-Ti.png" width="25" height="25" hspace="10"></img>
  </div>

  <a href="https://www.facebook.com/Love-Learning-Daycare-100548941512397/?ref=aymt_homepage_panel&eid=ARAVD9JXjaF1PEWOTvUqOCDMyOhVmVmZdPWjErZX5JoT6PDAMdbbln64oZ7yGkHF7VCVljS2w1DNgsa5" target="_blank"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-vV9hZMj/0/847f4c7a/Ti/FAVPNG_facebook-icon-v3-Ti.png" width="35" height="35"></a>

  <a href="https://www.instagram.com/loveandlearningdaycare/" target="_blank"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-69t8qvh/0/f7e52d9e/Ti/580b57fcd9996e24bc43c521-Ti.png" width="30" height="30" hspace="10"></a>

</div>

Hikin' Mike · March 3, 2020

You are missing a closing </a> here:

<div style="display: inline;" class="sm-footer-navitem-contact">
  <a href="#"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-tgtSqFF/0/fce01722/Ti/FAVPNG_email-logo-clip-art_1RwRABHK-Ti.png" width="25" height="25" hspace="10"></img>
</div>

This is correct:

<div style="display: inline;" class="sm-footer-navitem-contact">
  <a href="#"><img src="https://photos.smugmug.com/Info-Pages/Site-Image/i-tgtSqFF/0/fce01722/Ti/FAVPNG_email-logo-clip-art_1RwRABHK-Ti.png" width="25" height="25" hspace="10"></img></a>
</div>

Hikin' Mike · March 3, 2020

Should have mentioned it is on your footer code.

Image to open contact form

Comments