Streaming live at 10am (PST)

Create Zendesk tickets with standard Webflow contact form


#1

Hi guys,

I am pulling my hair out and hope someone can help.

  1. What I wanted to achieve:

A. If a user submits the CONTACT US form I automatically want to create a Zendesk ticket.

B. The standard field validation and submission SUCCESS or ERROR onscreen message of the standard Webflow form should continue to work.

  1. What I achieved so far in my test environment:

A submission from the website CONTACT US creates a Zendesk ticket. HURRAY!!!

I achieved that by:

A. renaming the fields in my index.html as follows:

<div class="w-form form-wrapper">
<form id="email-form" method="POST" action="former.php" name="email-form" data-name="Email Form">
<input class="w-input text-field" id="name" type="text" placeholder="Enter your name" name="z_name" data-name="Name" required="required">
<input class="w-input text-field" id="email" type="email" placeholder="Enter your email address" name="z_requester" data-name="Email" required="required">
<input class="w-input text-field" id="Subject" type="text" placeholder="Subject" name="z_subject" data-name="Subject" required="required">
<textarea class="w-input text-area" id="Message" placeholder="Write message" name="z_description" required="required" data-name="Message">
</textarea><input class="w-button newsletter-button" type="submit" value="Submit" data-wait="Busy sending..." wait="Busy sending...">
</form>
<div class="w-form-done success-message">
<p class="success-font">Thank you!
<br>Your submission has been received.</p>
</div>
<div class="w-form-fail error-message">
<p class="error-font">Oops! Something went wrong while submitting the form :(</p>
</div>
</div>

B. Adding an action called: action=“former.php" and

C. Added the PHP file to the server with the following code:

<?php
define("ZDAPIKEY", "My Zendesk API Key");
define("ZDUSER", "My Zendesk User Name");
define("ZDURL", "My Zendesk Subdomain");

function curlWrap($url, $json)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
curl_setopt($ch, CURLOPT_MAXREDIRS, 10 );
curl_setopt($ch, CURLOPT_URL, ZDURL.$url);
curl_setopt($ch, CURLOPT_USERPWD, ZDUSER."/token:".ZDAPIKEY);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
curl_setopt($ch, CURLOPT_USERAGENT, "MozillaXYZ/1.0");
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$output = curl_exec($ch);
curl_close($ch);
$decoded = json_decode($output);
return $decoded;
}
foreach($_POST as $key => $value)
{
if(preg_match('/^z_/i',$key)){
$arr[strip_tags($key)] = strip_tags($value);}
}
$create = json_encode(array('ticket' => array('subject' => $arr['z_subject'], 'comment' => array( "value"=> $arr['z_description']), 'requester' => array('name' => $arr['z_name'], 'email' => $arr['z_requester']))));
$return = curlWrap("/tickets.json", $create);
?>

  1. What does not work:

A. The form does not validate the input anymore, like it did previously.

B. The user does not get the SUCCESS or ERROR confirmation within the CONTACT US section.

C. A new tab will be opened with a blank white page instead of staying on my CONTACT US page with SUCCESS or ERROR message.

It seems like with adding the .php ACTION the form validation does not work anymore.

  1. QUESTION:
    What do I have to do that the form performs all standard Webflow functionalities (validation, SUCCESS ERROR message) when using the PHP Action?

In other words:

A. The fields get validated again.

B. Submission is not possible if the entries are incorrect or incomplete.

C. The user stays on the page section and gets shown the onscreen SUCCESS or ERROR.

I feel I am very close to the final solution as it seems all info is already there.

Thanks in advance.
Cai


Here is my public share link: LINK
(how to access public share link)


#2

I can't offer any help in regards to your specific implementation. But on the off chance you have a paid Zapier account, they have some 'Zaps' to create Zendesk tickets from Webflow form submissions.

https://zapier.com/app/explore?services=webflow,zendesk


#3

Hi @Phoxic, thanks for the fast reply. I don't have a paid Zapier account yet.

Just to clarify: I need a paid Zapier but the Webflow account can be on the free version? I was under the impression it has to be the other way around?


#4

Yeah, by the looks of it your Webflow account can be the free version, but in order to use the Zendesk 'Zaps' you will need a paid version of Zapier as Zendesk is considered a 'Premium' app and you can't use the Zaps on a free account. Hopefully that makes sense.


#5

Absolutely. Thanks so much @Phoxic
I'd rather want to achieve this with coding as opposed to paid Zaps. This is such a basic functionality.


#6

Hi @Cai, I haven't taken a close look at this yet, but from what this Zendesk Help Article explains you'll need to:
(1) Use this form structure as a basis for your custom form.
(2) Use this php script as a basis for your custom form handling script and store it on your server

From what it sounds like, your best option is to (a) manage your form handling outside of Webflow or (b) use our Zapier integration to send form data to Zendesk


#7

Hi @thewonglv,
Thanks for your Input. That's exactly what I did and the ticket creation in Zendesk works just fine. The only problem is that the field validation and final on-screen SUCCESS/ERROR confirmation does not work anymore and that the PHP script sends the user to a blank white page after submitted contact request/Zendesk ticket creation. I somehow needed to get this running again, then I am utterly happy.
The Zapier route seems to be too pricy for such a basic functionality as I need a paid account.

Any idea how I can get the standard field validation and final SUCCESS/ERROR confirmation of the standard Webflow form working when using a PHP script as HTML action?


#8

Hi Will,
Thanks for your email reply.

Currently on my website:
Please have a look at this screencast, which shows the "regular" field validation and final SUCCESS confirmation of the standard Webflow Form. It then creates a submission entry in my account but because it's a free account I don't receive email notifications and I can't download them.

Currently in my test environment:
Please have a look at this screencast, which per above description creates a Zendesk ticket after I have changed the HTML code (field names and action) and added the .PHP file.

Ideally I want to have the form validation and SUCCESS confirmation as per current website, while using the custom Zendesk ticket creation within my test environment.

Does that make sense?


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.