Setting Up Jetpack

Setting Up Jetpack

Connecting to WordPress.com

Jetpack allows you 3 ways to connect your website to their tools.

  1. WordPress.com account
  2. Connect using google
  3. Create New Account

For this example we will be using Create New Account to setup the connect between the website and WordPress.com

 

Step 1: Fill in the

  1. Email Address
  2. User Name
  3. Password

Then click Create your account to complete this step of the process.

Step 2: Approve the connect

click the approve button

Step 3: Click Skip

This page asks you about what type of website you are building.

You don’t need to fill this in right away.

I suggest clicking skip. 

Step 4: Click Skip Again

This page asks you to enter a keyword to describe your website.

You don’t need to fill this in right away.

I suggest clicking skip. 

Step 5: Select Free

When asked to choose a plan select the free option below the three paid options.

You should now be connected.

Mailchimp Step 5: Using Elementor Pro Form to Create a Newsletter Sign Up Form

Mailchimp Step 5: Using Elementor Pro Form to Create a Newsletter Sign Up Form

This tutorial covers the steps to set up the WordPress Easy Forms plugin to create an Email Alerts mailing list through Mailchimp.

The steps are for this tutorial are

  1. Navigate to your website and login to the site
  2. Navigate to Elementor, Setting, Integration and the mailchimp API section make sure the API key is filled in.  If not this link will explain how to find and add your API Key
  3. Navigate to the page you want to add a form to and edit it with Elementor
  4. Drag over a Heading widget and label the section header for the Newsletter
  5.  In the Elementor Widget area in search bar area type in mail and use the Form widget that will become available
  6. Drag and drop it under the Heading widget you had created earlier
  7. Rename Name to First Name and replace the place holder field as well
  8. Duplicate the first field
  9. Rename First to Last so that it now reads Last Name then copy and past Last Name into the place holder field
  10. Delete Message by clicking on the X
  11. Add new item Acceptance
  12. Name Acceptance field Authorization, make it required, then add your authorization text.
  13. Change send button label to Sign Up and center the button
  14. Go to Action After Submit and add Mailchimp
  15. Go to email and change email information
  16. Next setup Mailchimp
  17. Select Audience
  18. Select Group
  19. Make sure double opt in is selected
  20. Map the fields to the proper form field
  21. Next Additional Options make sure caution messages is turned on and change any language to reflect what you want to use
  22. Make sure all required fields are set to required
  23. Go back to Form Field section and open each field and make sure the required flag is turned on for all fields that you want to require it be filled out before the form is submitted.
  24. To control the font size of the Authorization text so its smaller than the rest of the text click on the form to open the widget’s editor Click on Advanced, in Class Classes add ngops-newsletter then click on Custom CSS and add CSS code
  25. Update page

CSS code

.ngops-newsletter label {
font-size: 14px;
}

Mailchimp Step 4: Using Easy Forms to Creating an Email Alert Sign Up Form

Mailchimp Step 4: Using Easy Forms to Creating an Email Alert Sign Up Form

This tutorial covers the steps to set up the WordPress Easy Forms plugin to create an Email Alerts mailing list through Mailchimp.

The steps are for this tutorial are

  1. Navigate to your website and login to the site
  2. Navigate to Easy Forms and Setting and make sure the API is connect. You should see a green box that says connect. If not this link will explain how to connect the API
  3. Click on Opt in forms
  4. Create an Opt in form by filling in Form Name, Form Desciption, and  Associated list
  5. Add form fields and the Interest Group
  6. Click on Submission Settings and make sure Existing Interest Groups is set to Update.
  7. Click Update Form
  8. Navigate to the page you want to add a form to and edit it with Elementor
  9.  In the Elementor search bar type in mail and the Easy Mailchimp Forms widget will become available
  10. Drag and drop it where you would like it
  11. Change form information to reflect what you want it to say like the title and submit button.
  12. If you want to control the way the sign up box is placed click on blue pencil then Advanced and than Custom CSS
  13. Add CSS Code
  14. Update page

CSS code

button.yikes-easy-mc-submit-button.yikes-easy-mc-submit-button-1.btn.btn-primary {
display: flex;
width: auto;
}
form label span {
padding-top: 6px;
position: relative;
display: inline-block;
}
form label span {
padding-top: 6px;
position: relative;
display: inline-block;
}

Mailchimp Step 3: Setting up Mailchimp Groups

Mailchimp Step 3: Setting up Mailchimp Groups

This tutorial covers the steps to set up Mailchimp groups to be able to focus and target your sign up better. Groups allow for your users to self select what email lists they want to be part of. By using groups you can have different kinds of email list and different kinds of information that users can sign up for.

The steps are for this tutorial are
  1. Navigate to Mailchimp.com and login to the site
  2. Navigate to Audience
  3. Navigate to Settings, Manage Audience, Publicity settings and make sure No, my campaigns for this audience are not public is selected and save settings
  4. Using the navigation bar at the top of the Settings section click on  Manage Contacts and then scroll down to Groups
  5. Click on create group and create the group 
  6. Select the button type, create a group category,  and then add a group name.
  7. Once you have created all the groups you need click Save.

Mailchimp Step 2: Connecting WordPress to Mailchimp via Mailchimp API​

Mailchimp Step 2: Connecting WordPress to Mailchimp via Mailchimp API​

This tutorial covers the steps to connect your WordPress site to your Mailchimp account via the Mailchimp API.

The steps are

  1. Navigate to Mailchimp.com and click on Login to enter your account
  2. Enter your User name and Password
  3. Login verification via email
  4. Got to email and get code
  5. Copy code, past into verification page and submit code
  6. Login to your WordPress site
  7. Go to dashboard
  8. Go to Easy form setting
  9. Right click on “Get your API key here” and open in another tab
  10. Go to new tab
  11. Go to Your API keys section of page and click Create A Key button
  12. Scroll down to Your API Keys and copy your API key
  13. Go back to Easy Forms setting page and paste API key in the Mailchimp API key space and remember to click on save change. You should now see a green box that reads connected
  14. Next go to  Elementor, Integrations, Mailchimp and past in the API key, click on Validate API Key and once the key is validated scroll down to the bottom of the page and click Save Changes

Font Resize
Contrast