Subscribe to Our Newsletter

x

How to Add a MailChimp Signup and Pop-up Form to RebelMouse

When used in a smart way, pop-up forms can be a powerful tool for growing audiences, generating leads, and creating loyalty.

If you have a MailChimp account, you can easily set up a pop-up form on your RebelMouse site by following these simple steps:


1. Log in to your MailChimp account and navigate to "Lists."

Navigate to the Lists page.

2. Choose the list you want to work with and select "Signup forms."

Click the drop-down menu next to the list you want to work with, and choose Signup forms.

3. Choose "Subscriber pop-up."

4. Customize the form.

After you've chosen Subscriber pop-up, you'll have a variety of options to customize your pop-up in the form builder.

You can navigate between three tabs to create your form:

  • Design
  • Fields
  • Content

This is where you'll choose the format of your pop-up form, as well as when it should be displayed to people who visit your site. You can also add and style field labels, call-to-action buttons, and custom messaging.

To help grow your subscriber list, the pop-up form is set to single opt-in by default. If you prefer, you can make your form double opt-in at anytime.

To customize your pop-up form, follow these next steps.

5. Use the "Design" tab to create the form's format.

You can choose between:

  • Modal to display the form in the center of your site.
  • Slide to have the form slide in and display in a fixed position on the bottom-righthand side of your site.
  • Fixed to display the form in a fixed position at the bottom of your site. This format only shows an email address field and body text on your form. Choose another format to display additional fields, footer text, or an image.

6. Use the "Design" tab to adjust when the form displays.

Click the Display drop-down menu to choose when your form should appear to people who visit your site.

7. Use the "Design" tab to adjust styling elements.

You can set image alignment and styles for the field labels, button, and pop-up modal here.

8. Use the "Fields" tab to choose the fields you want to show on your form.

Check the box next to each field you want to include in your form.

To require a field, toggle the Required slider on (it'll display a checkmark).

9. Use the "Fields" tab to reorder your fields.

To reorder a field, click the More Options icon (three dots) next to it and drag the field to where you want it to appear in your form.

10. Use the "Content" tab to add images and text.

Add the image and text you want to include in your pop-up form.

11. Review how your pop-up form looks on mobile devices.

You can make sure your pop-up form is mobile-friendly here.

12. Preview the banner.

To comply with mobile best practices, MailChimp defaults to a banner when your form is viewed on a mobile device. Visitors can tap the banner button to access your form.

13. Generate the code for your form.

When you're happy with how your pop-up looks, click the Generate Code button in the bottom-righthand corner.

14. Log in to your RebelMouse site and navigate to the "Top Bar" element in the Layout and Design tool.

  • Once you're logged in, choose the Layout and Design tool.
  • Choose the Top Bar element.

15. Create a "Custom HTML" element and paste your MailChimp code.

  • Create a Custom HTML element.
  • Give it a friendly name you can recognize it by, such as "MailChimp Pop-up."
  • Paste the generated code from MailChimp (step 13).
  • Click Save.

16. Your pop-up is now live!

Your pop-up form will display when someone visits your site. If they choose to fill out and submit your form, we'll add them to your MailChimp list.

If a visitor has previously viewed your form, MailChimp uses cookies to make sure they don't see it again for up to one year (or until they clear their cookies).

17. Need to make additional changes? Edit the form.

After you add the pop-up form's code to your site, you may need to make additional changes to the form.

To edit the form, follow these steps:

  • Navigate to the Pop-up Form builder.
  • Click on any tab (Design, Fields, Content) and make your adjustments.
  • Click Publish.
  • When the pop-up confirmation window appears, click Publish again.

18. How to remove the form.

  • Navigate to the Top Bar element in the Layout and Design tool of RebelMouse.
  • Remove the Custom HTML element that contains the MailChimp code. (We named ours "MailChimp Pop-up" back in step 15.)
  • Click Save.

19. Additional tips from MailChimp to consider.

  • Fields that are required in your list are not automatically marked as required on the pop-up signup form. Mark fields as required in the Fields tab.
  • Group fields can be required on the pop-up signup form. This isn't an option on our hosted or embedded signup forms.
  • Set the Overlay Opacity from 1–100, where lower values are more transparent and higher values are more solid. Use only numbers — the setting won't work if you use text or other characters, like %. If you leave the Overlay Opacity field blank, the pop-up will default to something that works for most sites.
  • Make sure you customize your form's related pages and response emails.
  • To help prevent fake signups, you can add reCAPTCHA confirmation to your pop-up form in your list's settings.

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

Easily Snap RebelMouse Into Slack

RebelMouse offers a Slack integration that allows you to sync your editorial process with Slack's notifications. We can set up three events that trigger notifications:

  • Changed stages in the editorial process
  • Edited a post
  • Published a post
Keep reading... Show less

A Seamless Transition: Introducing RebelMouse to New Team Members

Behind every site powered by RebelMouse, there's a team of dedicated content creators, storytellers, developers, and leaders who are working to make sure their site is growing and flourishing. Sometimes, these teams fluctuate as new members join and others leave.

Keep reading... Show less

How to Use Variables to Set Colors Across Your Site

Why This Is Important

You can easily set colors for every element of your site on RebelMouse, including the color of your text, links, and headlines. Usually there's a set of 2–3 colors used across a site. But instead of hardcoding the color on every element, you can use variables to make it so that if a color needs to change, you can update it in one place instead of everywhere — making future maintenance easy.

Keep reading... Show less

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Click here to learn more about what makes RebelMouse secure, stable, redundant, and high performing.

Services

Stateless services, such as application services for front end and back end tasks, are deployed within an Amazon Virtual Private Cloud (VPC) into multiple availability zones using Amazon Auto Scaling groups. Every service deployment is automated and can be done without an operator. Auto Scaling groups eliminate the need for manual recovery procedures in the event of hardware-related incidents. Additionally, Auto Scaling groups for stateless services provide the ability to balance resources according to current load.

Stateless services include:

  • Front end and back end applications
  • Background workers
  • Dedicated services for paid content and statistics

All interactions with our internal services are done via Amazon Elastic Load Balancing (ELB). Load balancing allow us to control the flow of all incoming traffic and reroute it to the group of instances that are available as necessary, which covers any networking and hardware issues. Every load balancer controls the health of the listener instance by regularly performing health checks and removing failed instances from production environments.

Load balancing and Elastic Compute Cloud (EC2) instances provide monitoring services with resource consumption data. Stateful services such as MongoDB, Redis, and Memcached are deployed within a VPC into multiple availability zones using Auto Scaling groups. Every data service has backup, recovery, and automatic failover procedures. Backup and recovery procedures are integrated into Auto Scaling groups and tested regularly.

Services performance is monitored by internal and external tools:

  • Sentry is used to track errors.
  • New Relic is used for application performance monitoring.
  • Amazon CloudWatch is used to monitor performance extremes.
  • Monit, Nagios, and Cacti are used to monitor metrics per instance.

Security

Defense in Depth (DiD) standards are adhered to and applied at all levels:

  • Amazon Web Services (AWS), such as Identity and Access Management (IAM), and CloudTrail
  • VPC and subnets
  • Load balancers (security groups)
  • EC2 instances
  • Operating systems use permissions-based controls

Access Monitoring:

  • AWS CloudTrail monitors all activities in our production data centers and grants us the ability to perform audits

Data Protection:

  • Secured storage
  • Encrypted transition protocols
If you have any questions about RebelMouse's technical infrastructure, email support@rebelmouse.com.

Stepped Entry Editor: Guide Your Users Through Content Creation

Small, dedicated teams can create quality content that helps your site grow traffic organically. RebelMouse's platform enables multiple communities with granular permissions and simplified contribution tools to create a collaborative workflow built for creators.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

How to Fix: Invalid Twitter Card

Sometimes when you share a RebelMouse article to Twitter, it will render the tweet without a Card:

Keep reading... Show less

How to Fix: Facebook Image Sharing Error

Sometimes when you share images on Facebook that are in the body of the post, the following error will occur:

"Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings."

Keep reading... Show less

When to Use the Post Content Element’s Lead Media Properties

RebelMouse's Layout & Design tool makes designing your site easy and intuitive. But there are certain design factors you need to take into account when building out your site.

When creating a post page (i.e., the landing page for any article that a user is directed or navigates to), styling it is slightly different from other pages because it requires you to use the Lead Media property of a Post Content element. Within the context of our Layout & Design tool, "Lead Media" is defined as the main post tied to a post page's URL, which includes all of its images, media, and text.

By contrast, the Posts element displays all other articles (or posts) that aren't the main post you land on. These are the subsequent posts on a page that appear afterward as you scroll — such as in an infinite scroll setup, for example.
Keep reading... Show less

Cross-Site Shareable Elements on RebelMouse

We now have a new feature that will be very helpful for clients that have multiple sites and/or a site network powered by RebelMouse: Cross-Site Shareable Elements. This new feature makes styling work much easier since users are able to update several site layouts at once by editing a single element. This should also prevent duplicating code in similar site layouts, as well as saving users some coding time.

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x
Subscribe to Our Newsletter

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x