<html> <head> <script> function signUp() { document.getElementById('verify').style.visibility = "visible"; document.getElementById('sign up').style.visibility = "hidden"; } </script> <title>Sign up Form</title> </head> <body> <form action="First URL" method="POST" target="_blank" id="sign up"> <div> <label for="firstName">Your First Name</label> <input name="firstName" id="firstName" value="David"> </div> <div> <label for="lastName">Your Last Name</label> <input name="lastName" id="lastName" value="Brown"> </div> <div> <label for="phone number">Your Phone Number</label> <input name="phone number" id="phone number" value="+4989202451100"> </div> <div> <label for="emal">Your Email</label> <input name="email" id="email" value="support@tyntec.com"> </div> <div> <button onclick="signUp()">Submit </button> </div> </form> <form action="Second URl" method="POST" target="_blank" id="verify" style="visibility: hidden;"> <div> <label for="code">Your One-Time Password</label> <input name="code" id="Code" value=""> </div> <div> <label for="phone number">Your Phone Number</label> <input name="phone number" id="phone number" value="+4989202451100"> </div> <div> <button>Submit</button> </div> </form> </body>
You will need
- Your tyntec API key from your tyntec account
- A Zapier account (you need an active Trial or a professional plan with Premium features for work with webhooks)
- A testing Hubspot account
- A testing HTML Form
- A testing phone number to receive OTP
- Your Favorite Text editor
Step One: Create a submission form
For your quick start with Zap, we’ve prepared a sample HTML code.
It contains two similar forms (the signup form and the verification code form) that send user input to given URL addresses. In your Text editor, create a new HTML file and paste the following code.
Disclaimer: The following code is for testing purposes only.
Note: If you are using custom forms, make sure to always have a testing phone number value filled in the sign-up form, otherwise the first Zap won't work. The second Zap won't work if the second form doesn't send a phone number and OTP code values.
Step Two: Create a Zap for sending OTP and adding a placeholder contact
Let's start with creating a Zap that receives information from your HTML form, sends OTP, and creates an inactive contact in Hubspot.
1. In your Zapier menu, click on the black Make a Zap button.
2. Choose your Trigger. Select the premium Webhook app from Zapier in the right column.




If this is your first time using the tyntec Two-Factor Authentication app, you will need to authorize it. Click on the Sign-in button and input your tyntec API key. Otherwise, select your account and click Continue.
5. In the Set up action step, click into the Phone Number field and select the Phone Number variable that holds the value from your Trigger. Click Continue.


If this is your first time using the Hubspot app, you will need to authorize it. Click on the Sign-in button and log in to your Hubspot account. Otherwise, select your account and click Continue.
7. In the Set up action step, you will need to add which values should be saved into your Hubspot. Start with Contact Activity Status and set it to Inactive.




Congratulations! Your Zap will now automatically run when the Trigger detects a new Form submission via the Post Request.
Step Three: Create a second Zap for verifying OTP and updating the contact
Let's start with creating Zap that handles verifying the user's account and updates Hubspot contact.
1. Choose your Trigger. Select the premium Webhook app from Zapier in the right column. In the Trigger Event, select Catch Hook. Click Continue. In the Set up Trigger step, enable the Silent mode and copy the Custom Webhook URL. You will need it later to send your form data. Click Continue.





5. Now you may test your Action. In that case, Zapier will try to find a Contact by the given phone number. Click Continue.
6. Click the blue and white plus button to add the next Action. Search for tyntec Two-Factor Authentication and select it. In the Action Event, select Verify One-Time Password and click Continue. Select your tyntec account and click Continue. In Set up action, set the One-time Password ID to Contact information: Fax Number and One-time Password Code to the Code variable from your Trigger. Then click Continue.

If the verification is successful, the Zap continues to the next step. If not, it fails here.
7. Click the blue and white plus button to add the next Action. Search for Hubspot and select it. In the Action Event, select Update Contact and click Continue. Choose your account, then click Continue.
8. In Set up action, set the Object ID to the ID variable from Find Contact.



Congratulations! Both of your Zaps are now online and waiting on new users.
Step Four: Test your Zaps
Let's try triggering your Zaps.
Start with updating your forms with Zapier Custom URLs. Open the HTML file in your favorite editor and change the action value of the first form (sign up) to the First Zap Custom URL and also the action value of the second form (verify) to the Second Zap Custom URL.
<form action="https://hooks.zapier.com/hooks/catch/XX/YYY/silent/" method="POST" target="_blank" id="sign up"> <form action="https://hooks.zapier.com/hooks/catch/XXX/ZZZ/silent/" method="POST" target="_blank" id="verify" style="visibility: hidden;">




Congratulations, all your new sign-ups are now secured with two-factor authentication.
More?
The main power of the Zapier App is that you can connect it with any other Zapier App. You can add two-factor authentication to your Google Forms, Typeforms, or to e-commerce platforms (like Shopify).
To scale this integration, you could add a resend button to the verification form. That would use the Resend One-Time Password action. Alternatively, you can store the OTP ID as a cookie or on your website, which would allow you to move the creating contact action into 2nd Zap. Another quality of life improvement you could do is automatically delete inactive contacts in Hubspot if the verification fails.