How to Style a MailChimp Form in ProPhoto 7 to Match Your Branding

In this post we will share how to add a MailChip form to your ProPhoto website that matches your brand colors.

1. Add a MailChimp Form to your ProPhoto website
2. Open ProPhoto Custom Code Settings
3. Copy and paste custom CSS Code

1. Add a MailChimp Form to your ProPhoto website

If you haven’t already, follow our tutorial to add the MailChimp for to your ProPhoto website. This will help you get the MailChimp form and place it inside a ProPhoto layout.

Proceed to the next step when you’re ready to style your code with custom CSS.

2. Open the ProPhoto Custom Code settings

Open the ProPhoto customizer, click the “settings” on the left customizer panel.

Click advanced from the list, select “Custom Code” from the drop down list. You will add all custom CSS code to the “Site-wide custom CSS” box.

3. Copy and paste custom CSS code

Center align the form and it’s elements

Copy the code below and paste into the ProPhoto custom code field inside the ProPhoto customizer (step 2).

/* Center align MailChimp Form */

#mc_embed_signup_scroll { 
     border: none; 
     text-align: center; 
     width: 100% !important; 
} 

Make input fields fullwidth on their own row

Copy the code below and paste into the ProPhoto custom code field inside the ProPhoto customizer (step 2).

/* MailChimp input fields */

#mc_embed_signup_scroll input { 
     padding: 8px;
     margin: 10px 5px 0px 5px;
     min-width: 48%;
}

#mc-embedded-subscribe.button {
     margin: 10px 5px 0px 5px;
     width: 98%;
}

Make submit button fullwidth

Copy the code below and paste into the ProPhoto custom code field inside the ProPhoto customizer (step 2).

/* MailChimp Button */

#mc-embedded-subscribe.button {
     margin: 10px 5px 0px 5px;
     width: 98%;
}

Style the submit button

Copy the code below and paste into the ProPhoto custom code field inside the ProPhoto customizer (step 2).

#mc-embedded-subscribe.button {
     background-color: #585858;
     padding: 1em 2em;
     color: #fff;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-decoration: none;
     cursor: pointer;
     border: 1px solid #585858;
     border-radius: 0px;
     background-image: none;
     box-shadow: none;
}

Adjust the button color

To change the button color, replace the “#585858” for the “background-color:” with your own color code.

background-color: #yourcolorcodehere;

Adjust the font button color

To change the font color inside the button replace “#fff” for the “color:” with your own color code.

color: #yourcolorcodehere;

Adjust the submit button text styles

To change the caps on the submit button replace “uppercase” for the “text-transform” field and add “lowercase” in it’s place. (Tip: learn more about the available text transform properties)

text-transform: lowercase;

Adjust the text spacing

To adjust the spacing between each letter replace “.14em” with your desired spacing. (Tip: the larger the number the more spacing between letters. Learn more about text spacing).

letter-spacing: .14em;

Adjust border styling

To adjust the border styling replace “1px” with your preferred thickness (Tip: the larger the number the thicker the border).

To adjust the border style optionally replace “solid” with another available CSS border style.

To adjust the rounding of the button replace “X” with your preferred size. (Tip: the larger the number the more round the border. Learn more about border radius).

border: 1px solid #585858;
border-radius: 0px;

Adjust input fields for mobile devices

Copy the code below and paste into the ProPhoto custom code field inside the ProPhoto customizer (step 2).

/* Stack all inputs and button for mobile */

@media (max-width: 1293px) {
  
.mc-field-group, #mc_embed_signup_scroll { 
     display: block; 
     width: 100% !important; 
}
input {
     width: 100%;
     margin:10px;
}
#mc-embedded-subscribe.button  { 
     width: 100%; 
     margin: 10px; 
}
}

Notes about this styling

Here are additional styling tips and instructions as it relates to the ProPhoto design template.

Change the default fonts stylings

The font stylings inside the fields are controlled by the ProPhoto font settings of the widget module. To change these defaults fonts follow below:

1. Open the ProPhoto customizer
2. Navigate to the page and layout of your MailChimp widget code
3. Open the settings for the widget module
4. Select a default font from the dropdown font options

View the CSS stylings on the front end

In order to view the custom CSS stylings you need to save your changes inside the ProPhoto customizer and then view your site on the front end to see the reflected changes.

Adding the MailChimp form to ProPhoto

The custom CSS code will be applied site-wide. This means that you can add your MailChimp widget module to any ProPhoto layout or block and the stylings will apply automatically.

If you want to adjust how the form looks on each page or different ProPhoto Layouts you will need to apply the adjusted custom CSS code locally on the ProPhoto layout settings.

To make layout specific adjustments open the settings for the layout. Scroll down in the dialog box and paste your custom code in the CSS code box. Save changes and view on the front end to see the reflected changes.

Please Note: if the changes are not reflected in the specific ProPhoto page layout you will need to apply the “!important” rule to override the settings. Example of use below.

background-color: #ffffff !important;

Full Code

Below is the full code with all the above sections combined.

/* Center align MailChimp Form */

#mc_embed_signup_scroll { 
     border: none; 
     text-align: center; 
     width: 100% !important; 
} 

/* MailChimp input fields */

#mc_embed_signup_scroll input { 
     padding: 8px;
     margin: 10px 5px 0px 5px;
     min-width: 48%;
}

#mc-embedded-subscribe.button {
     margin: 10px 5px 0px 5px;
     width: 98%;
}
/* MailChimp Button */

#mc-embedded-subscribe.button {
     margin: 10px 5px 0px 5px;
     width: 98%;
     background-color: #585858;
     padding: 1em 2em;
     color: #fff;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-decoration: none;
     cursor: pointer;
     border: 1px solid #585858;
     border-radius: 0px;
     background-image: none;
     box-shadow: none;
}

/* Stack all inputs and button for mobile */

@media (max-width: 1293px) {
  
.mc-field-group, #mc_embed_signup_scroll { 
     display: block; 
     width: 100% !important; 
}
input {
     width: 100%;
     margin:10px;
}
#mc-embedded-subscribe.button { 
     width: 100%; 
     margin: 10px; 
}
}

Closing thoughts & notes

In this tutorial we provided a step-by-step process to styling a MailChimp email signup form on your ProPhoto 7 website.

If you are looking for more MailChimp and ProPhoto tips and resources checkout the posts below: