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
kapa.ai
kapa.ai5w ago
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
skyblade29545w ago
@kapa.ai @Wasp Team Do you guys simple GUI interface tutorial for "Contact Us" page? With html and css?
kapa.ai
kapa.ai5w 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
martinsos5w 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
skyblade29545w 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
matijash5w 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
skyblade29545w 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.
From An unknown user
From An unknown user
MEE6
MEE65w ago
Wohooo @skyblade2954, you just became a Waspeteer level 2!
skyblade2954
skyblade29545w ago
You can remove the header and footer, it might be usefull for the Wasp tutorial section.