How can add mail champ in to contact form

To add Mailchimp to a contact form, you'll need to follow these steps:

Step 1: Create a Mailchimp account and set up a list

  1. Go to Mailchimp.com and sign up for an account.
  2. Create a new list by clicking on "Lists" and then "Create a list".
  3. Fill in the list details, such as the list name, description, and email address.

Step 2: Get your Mailchimp API key

  1. Log in to your Mailchimp account and go to "Account" > "Extras" > "API keys".
  2. Click on "Create a key" and give your key a name.
  3. Copy the API key, you'll need it later.

Step 3: Add Mailchimp to your contact form

You can add Mailchimp to your contact form using one of the following methods:

Method 1: Using a plugin (e.g. Gravity Forms, Formidable Forms)

  1. Install a plugin that supports Mailchimp integration (e.g. Gravity Forms, Formidable Forms).
  2. Configure the plugin to connect to your Mailchimp account using your API key.
  3. Create a new form and add a Mailchimp field to it.
  4. Configure the Mailchimp field to subscribe users to your Mailchimp list.

Method 2: Using JavaScript and HTML

  1. Add the Mailchimp JavaScript library to your website by adding the following code to your HTML file:
    <script src="https://cdn.mailchimp.com/js/jquery.form.min.js"></script>
    <script src="https://cdn.mailchimp.com/js/mailchimp.js"></script>
  2. Create a form with a submit button and add a hidden field to store the user's email address:
    <form id="contact-form">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <input type="submit" value="Submit">
    <input type="hidden" name="mc-embedded-members" value="1">
    </form>
  3. Add the following JavaScript code to your HTML file to send the form data to Mailchimp:
    $(document).ready(function() {
    $('#contact-form').submit(function(event) {
     event.preventDefault();
     var formData = $(this).serialize();
     $.ajax({
       type: 'POST',
       url: 'https://us1.api.mailchimp.com/subscribe/',
       data: formData,
       success: function(data) {
         console.log('Form submitted successfully!');
       },
       error: function(xhr, status, error) {
         console.log('Error submitting form: ' + error);
       }
     });
    });
    });
  4. Replace the us1 in the URL with your Mailchimp API key.

Step 4: Test your contact form

  1. Fill out the contact form and submit it.
  2. Check your Mailchimp list to see if the user has been successfully subscribed.

That's it! You should now have a contact form that sends data to Mailchimp.