foreign-sapphire•15mo ago
how to build a custom form
im following this youtube video which goes over some instrutions from voiceflow on how to make a custom form but it completely skips over the part with passing the data with the JSON segment, can someone help me here, i got the form popping up with fields but cant pass the data
https://www.youtube.com/watch?v=pcMYrlPaIa8
33 Replies
You need to use a javascript block right after the custom action and you can capture the data from the custom action using last_event.
foreign-sapphireOP•15mo ago
this is what I have so far
that will not work
foreign-sapphireOP•15mo ago
thanks for your help I have been stuck on this for 2 days
create a VF variable called something like "form_data"
let me see your extension code
foreign-sapphireOP•15mo ago
export const FormExtension = {
name: 'Forms',
type: 'response',
match: ({ trace }) =>
trace.type === 'ext_form' trace.payload.name === 'extform',
render: ({ trace, element }) => {
const formContainer = document.createElement('form')
formContainer.innerHTML = `
<style>
label {
font-size: 0.8em;
color: #888;
}
input[type="text"], input[type="email"], input[type="tel"] {
width: 100%;
border: none;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
background: transparent;
margin: 5px 0;
outline: none;
}
.phone {
width: 150px;
}
.invalid {
border-color: red;
}
.submit {
background: linear-gradient(to right, #2e6ee1, #2e7ff1 );
border: none;
color: white;
padding: 10px;
border-radius: 5px;
width: 100%;
cursor: pointer;
}
</style>
<label for="name">Name</label>
<input type="text" class="name" name="name" required><br><br>
<label for="email">Email</label>
<input type="email" class="email" name="email" required pattern="[a-z0-9.%+-]+@[a-z0-9.-]+.[a-z]{2,}$" title="Invalid email address"><br><br>
<label for="phone">Phone Number</label>
<input type="tel" class="phone" name="phone" required pattern="\d+" title="Invalid phone number, please enter only numbers"><br><br>
<input type="submit" class="submit" value="Submit">
`
formContainer.addEventListener('submit', function (event) {
event.preventDefault()
const name = formContainer.querySelector('.name')
const email = formContainer.querySelector('.email')
const phone = formContainer.querySelector('.phone')
if (
!name.checkValidity()
!email.checkValidity() ||
!phone.checkValidity()
) {
name.classList.add('invalid')
email.classList.add('invalid')
phone.classList.add('invalid')
return
}
formContainer.querySelector('.submit').remove()
window.voiceflow.chat.interact({
type: 'complete',
payload: { name: name.value, email: email.value, phone: phone.value },
})
})
element.appendChild(formContainer)
},
}
In the custom action, change the path to "complete"
foreign-sapphireOP•15mo ago
ok i did it
did you copy the text I sent into the javascript block?
foreign-sapphireOP•15mo ago
should work
foreign-sapphireOP•15mo ago
wow it's working thank you so much
can I send you a tip or something
how can I connect it to the webhook ?
i see the coffee link ❤️
You can give em a shoutout here: https://discord.com/channels/1079548823610871889/1149727345549262931
webhook?
foreign-sapphireOP•15mo ago
so I can take the form data and send it to zapier/make
Use an API step
foreign-sapphireOP•15mo ago
foreign-sapphireOP•15mo ago
foreign-sapphireOP•15mo ago
that should work.
foreign-sapphireOP•15mo ago
YES! 🙂
THANK YOU SOOOOOOOOO MUCH
why do you want to do that?
send an email?
foreign-sapphireOP•15mo ago
I have a form in my chat widget, it's so I can collect leads phone and name, then that data will be sent to my clients CRM
zapier is so I can send it to the clients CRM
ah
foreign-sapphireOP•15mo ago
is it possible to have the user type in an address and have it auto corrected using google maps API?
you can use the api step to send it straight to the crm using their api
sure
foreign-sapphireOP•15mo ago
tyvm
you just need to use the api step to use the google api
foreign-sapphireOP•15mo ago
the primary landing page has a form with address input that auto corrects, this would be nice to have in the chat widget
foreign-sapphireOP•15mo ago
sure
foreign-sapphireOP•15mo ago
any guidance on how to do it?
never done it, but the google maps api docs would be a place to start.
foreign-sapphireOP•15mo ago
I'm going to skip it for now because I'm sure it's too complicated for me
can I pay you to help me with it?
probably better left to skip it lol
tyvm.....<3<3