Image to open contact form

Tom FosterTom Foster Registered Users Posts: 289 Major grins
edited May 19, 2015 in SmugMug Customization
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!
«1

Comments

  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited 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.
    Sebastian
    SmugMug Support Hero
  • Tom FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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!
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited 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.
    Sebastian
    SmugMug Support Hero
  • Tom FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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.

    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!
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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 FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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! :D
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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 FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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&quot; border="0" alt="" >
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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?
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited 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.
    Sebastian
    SmugMug Support Hero
  • Tom FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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.
    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!
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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.

    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 FosterTom Foster Registered Users Posts: 289 Major grins
    edited May 18, 2015
    Do you have an ad blocker on or something? Will check when I get home!
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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.
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited 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.
    Sebastian
    SmugMug Support Hero
  • EmilyGraceEmilyGrace Registered Users Posts: 16 Big grins
    edited 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.

    I added a footer menu and it works. Thank you for your help--I appreciate it!
  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited 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.
    Sebastian
    SmugMug Support Hero
  • Tom FosterTom Foster Registered Users Posts: 289 Major grins
    edited 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?
    I'm happy to hear that. You're welcome.

    Glad you got it fixed! Working now! :D
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins

    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?

  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited March 2, 2020

    Not sure how to post the code.

  • PhyxiusPhyxius Registered Users Posts: 1,396 Major grins

    @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.

    Christina Dale
    SmugMug Support Specialist - www.help.smugmug.com

    http://www.phyxiusphotos.com
    Equine Photography in Maryland - Dressage, Eventing, Hunters, Jumpers
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • AllenAllen Registered Users Posts: 10,007 Major grins

    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.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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>
    
    
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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>
    
Sign In or Register to comment.