DEV Community: Enock Isaac

A quick guide to creating an email-based contact form

Enock Isaac — Fri, 30 Sep 2022 11:32:15 +0000

Introduction.

Regardless of whether you sell products or services online or manage a local business, an email list can help you generate more sales in any market. An effective way to generate more leads is through the use of a contact form.

A website with a decent and clear contact form looks more professional. An email address that is prominently posted on a contact page doesn't have the same effect.

The contact form can demonstrate to your website's visitors that you are organized and have taken the time to communicate with them more effectively.

Many website owners contact people through their social media networks. In this approach, you can hope that website visitors will be able to contact you through your social media accounts.

What happens, though, if a visitor is not active on social media or doesn't want to make a big effort to get in touch with you? It appears to become troublesome and burdensome for visitors.

Well, that will probably result in you losing a potential client to other businesses.

Contact forms can be created in a variety of ways for your website. Our goal today is to create a contact form that sends data to a single email address. It's a very personalized method that doesn't require a database. Businesses on a small scale can benefit greatly from it.

Prerequisites

The first thing you need to do is install a text editor on your computer so that you can follow this tutorial. In this case, I will use Visual Studio Code. It's up to you which text editor you use.

Project Setup

First of all we will create a folder called Contact for our workspace for today's lesson. Next we would open the folder in our text editor. In this case VS Code. Next we will create two files inside the folder opened in VS Code called index.html and style.css. Your workspace should now look like this.

Inside our html file we will begin to write the code for our contact form and we will style it inside the style.css file.

We will create a title and then link an external file for styling.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Contact Form Using Email
        </title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

    </body>

</html>

Next will add a general style to the style.css file and add Poppins and san-serif.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif ;
}

Next we will create a div section inside our body tag. This code should go into our body tag.

<div class="container">

</div>

Inside our style.css file we will add a styling for the div section we created in the html file.

This code should go into our style.css file.

.container{
    width: 100%;
    height: 100vh;
    background: #001660;
    display: flex;
    align-items: center;
    justify-content: center;
}

Our index.html file should now look like this.

Also our style.css file should now look like this.

We will now open our index.html file inside a browser.

Next we will create a header with a h3 tag, Input field for Name, Email and Phone number. We will add a Text area for messages and a Submit button.

This code should go inside our div tag.

<form>
<h3>GET IN TOUCH</h3>
<input type="text" name = "Name" placeholder=" Your Name" required>
<input type="email" name = "Email" placeholder=" Your Email" required>
<input type="text" name = "Phone" placeholder=" Your Phone NO." required>
<textarea name="message" rows="4" placeholder="How can we help you?"></textarea>
<button type="Submit">Send</button>
</form>

We will now style our Contact form.

This code should go inside our style.css.

form{
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
}

form h3{
    color: #555;
    font-weight: 800;
    margin-bottom: 20px;
}


form input, form textarea{
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: #f5f5f5;
    font-size: 16px;
}

form button{
    padding: 15px;
    background: #ff5361;
    color: #ffffff;
    font-size: 18px;
    border: 0;
    outline: none;
    cursor: pointer;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 30px;
}

Our index.html file should now look like this.

Also our style.css file should now look like this.

Our browser should now look like this.

Our Contact form is all set but it doesn't perform any function.

To make our form fully functional, we will go to formspree.io register and verify your email.

We will now click on create new contact.

We will name our from Contact Form and click on the create form button.

We will now copy our link and add it to out code.

Next we will add the code to our tag inside our index.html file.

Replace https://formspree.io/f/xpznraod with the link we copied from our Formspree dashboard.

action="https://formspree.io/f/xpznraod" method="POST"

Our VS Code should now look Like this.

Next will now go to our browser and fill our contact form and click the send button.

Finally We will get a mail that looks like this.

Conclusion.

We have learned how to create and style a contact form in this article. With Formspree.io, we also learned how to make the form fully functional.

Tawk.to JavaScript API integration

Enock Isaac — Fri, 30 Sep 2022 10:08:14 +0000

Introduction.

Calls made by consumers from various time zones cannot be completed. Email responses take too long. The self-service options lack personalization and don't cover all possible scenarios.

Do you know what the alternative is? Live chat apps.

All customer needs are addressed by them. Firstly, they are convenient and easy to use. Second, online communication occurs in real time. Finally, troubleshooting is fast and personal.

These three factors made live chats the most popular way for customers and companies to communicate.

There's more to it. More than 60% of customers are likely to return to a business if they chatted with them online.

We'll cover how to build up a customer service interface on your website today.

What is Tawk.to

Tawk.to is a free JavaScript app with messaging and customer management features that provides an interface for you to easily communicate with your customers. Tawk.to added to your website for customer care purposes for free.

Prerequisite

To be able to follow along with this tutorial you need to have a website that is live running on a hosting platform.

Project Setup

First off we need to register for a Twak.to account here. Twak.to

Click on sign up free and create an account.

After creating and verifying your account.

Select your preferred language.

Now we would enter the details for our Property(Website in this case).

We are admin by default. We can also add other admin as Team members.

We will now click on done.

Now we will copy the Script from Tawk.to and paste it before the

A Beginner's Guide to Understanding React Native Stack Navigation

Enock Isaac — Fri, 30 Sep 2022 09:33:48 +0000

Introduction.

Building mobile applications is typically a fairly time-consuming process that entails developing for both iOS and Android. Android uses Java/Kotlin as its native language and iOS uses Objective C/Swift.

You must learn two languages, each of which has a challenging learning curve, in order to create a cross-platform mobile application. You can now create cross-platform mobile applications using a JavaScript library called React thanks to Facebook's release of React Native. With React Native, a single piece of code can be compiled for both iOS and Android.

Today's lesson will teach you how to set up a React Native project and employ a react Native library to efficiently switch between your mobile screens.

What is React native and React native stack navigation.

React Native is a JavaScript framework for creating natively rendered mobile applications for iOS and Android. React Native is Facebook's JavaScript library for building user interfaces, but instead of targeting browsers, it targets mobile platforms.

Thus, web developers can now create native-looking mobile applications using JavaScript, which they are already familiar with. Furthermore, since most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for Android and iOS.

Stack Navigator enables your app to transition between screens by stacking each new screen on top of the previous one. The stack navigator defaults to iOS and Android looks and feels: new screens slide in from the right on iOS, default animations on Android. You can, however, customize the animation to suit your needs.

Prerequisites

The first thing you need to do is install a text editor on your computer so that you can follow this tutorial. In this case, I will use Visual Studio Code. It's up to you which text editor you use. If you don't already have node installed on your machine you should install node. Install node here

Project Setup

To get started with this tutorial, create a folder named NavigationApp. Open the folder inside the text editor. VS Code in this case.

Click the Terminal in the View option on VS Code navigation.

Your VS code should have the terminal open like this.

We need to now set up the react native environment in our workspace which is the NavigationApp folder. We will be using expo in this project. Expo is a open source
Platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

For us to Set up react expo we will run this code

yarn global add expo-cli

expo init ./

After running the code in our terminal. Our Vs Code should look like this.

We will now choose the blank minimal workflow by pressing Enter on the keyboard.

Once Expo is set up Our VS Code will now look like this.

Moving on to the next step we will now go on to install some third party libraries by running the following code in the terminal

yarn add @react-navigation/native

yarn add @react-navigation/stack

yarn add react-native-elements

npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated @react-native-community/masked-view

Our package.json file should now look like this. Here we can see that the libraries we installed are visible in the package.json file.

We will now add this code to our babel.config.js file

plugins: ['react-native-reanimated/plugin'],

The babel.config.js file should now look like this

Next we will run this code in our app to start up expo

expo start

When we are developing with expo we are able to see our app live on our smartphone. We will now download the expo go app from our device App store(For iOS users) and Google Play Store( For Android users).

We will now scan the QR code in the terminal inside the expo go app. We should download the app from either the iOS app store or Android google play store The app should bundle up and load up the app right on our device in development mode. We get to see the app we are building right on our Smartphone. Isn't that cool?

After bundling our cross platform app should look like this.

Now we will open the app.js file inside the root directory folder. We will import react-native-gesture-handler and then import the NavigationContainer from @react-navigation/native using this code and wrap our app inside a tag. Our app.js file should now look like this.

import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
    </NavigationContainer>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Next we would create a folder in our root folder which in this case is NavigationApp called screens. This folder will carry the JavaScript files of the screens that will be displayed in the app.
Inside the screens folder will create two new files HomeScreen.js and SecondScreen.js. All this is done inside our VS Code editor.

Next we will install the es7+ react/redux/react-native extension. It should look like this

Inside our HomeScreen.js file we will type this shortcut code

rnfes

and click enter. Our HomeScreen.js file should now look like this.

You can now edit the content of the tag to whatever you want.

We would now repeat the process for the SecondScreen.js and save.

To continue we will now use the HomeScreen.js inside our App.js file, we will also import creatStackNavigator from @react-navigation/stack.

We will now create a Constant function called Stack and inside our app function, we will add the tag and also the tag.

The tag is a self closing component that will carry the name and component of all the pages in our app, in this case the HomeScreen and SecondScreen. Now we can see our HomeScreen as the first page that our App shows.

Now we are going to create a button with the tag which will be imported from react-native-elements that will have an onPress function to stack the next screen over the current screen. We will also add the { navigation } property to both the HomeScreen.js and SecondScreen.js file.

Our App.js file should now look like this

import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from "./Screens/HomeScreen";
import { createStackNavigator } from "@react-navigation/stack";
import SecondScreen from "./Screens/SecondScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      <Stack.Screen name ="Home" component = {HomeScreen} />
      <Stack.Screen name="SecondScreen" component = {SecondScreen}/>
      </Stack.Navigator>
    </NavigationContainer>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Our Homescreen code will look like this

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Button } from 'react-native-elements'

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>This is the HomeScreen</Text>

      <Button onPress={() => navigation.navigate("SecondScreen")} title="Switch to the second screen" />

    </View>
  )
}

export default HomeScreen

const styles = StyleSheet.create({})

Our SecondScreen code will look like this

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const SecondScreen = ({ navigation }) => {
  return (
    <View>
      <Text>SecondScreen</Text>
    </View>
  )
}

export default SecondScreen

const styles = StyleSheet.create({})

Now our HomeScreen should look like this when we bundle our app.

When we press the button the SecondScreen page would be stacked on top of the current screen and it would look like this.

Conclusion

In this article we have learnt how to set up a basic react-native cross-platform app that works on both Android and iOS platform using one codebase. We have also learnt how to install and use react–native libraries in our app, And how to create Text, button, and how to navigate between pages using react-native navigation.