contact.vue

<template>
    <v-container fluid class="pa-0">
        <v-row align="center" class="">
            <v-col cols="12" md="12" lg="12" sm="12" class="pa-0 mb-0">
                <div class="ma-1">
                    <div class="pa-5">
                        <p class="google-font mb-0" style="font-size:180%" align="center">Schedule your <span
                                style="color: #693b95; "><b>Free Session</b></span> today!</p><br>
                        <p class="google-font mt-0" style="font-size:95%" align="center">Fill out this form and one of
                            our Certified Consultants will reach out to you and schedule a call. We’ll discuss your
                            company and your goals, how we can help you, and then, together, we can determine if we are
                            a good fit to launch your company to success.</p>


                        <v-row justify="center">
                            <v-dialog v-model="dialog" persistent max-width="600px">
                                <template v-slot:activator="{ on }">
                                    <v-btn color="#693b95" dark v-on="on">Contact Us</v-btn>
                                </template>
                                <v-card>
                                    <v-card-title>
                                        <span class="headline">Contact Form</span>
                                    </v-card-title>
                                    <v-card-text>
                                        <v-container>
                                            <v-row>
                                                <v-col cols="12" sm="6" md="6">
                                                    <v-text-field label="First name*"
                                                                  v-model="fname"
                                                                  required
                                                                  :counter="20"
                                                                  :rules="fnameRules"
                                                    >
                                                    </v-text-field>
                                                </v-col>
                                                <v-col cols="12" sm="6" md="6">
                                                    <v-text-field label="Last name"
                                                                  v-model="lname"
                                                                  :counter="20"
                                                                  :rules="lnameRules"
                                                                  required>
                                                    </v-text-field>
                                                </v-col>

                                                <v-col cols="12">
                                                    <v-text-field label="Email*"
                                                                  v-model="email"
                                                                  :rules="emailRules"
                                                                  required>
                                                    </v-text-field>
                                                </v-col>
                                                <v-col cols="12">
                                                    <v-text-field label="Mobile*"
                                                                  v-model="mobile"
                                                                  counter="10"
                                                                  required>
                                                    </v-text-field>
                                                </v-col>
                                                <v-col cols="12">
                                                    <v-text-field label="Organization Name*"
                                                                  v-model="orgname"

                                                                  :counter="100"
                                                                  :rules="orgnameRules"
                                                                  required>
                                                    </v-text-field>
                                                </v-col>
                                                <v-col cols="12">
                                                    <v-text-field label="Message"
                                                                  v-model="mymessage"
                                                                  required>
                                                    </v-text-field>
                                                </v-col>


                                            </v-row>
                                        </v-container>
                                        <small>*indicates required field</small>
                                    </v-card-text>
                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
                                        <v-btn color="blue darken-1" text @click=" send()">Send</v-btn>
                                    </v-card-actions>
                                </v-card>
                            </v-dialog>
                        </v-row>

                    </div>
                </div>

            </v-col>


        </v-row>

    </v-container>
</template>

<script>
    import {concat} from 'bytebuffer';

    import axios from "axios";


    export default {
        name: "Compose",
        data: () => ({
            dialog: false,
            valid: true,
            fname: '',
            lname: '',
            orgname: '',

            orgnameRules: [
                v => !!v || ' Org Name is required',
                v => (v && v.length <= 100) || ' Org Name must be less than 100 characters',
            ],
            fnameRules: [
                v => !!v || 'Fist Name is required',
                v => (v && v.length <= 20) || 'Name must be less than 20 characters',
            ],
            lnameRules: [
                v => !!v || ' Last Name is required',
                v => (v && v.length <= 20) || 'Name must be less than 20 characters',
            ],
            email: '',
            emailRules: [
                v => !!v || 'E-mail is required',
                v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
            ],

            // form
            form: {

                mymessage: "",
                email: "",
                mobile: "",
                fname: "",
                lname: "",
                orgname: ""
            }
        }),


        methods: {


            message() {

                // sending message
                axios
                    .post(`<API ENDPOINT`, {

                        mymessage: this.mymessage,
                        email: this.email,
                        mobile: this.mobile,
                        fname: this.fname,
                        lname: this.lname,
                        orgname: this.orgname

                    });
                this.dialog = false
                    .then(response => {
                        console.log("Message sent");
                    })
                    .catch(error => {
                        log("Failed to send");
                    });
            },
            send() {
                if (this.message > 0) {
                    this.message();
                } else {
                    this.message();
                }
            },


        }
    };
</script>