How to Add Newsletter Subscription With Name and Email

In this article, you will come to know how to add newsletter subscription with a name and email

Let’s get started

<?php
namespace Elementor;
class Newsletter extends Widget_Base{
    public function get_name(){
        return "Newsletter";
    }
    public function get_title(){
        return "newsletter";
    }
    public function get_icon(){
        return "eicon-banner";
    }
    public function get_categories(){
        return ['dicomcategory'];
    }

    protected function register_controls(){
        // Title, Content controls
        $this-> start_controls_section(
            'section_content',
            [
                'label' => __('Newsletter Content', 'dicom-toolkit'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            ]
        );
           
            $this->add_control(
                'first_name',
                [
                    'label' => __( 'Name Placeholder Text', 'tryo-toolkit' ),
                    'type' => Controls_Manager::TEXT,
                    'default' => __('Enter Your Name', 'tryo-toolkit'),
                ]
            );
    
            $this->add_control(
                'email',
                [
                    'label'   => __( 'Email Placeholder Text', 'tryo-toolkit' ),
                    'type'    => Controls_Manager::TEXT,
                    'default' => __('Enter Your Email Address', 'tryo-toolkit'),
                ]
            );
            $this->add_control(
                'sub_btn',
                [
                    'label'   => __( 'Subscribe Newsletter Text', 'tryo-toolkit' ),
                    'type'    => Controls_Manager::TEXT,
                    'default' => __('Subscribe', 'tryo-toolkit'),
                ]
            );
            $this->add_control(
                'action_url', [
                    'label' => esc_html__( 'Action URL', 'dicom-toolkit' ),
                    'description' => __( 'Enter here your MailChimp action URL. <a href="https://www.docs.envytheme.com/docs/dicom-theme-documentation/tips-guides-troubleshoots/get-mailchimp-newsletter-form-action-url/" target="_blank"> How to </a>', 'dicom-toolkit' ),
                    'type' => Controls_Manager::TEXT,
                    'label_block' => true,
                    'default' => 'https://envytheme.us20.list-manage.com/subscribe/post?u=60e1ffe2e8a68ce1204cd39a5&amp;id=42d6d188d9
                    ',
                ]
            );
        $this->end_controls_section();
    }

    protected function render()
    {
        // Retrieve all controls value
        $settings = $this->get_settings_for_display();
        
        global $dicom_opt;
        
        ?>

        <form class="wow fadeInLeft mailchimp" data-wow-delay="200ms" data-wow-duration="1000ms" method="post" action="<?php echo home_url(); ?>/?na=s" onsubmit="return newsletter_check(this)">
            <div class="row">
                <div class="col-lg-5 col-md-6 col-sm-6">
                    <div class="form-group">
                        <input type="text" name="nn" class="form-control" placeholder="<?php esc_attr_e($settings['first_name']); ?>">
                    </div>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="form-group">
                        <input type="eamil" class="form-control" name="EMAIL" placeholder="<?php esc_attr_e($settings['email']); ?>" required>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 col-sm-6 offset-lg-0 offset-md-3 offset-sm-3">
                    <div class="form-group">
                        <?php if( $settings['sub_btn'] != '' ): ?>
                            <button type="submit" class="default-btn"><?php echo esc_html( $settings['sub_btn'] ); ?></button>
                        <?php endif;  ?>
                    </div>
                </div>
            </div>

            <p class="mchimp-errmessage" style="display: none;"></p>
            <p class="mchimp-sucmessage" style="display: none;"></p>
        </form>

        <script>
            ;(function($){
                "use strict";
                $(document).ready(function () {
                    // MAILCHIMP
                    if ($(".mailchimp").length > 0) {
                        $(".mailchimp").ajaxChimp({
                            callback: mailchimpCallback,
                            url: "<?php echo esc_js($settings['action_url']) ?>" //Replace this with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
                        });
                    }
                    $(".memail").on("focus", function () {
                        $(".mchimp-errmessage").fadeOut();
                        $(".mchimp-sucmessage").fadeOut();
                    });
                    $(".memail").on("keydown", function () {
                        $(".mchimp-errmessage").fadeOut();
                        $(".mchimp-sucmessage").fadeOut();
                    });
                    $(".memail").on("click", function () {
                        $(".memail").val("");
                    });

                    function mailchimpCallback(resp) {
                        if (resp.result === "success") {
                            $(".mchimp-sucmessage").html(resp.msg).fadeIn(1000);
                            $(".mchimp-sucmessage").fadeOut(500);
                        } else if (resp.result === "error") {
                            $(".mchimp-errmessage").html(resp.msg).fadeIn(1000);
                        }
                    }
                });
            })(jQuery)
        </script>
        <?php
    }
     
}
Plugin::instance()->widgets_manager->register_widget_type( new Newsletter );

That’s it. Hope this is helpful to you

Happy Coding! Thanks