Is there any contact us email integration?

I want to know if there is email integration, where user could send emails to the user over the website interface

10 Replies

Hi @skyblade2954. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, Wasp does provide email integration. You can easily integrate email functionality into your web application using Wasp's email-sending feature. You can choose from one of the providers such as Dummy (for development only), Mailgun, SendGrid, or the good old SMTP. Here is an example of how you can set up the email sender in your main.wasp file:

app Example {  
 ...  
 emailSender: {  
 provider: <provider>,  
 defaultFrom: {  
 name: "Example",  
 email: "[[email protected]]"  
 },  
 }  
}

app Example {  
 ...  
 emailSender: {  
 provider: <provider>,  
 defaultFrom: {  
 name: "Example",  
 email: "[[email protected]]"  
 },  
 }  
}

You can also define the defaultFrom field, so you don't need to provide it whenever sending an email. To send emails, you import the emailSender that is provided by the wasp/server/email module and call the send method on it. Here is an example:

import { emailSender } from "wasp/server/email";  
  
// In some action handler...  
const info = await emailSender.send({  
 from: {  
 name: "John Doe",  
 email: "[[email protected]]",  
 },  
 to: "[[email protected]]",  
 subject: "Saying hello",  
 text: "Hello world",  
 html: "Hello <strong>world</strong>",  
});

import { emailSender } from "wasp/server/email";  
  
// In some action handler...  
const info = await emailSender.send({  
 from: {  
 name: "John Doe",  
 email: "[[email protected]]",  
 },  
 to: "[[email protected]]",  
 subject: "Saying hello",  
 text: "Hello world",  
 html: "Hello <strong>world</strong>",  
});

The send method returns an object with the status of the sent email. It varies depending on the provider you use. For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/advanced/email). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @skyblade2954, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

skyblade2954•5mo ago

@kapa.ai @Wasp Team Do you guys simple GUI interface tutorial for "Contact Us" page? With html and css?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain a specific tutorial for creating a "Contact Us" page with a GUI interface using HTML and CSS in the Wasp framework. However, Wasp does provide a way to create pages using React components and you can style them using CSS or CSS frameworks like Tailwind CSS. Here is a basic example of how you can create a page in Wasp:

import React from 'react'

function ContactUs() {
  return (
    <div>
      <h1>Contact Us</h1>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Email:
          <input type="text" name="email" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

export default ContactUs

import React from 'react'

function ContactUs() {
  return (
    <div>
      <h1>Contact Us</h1>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <label>
          Email:
          <input type="text" name="email" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

export default ContactUs

You can then style this page using CSS or a CSS framework of your choice. For more detailed information on how to create and style pages in Wasp, you can refer to the Wasp documentation (https://wasp-lang.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @skyblade2954, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•5mo ago

Nope we don't offer a GUI for that, but as Kapa said, we do offer email sending, so if you create your own form and have it trigger a Wasp Action that sends email via email sender, that is it!

skyblade2954•5mo ago

@martinsos Yes, thank you I can do that, however you can also add it to your tutorial section. You made a GUI implementation for email authentication, you can also add this one too. Not a big deal. @martinsos It would be really easy for some people who don't know too much about react, would get a example page, it would improve their speed.

matijash•5mo ago

this could be a nice addition for Open SaaS, our starter kit (https://opensaas.sh)

Open SaaS

Free, open-source SaaS boilerplate starter for React & NodeJS.

skyblade2954•5mo ago

@matija I used this https://www.geeksforgeeks.org/create-a-contact-form-using-html-css-javascript/ and wrote one simple react html code. I removed several sections but it was usefull with simple validate function. Removed background etc. Let me share the file.

GeeksforGeeks

Create a Contact Form using HTML CSS & JavaScript - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

MEE6•5mo ago

Wohooo @skyblade2954, you just became a Waspeteer level 2!

skyblade2954•5mo ago

@matija

ContactUs.css

ContactUs.jsx

skyblade2954•5mo ago

You can remove the header and footer, it might be usefull for the Wasp tutorial section.

Gaming

Programming

Is there any contact us email integration?