How to customise SmugMug contact form
Disclaimer – This website contains affiliate links to the products and services SmugMug offer, you won’t pay any more for the products or services they offer but I may get a commission Thank you
It is really easy to customise a SmugMug contact form. You also don’t need to make a contact form for your SmugMug website. It is already there for you to add to your website. If your contact email is already in the about me section of the Edit Profile section then you will be able to simply add the contact form.
Change the photo on the SmugMug contact form
To change the photo on your SmugMug contact form, simply go to the top right corner of your SmugMug website. Click the square or the profile photo if there is a photo already there.
You then need from the drop down menu
> Edit My Profile
Then the About Me section
Then find Profile Photo, If you click on the photo square this will take you to where all your photos are stored and you can choose a photo for the profile. This photo will be the photo which appears on your contact form.
Change or add email address on the SmugMug contact form
To change or add an email address on your SmugMug contact form, simply go to the top right corner of your SmugMug website again. Click the square or the profile photo.
You then need from the drop down menu
> Edit My Profile
Then the About Me section
Then find contact email.
This is where you can change or add the email address for where messages from visitors to your website will got to.
Customise the colour of the contact form
The colour of your contact form will depend on the theme you are using, either SmugMug dark or light. If you are using the dark theme the contact form will be a dark colour. If you are using a light SmugMug theme the contact form will be white. To change the theme of your SmugMug website go to
> Customize at the top right of your SmugMug website.
Then you need > Theme in the customize panel.
You can change the Theme of the website (or the colour) from dark to light or to patterns or what ever colour you desire.
Just choose an Available Theme if you would like the SmugMug light just click on SmugMug then click on SmugMug light.
Did you know?
You can customise just the colour of the contact form. By adding custom CSS to the advanced section in the Edit Theme Panel, this is really easy to do (just copy & paste). For example if your SmugMug website theme is dark you can add the custom CSS to the theme panel and just the contact form will be light and bright.
Edit SmugMug CSS
To edit the theme CSS you need
> Customize
> Theme in the customize panel
Click the wrench icon to edit the theme.
Then you need > Advanced
Scroll to the bottom of the Advanced theme settings to Custom CSS then click Edit
Copy & paste the code below into the custom CSS
The custom CSS is from a SmugMug blog post, if you would like to use other colours just change the hex code in the CSS.
Once you have pasted the custom CSS in click done, then publish now.
If you can’t click done, it is probably because you need to give your theme a name in the basic setting area in Edit Theme.
/* Background mask - color change */
.sm-user-ui .yui3-widget-mask,
.sm-user-ui .sm-overlay-container .yui3-widget-mask {
background-color: #f7f7f7;
}
/* Changing the title color */
.sm-user-ui .sm-panel.sm-panel-contact h1 {
color: #000;
}
/* Changing contact form background color */
.sm-user-ui .sm-panel-contact .sm-procontact-overlay {
background-color: #fff;
}
.sm-user-ui .sm-panel-contact .sm-panel-content {
background-color: #ffffff;
}
/* Changing form fields */
.sm-user-ui .sm-panel-contact .sm-form-field-text-input,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea {
color: #2b2b2b;
background-color: #ffffff;
border-color: #34363a;
}
.sm-user-ui .sm-panel-contact .sm-form-field:focus,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea:focus {
background-color: #eaeaea;
border-color: #3c3e43;
}
/* Modifying buttons */
.sm-user-ui .sm-panel-contact .sm-button-skin-default,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit {
color: #1b1b1b;
border-color: #34363a;
background-color: #ffffff;
}
.sm-user-ui .sm-panel-contact .sm-button-skin-default:hover,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit:hover {
color: #3a3a3a;
border-color: #34363a;
background-color: #eaeaea;
} 
