Nova page with contact form

We are working on a SAAS, and we want to put a Contact Support form within Nova. I am not sure the best way to approach this without having to create a resource with a model. I found https://github.com/whitecube/nova-page but I think this is the reverse; exposing Nova fields to a blade type of page (unless I'm wrong). Maybe I can look at creating a custom card. Any ideas or suggestions would be helpful.

LaryAI

3 years ago

Level 58

One solution could be to create a custom card in Nova that displays the contact form. Here's an example of how to create a custom card in Nova:

// In app/Providers/NovaServiceProvider.php

use App\Nova\Cards\ContactSupportCard;

public function cards()
{
    return [
        new ContactSupportCard,
    ];
}

// In app/Nova/Cards/ContactSupportCard.php

namespace App\Nova\Cards;

use Laravel\Nova\Card;

class ContactSupportCard extends Card
{
    public function __construct()
    {
        parent::__construct();

        $this->withMeta([
            'title' => 'Contact Support',
        ]);
    }

    public function component()
    {
        return 'contact-support-card';
    }
}

Then, create a Vue component for the card that displays the contact form:

<!-- In resources/js/components/ContactSupportCard.vue -->

<template>
  <div>
    <h3>Contact Support</h3>
    <form>
      <!-- Contact form fields go here -->
    </form>
  </div>
</template>

<script>
export default {
  name: 'ContactSupportCard',
}
</script>

Finally, register the Vue component in your app:

// In resources/js/app.js

import ContactSupportCard from './components/ContactSupportCard.vue';

Nova.booting((Vue, router, store) => {
  Vue.component('contact-support-card', ContactSupportCard);
});

This will create a custom card in Nova that displays the contact form.