Form email notification

In my application I have a contact form that I would like to have a notification sent to me.

My application is using ReactJs

I have started to setup mail-gun, but I need some help as I tried to follow the meteor-chef’s guide https://themeteorchef.com/tutorials/using-the-email-package

  constructor(props){
        super(props);
        this.handleSendMessage = this.handleSendMessage.bind(this);
    }
    handleSendMessage(event){
        event.preventDefault();
        const message = ({
            firstName: this.name.value,
            lastName: this.name.value,
            email: this.email.value,
            message: this.message.value,
        });
        event.target.reset();
        Meteor.call('sendMessage', message, (error) => {
            if (error) {
                Materialize.toast(`An error occured while sending your message: ${error}`);
            } else {
                Materialize.toast('Message sent!', 4000);
                browserHistory.push('/');
            }

        });
    }

Here is the form

<form className="col s12"  ref={contactForm => (this.contactForm = contactForm)} onSubmit={this.handleSendMessage.bind(this)}>
                                <div className="row">
                                    <div className="input-field col s6">
                                        <i className="material-icons prefix">account_circle</i>
                                        <input id="icon_prefix" type="text" ref={firstName => (this.firstName = firstName)} className="validate"/>
                                        <label for="icon_prefix">First Name</label>
                                    </div>
                                    <div className="input-field col s6">
                                        <i className="material-icons prefix">account_circle</i>
                                        <input id="icon_telephone" type="text" ref={lastName => (this.lastName = lastName)} className="validate"/>
                                        <label for="icon_telephone">Last Name</label>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="input-field col s12">
                                        <i className="material-icons prefix">email</i>
                                        <input id="email" type="email" ref={email => (this.email = email)} className="validate"/>
                                        <label for="email" data-error="wrong" data-success="right">Email</label>
                                    </div>
                                </div>
                                <br/>
                                <div className="row">
                                    <div className="input-field col s12">
                                        <i className="material-icons prefix">work</i>
                                        <textarea id="textarea1"  ref={message => (this.message = message)} className="materialize-textarea"></textarea>
                                        <label for="textarea1">Please Describe your job</label>
                                    </div>
                                </div>
                            </form>

Here is my method.js code from inside my api directory

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';
import { Email } from 'meteor/email';

Meteor.methods({
    sendMessage(message) {
        check(message, Object);

        Meteor.defer(() => {
            Email.send({
                to: 'taylor@baremetalcloud.com',
                from: `${message.fistName} ${message.email}`,
                subject: `${message.fistName} sent a message!`,
                text: message.message,
            });
        });
    },
});

Can you be more specific what isn’t working? :slight_smile:

Sorry I didn’t specify before,

The problem is that when I click on the submit button it doesn’t send the email

and also the alert messages do not display either

:slight_smile:

Are you getting any errors in the server console?

try this in your meteor method

Email.send({
  to: 'taylor@baremetalcloud.com',
  from: message.fistName + '<' + message.email + '>',
  subject: message.fistName + ' sent a message!',
  text: message.message,
});

Hey there.

So in order to replicate the situation I copied and pasted your code and here are my findings :slight_smile:

By the way when you are developing, do you use browser’s console? If you don’t I strongly suggest that you should, because when I was debugging your code, I basically followed console’s instructions

Also, I strongly suggest that not using ref in these kind of situations. You can take a look at the official documentation for more details about that. Please have a look in your free time.

So first things first, in your components, you cannot use for like <label for="textarea1">..... Like className the React version of for is htmlFor

Second, inside of your handleMessage() function, you have the following object

const message = ({
            firstName: this.name.value,
            lastName: this.name.value,
            email: this.email.value,
            message: this.message.value,
        });

However, I cannot see any this.name in your form, but there are this.firstName and this.lastName so the object should be

const message = ({
            firstName: this.firstName.value,
            lastName: this.lastName.value,
            email: this.email.value,
            message: this.message.value,
        });

I also see that you use event.target.reset() to reset form. But I got an error in my console that says reset() is not a function. So in order to reset the form, based on your code, you should use this.contactForm.reset()

In your method, you have

 Email.send({
                to: 'taylor@baremetalcloud.com',
                from: `${message.fistName} ${message.email}`,
                subject: `${message.fistName} sent a message!`,
                text: message.message,
            });

So there is a typo in message.fistName

Ah by the way, I see that you bind this two times. Both in constructor level

 constructor(props){
        super(props);
        this.handleSendMessage = this.handleSendMessage.bind(this);
    }

and also in component level

<form className="col s12"  ref={contactForm => (this.contactForm = contactForm)} onSubmit={this.handleSendMessage.bind(this)}>

It won’t give you an error but it is more like an either/or situation.

When you do these changes, it should work (worked for me at least)

But again, I strongly recommend you to check following articles for form handling and usage of ref


3 Likes

Thank you so much for the help I made those changes and it works now.

And I’m going to take a look at those articles you provided for me.

:slight_smile: