21K Views

convenient contact forms

In this Blog, I described how to use an embeddable contact form on your website, web page or blog.
If you are looking to setup copy and paste embeddable form for handling customer queries. Then you are at right place.

Need of contact forms

The embeddable contact form is a great way to display a contact form anywhere on your site. Most of the websites have a contact form or any other kind of form for handling customer queries.
If you have a website and you are not using any contact forms(s). Then think twice.
because Contact form can be used for all sort of communication. Whether it be an Official message, Query about some product, or maybe just some random weather chat.
Let’s say you want to setup one on your website.

Problem:

Even if you want a contact form, it is quite tedious to maintain all those queries and then respond to all those queries.
But how One can easily setup such form(s). The first thought that comes to mind is to create a form from scratch then maybe email that data to some email address then filter mail to find that data then reply. Lot’s of work.
What if there is an easy solution, like copy paste some code & bam all those queries, are at one place and I can easily reply them while eating snacks.
But this solution doesn’t exist, does it?
Yes, it exists. That what’s this blog is about.

Better way to create forms:

All you need to do is to sign up here or login to your UVdesk helpdesk account.
Goto App section, install Formbuilder app, Add new Form, save the form and Copy Embed code and paste it on your website. That’s it, you have successfully setup contact/query form solution for your customers. Now all queries/questions via that form will be converted to ticket(s) on your UVdesk support center. Then, you can login to your support admin panel and manage all customer queries/questions. You can also do awesome stuff like automate response to customer(s) and reply from there.

More about these Forms:

Formbuilder app provides embeddable code in two forms, namely JS version and iframe version. You can use any version. Anyone can easily customize these forms using formbuilder app from his UVdesk support system, like add new fields.

Customize these forms:

JS version:

js version code from formbuilder app usually looks like

<div id="uv_top_message" class="uv_load">
<img src="https://cdn.uvdesk.com/bundles/webkuldefault/images/cssImages/loader.gif">
</div><script id="18358cbc39990bf058cbc39990c97" src="https://mydomain.uvdesk.com/apps/form-builder/en/form/18358cbc39990bf058cbc39990c97" async > </script> 
<style>.uv_load{min-height:400px;margin:0 auto}.uv_load img{position:relative;margin-top:25%}.uv_form .optionwrapper span,.uv_form label{margin-right:10px}.uv_form .optionwrapper label{display:inline-block;}.uv_form select{display:inline-block;background-color:#fff}</style>

changing loader:

you can replace https://cdn.uvdesk.com/bundles/webkuldefault/images/cssImages/loader.gif with any loader image of your choice.

changing form look or CSS:

If you are familiar with CSS then you can change part between style tag <style>this part</style>
with any CSS of your choice.

remove placeholders for input fields:

By default js forms contains placeholders for input fields, if you don’t want placeholders, Then you can pass ?removePlaceholders=1 parameter to remove placeholder(s) like
Replace

<script id="c97" src="https://mydomain.uvdesk.com/apps/form-builder/en/form/c97" async </script>

with src with get parameter ?removePlaceholders=1 like:

<script id="c97" src="https://mydomain.uvdesk.com/apps/form-builder/en/form/c97?removePlaceholders=1" async </script>

Iframe version:

Iframe version code usually looks like

<iframe width="500px" height="800px" style="border:none;" src="https://mydomain.uvdesk.com/apps/form-builder/en/form/html/c97" ></iframe>

change iframe height and width:

you can change iframe height and width width=”500px” height=”800px” to any suitable height or width.

change iframe CSS:

if you want to apply your CSS in iframe then you can pass css parameter to iframe src with urlencoded css value.

Example:

If you want to apply given css

#create-ticket-btn{background-color:#a2c422;}#create-ticket-btn:hover{background-color:#99bd60}

to iframe form with code then modify iframe version code

<iframe width="500px" height="915px" scrolling="no" id="uv-mamme-iframe" style="border:none; overflow:hidden;" 
src="https://mydomain.uvdesk.com/apps/form-builder/en/form/html/f59></iframe>

by sending urlencoded css in css parameter of iframe src

<iframe width="500px" height="915px" scrolling="no" id="uv-mamme-iframe" style="border:none; overflow:hidden;" 
src="https://mydomain.uvdesk.com/apps/form-builder/en/form/html/f59?style=%23create-ticket-btn%7Bbackground-color%3A%23a2c422%3B%7D%23create-ticket-btn%3Ahover%7Bbackground-color%3A%2399bd60%7D"></iframe>

 

What’s more?

For any more info about these awesome form(s), you can contact us or leave a comment about anything.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php