1. Home
  2. Customization
  3. Adding phone number to the standard SmugMug contact form

Adding phone number to the standard SmugMug contact form

Intro

Today I will show you how to add a phone number to the standard SmugMug contact form.  The contact form has a very limited customization option – but there is an easy way to add a little bit more information – like a phone number.

How to do this?

You just need to make sure that you have added a contact form to your site – here is a great tutorial on how to do this.

You then need to open your site → click CUSTOMIZE → CONTENT AND DESIGN → select the THEME tab → hover your cursor over the active theme that you are using and click the wrench icon → this will open a small popup window – like this one:

SmugMug Edit Theme Screen

Open the ADVANCED tab and scroll down until you see an option to add CUSTOM CSS → click the EDIT button and then add this code to it:

/*Adding Phone number to the standard SmugMug contact form*/
.sm-contact-pro-form:after {
    content: "Or give us a call! Tel: 0115 - 234 - 567" !important; /*This is where your text and phone number goes*/
    margin-left: 20px; /*This is a left margin to align the text with the rest of the form*/
    font-weight: bold;  /*This code will make the phone number text bold*/
    color: #ffffff;  /*This will change the phone number text white */
}

 

ERROR MESSAGE WHEN SAVING YOUR THEME

If you are getting an error message while trying to save your theme after adding your code – it means that you have to rename the theme that you are currently using.

Why? Because you are using the default theme, which came pre-build with the design that you have chosen for your site.

How to? It is actually very easy to rename your theme just open the BASIC tab of your theme and type a new name for your theme – that is it:

Theme - adding Custom Name

Just don’t forget to change the phone number in the above CSS code :}  Here is the end result:

Phone number on SmugMug default contact form

Updated on January 7, 2017

Was this article helpful?

Related Articles

Comments

  1. Hi,

    This doesn’t work with the new mail icon form. Do you have an updated code that will let one add a phone number to the white form that poops up when clicking the mail icon in the social bar?

    Thanks Thom!

  2. I’d like to add more lines so I’ve tried to use command ‘\A’ in between the texts and added a command of “white-space: pre;” , but after this the margin-left affects only to the first line but not the later ones. Any idea how to fix this? My code at the moment is:

    /*Adding Phone number to the standard SmugMug contact form*/
    .sm-contact-pro-form:after {
    content: “Or give us a call! Tel: 0115 – 234 – 567” ‘\A’ “eMail: info@yourdomain.com” !important; /*This is where your text and phone number goes*/
    white-space: pre;
    margin-left: 20px; /*This is a left margin to align the text with the rest of the form*/
    font-weight: bold; /*This code will make the phone number text bold*/
    color: #ffffff; /*This will change the phone number text white */
    }

    Thanks!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.