Skip to main content
Answered

Custom design forms via API

  • 3 February 2022
  • 6 replies
  • 359 views

Hello,

Is it possible to use Type form API to create custom design forms? E.g. type form customization is not enough, we would wish to do some customization yourself, to improve UX of our forms, is that possible?

As even forms are really amazing, there are still places to improve for better experience.

 

6 replies

Userlevel 7
Badge +5

Hello @ValdemarQ you can use Create API to build typeforms and themes programatically. However the API capabilities are constrained by what is also available in the builder (when you create typeforms manually in your account).

If you want to build a form completely by yourself, unfortunately we do not support automated submissions.

Userlevel 5
Badge +2

Hello @mathio, thanks, that is great.

At least dispaly styles and flows are not limited :) 
 

What do you mean by automated submissions?

Also, we are able via hidden fields collect some other information like IP address and anything we want and add it to the forms, right?

Userlevel 7
Badge +5

Yes, you can pass any data you want via hidden fields when you embed your typeform into a website:

What do you mean by automated submissions?

You respondents need to click the submit button at the end of the form. While there are many options to automate things with typeform, form submissions are not one of those things.

Hello @mathio 

Although this thread is very old, let me reopen it to ask you a question. I have the same problem as @ValdemarQ , I would like to include TypeForms in my website but with a custom design. After reading your answers, I understand that the TypeForm API does not allow automated submissions, so the respondent has to manually click on the button.

I have found that I can create my custom form and then use the data from that form to pre-populate a Typeform. I can do this by generating a URL for the Typeform form with pre-filled values based on the data, which is something like this:
 
  const typeformUrl = `https://yourtypeformurl.typeform.com/to/yourtypeformid?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`;

  window.location.href = typeformUrl;

When the user submits my form, they will be redirected to the Typeform form with the name and email fields pre-filled with the values they already filled in, and there they will see the submit button.

So I wonder, would it be possible to make my custom form and then pass the data to the TypeForm form using hidden fields, so that at the end only the submit button is shown? That is, that at the end all the fields with the collected data are not shown again, but hidden and only the submit button is shown (but all of them are sent when the responder clicks submit). Is there any way to do something like that?

 Hello again

I wanted to share here that I have finally found a way to do it. I have created a form with a single ‘statement’ field. The ‘statement’ field only shows a message and a ‘continue’ button, if that is the only field on the form, the ‘continue’ button is replaced by a ‘submit’ button.
Then I added some hidden fields to that form, and I hid the iframe where it is embedded through CSS.

So when the responders load the web, they will just see my custom form. They will fill it in and click on my custom submit button.

Then the data is filled in the hidden fields of the TypeForm via javascript. For that I simply update the URL of the iframe adding the values to the hidden fields and reload it. Then I update the CSS class via  javascript again to show the iframe (and hide my custom form). The TypeForm appears showing only a confirmation message and a submit button. When the user clicks the button, all the data is sent to my TypeForm account

Userlevel 7
Badge +5

Hello @pablorica 

that is some very nice out of the box thinking! Even though this is not the primary use case and the intended approach, I am pleased to see hackers like you coming up with new and innovative ways to build things using their typeforms.

If you dont mind, would you please share the link to your custom solution so others can have a look and get inspired? Thanks.

Reply