# Newsletter

The **Newsletter** **Widget** is used to allow your visitors to subscribe to your newsletter.

{% hint style="warning" %}
The Mailchimp plugin should be installed before using the widget. To download the MC4WP: Mailchimp for WordPress plugin go here: [Download Mailchimp](https://wordpress.org/plugins/mailchimp-for-wp/).
{% endhint %}

### Using Newsletter widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Newsletter** widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FZtCYmZMQ6o0vTuRiWXE7%2FCompanion%20-%20nesletter%20add.png?alt=media\&token=4646e928-f2c0-4595-be03-c2bca7339024)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. You need to choose the Newsletter form which is available on your website:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FarOFcpHvK118HTsX4ys8%2FCompanion%20-%20nesletter%20choose%20form.png?alt=media\&token=06e154ae-f503-4157-9bd1-614eae52f71f)

{% hint style="success" %}
​You need to create a Newsletter form and Connect with your Mailchimp account to make the form work following the manual from [here](https://docs.stylemixthemes.com/companion-theme-documentation/integrations/mailchimp). 
{% endhint %}

### Step 3:

Now, by clicking on the Style Tab you can customize the text color, typography, margin, padding, border, size, and many more for the Newsletter form:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FlqrGN1t2laGFgkDPOWls%2FCompanion%20-%20nesletter%20style.png?alt=media\&token=decbfe48-f7ca-4c00-ba7b-b630b8824064)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2Fei8coNe79T84ascyQaTl%2FCompanion%20-%20nesletter%20adv.png?alt=media\&token=db667161-18dc-4e75-9f46-61c19749403d)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FpBW1kbB4IxYCw6CGaqcc%2FCompanion%20-%20nesletter%20ready.png?alt=media\&token=8b485990-5dd8-46ec-b3be-ff16bc212500)

Great job! You have done it successfully.

You can use the following HTML code to create the same form as our demo.

```html
<div class="form-fields">
  <div class="form-field">
      <input type="email" name="EMAIL" placeholder="Your email address" required />
  </div>
  <div class="form-button">
      <button type="submit">Subscribe</button>
  </div>
</div>
<div class="privacy-policy">
  	<label>
      <input type="checkbox" name="Privacy Policy" required /> I have read the <a href="#">Privacy Policy</a> and agree to its terms.
	</label>
</div>
```