Button action in HTML block

Support
1

How do I turn this into a button that goes to a link?

            @click="model.selectedIcon = 'mobile'"

This is what the button looks like: https://toshiba.drivesavers.com/#/form/FR_019048ED-259F-EB46-ADDF-9A6A0B4CB2ED

(I still have to space the elements appropriately.)

2

I ended up adding an anchor tag to the actual text. If you have a better idea let me know.

3

Anchor tags are a great way to have links to other pages. If you want to use the path action written in JSON, simply create a named action that contains that path action, an call the named action within the @click like so:
@click="namedAction('yourNamedAction')"

Learn more about named actions on this page of the documentation.

1 Like
4

Thank you so much. I knew there had to be something neater. So tell me is this native HTML or Vue or what and how can I look this up next time?

5

It’s a mix of things. @click is a Vue shortcut. The “namedAction” part of the code is a JavaScript function that is exposed by BetterForms.

This forum is designed to archive things, so you can always reference things here or the page in the documentation that I linked to above.

6

Ok, I thought I did it right, but the button is not a button, so it seems like maybe I should have the button element somewhere just not sure where.

<div class="content ">
    <table>
        <tr class="height: 40px !important; text-4xl text-white-800">
            <td colspan="1">
                <img src="https://drivesaversdatarecovery.com/wp-content/uploads/2018/07/ds-logo-ret2x.png" width=122px>
            </td>
            <td class="p-20 text-4xl text-white">
                <p style="font-family: 'Teko', sans-serif; font-size: 48px; font-weight: bold">TOSHIBA AND DRIVESAVERS
                    HAVE PARTNERED UP TO HELP YOU RECOVER YOUR DATA</p>
            </td>
        </tr>
        <tr style="height: 10px !important;"></tr>
        <tr>
            <td colspan="2">
                <p style="font-family: 'Open Sans' ;">
                    <span class="text-lg font-semibold text-white">DriveSavers wants to help you recover your data. We
                        have </span>
                    <span class="text-lg font-semibold text-red-600">partnered with Toshiba</span>
                    <span class="text-lg font-semibold text-white"> to make this experience flow smoothly. You can call
                        us and we will gather the information we need or you can submit the info and we will follow up
                        with you.</span>
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="1">
                <div class="block text-white ">
                    <div class="inline-block w-64 h-16 m-2 rounded bg-red-600 hover:shadow-md hover:text-white" :class="
{
'bg-red-500 border-red-500 shadow-md text-white' : model.selectedIcon == 'mobile',
'hover:bg-gray-900 ' : model.selectedIcon != 'mobile'

}
" @click="">
                        <br>
                        <div class="px-3 font-semibold text-2xl">
                            <i class="fa fa-phone"></i> 1 (866) 702-4638
                        </div>
                    </div>
                    <div class="inline-block w-64 h-16 m-2 rounded bg-red-600 hover:shadow-md hover:text-white" :class="
{
'bg-red-500 border-red-500 shadow-md text-white' : model.selectedIcon == 'mobile',
'hover:bg-gray-900 ' : model.selectedIcon != 'mobile'

}
" @click="namedAction('goToForm',{id: 'FR_3A44CD1A-3E7C-B14F-9CAD-A9E37733E1C1'})">
                        <br>
                        <div class="px-3 font-semibold text-2xl text-white">
                            <i class="fa fa-pencil"></i> Request a Quote
                        </div>
                    </div>
                </div>
            </td>
            <td colspan="1">
                <ul class="space-y-1 list-disc list-inside text-white font-semibold ">
                    <li>Free Evaluation</li>
                    <li>Free Shipping</li>
                    <li>No Data — No Charge</li>
                </ul>
            </td>
        </tr>
    </table>
</div>
7

At first glance this code looks fine, you can have an @click on a div it doesn’t have to be a button. What exactly isn’t working in this code? You need to provide a bit more context about the problem, or possibly also the namedAction that you’re trying to call.

8

This is what I want:

  @click="namedAction('goToQuote: [{
    action: path,
    options: {
        path: /quote})"

But I am sure I should escape the double quotes that I removed.

This is the original:

"goToMyAccount": [{
    "action": "path",
    "options": {
        "path": "/account"
    }
9

You should be defining your named actions in the Misc tab of your page, not inline with the @click. Please check the link to the docs that I posted for an example of this. There’s also an example page that you can inspect in the editor if you search for “Named Actions”

1 Like
10

Thank you. That bit was missed. Okay, got it working. I wanted to add a pointer to the HTML and I added

cursor-pointer

to the div, and that broke the page. If I remove it it’s working. Any ideas?