WordPress.org
Get WordPress

Plugin Directory

Changeset 3748754


Ignore:
Timestamp:
10/15/2026 02:36:23 PM (10 days ago)
Author:
zoho
Message:

Refreshed the Zoho Forms plugin with a new look for embedding forms. Hereafter by default, shortcodes will be saved as javascript embedding.

Location:
zoho-forms
Files:
28 added
12 deleted
15 edited
2 copied

Legend:

Unmodified
Added
Removed

  • zoho-forms/tags/5.0/readme.txt

    r3729093 r3748754  
    55Tags: contact form, form builder, custom form, forms, form plugin
    66Requires at least: 2.8
    7 Tested up to: 7.1
    8 Stable tag: 4.1
     7Tested up to: 7.1.3
     8Stable tag: 5.0
    99License: GPLv2 or later
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    230230== Changelog ==
    231231
     232= 5.0 =
     233
     234* Refreshed the Zoho Forms plugin with a new look for embedding forms.
     235
    232236= 4.1 =
    233237
    234238* Upgraded the Zoho Forms block to Block API version 3 for compatibility with the iframe-based block editor.
    235 
     239* Fixed the Zoho Forms block not working in the block editor from WordPress 7.1.
    236240= 4.0.4 =
    237241
    … …  
    292296== Upgrade Notice ==
    293297
    294 = 4.1 =
    295 
    296 * Required for WordPress 7.1 and later: the Zoho Forms block now supports the iframe-based block editor (Block API version 3).
    297 
    298 = 4.0.4 =
    299 
    300 * Enhanced iframe and JavaScript code of forms with required browser permissions and WCAG attributes.
     298= 5.0 =
     299
     300* Refreshed the Zoho Forms plugin with a new look for embedding forms.

  • zoho-forms/tags/5.0/tinymce/zforms_dailog.css

    r3729081 r3748754  
    407407    padding: 0 20px;
    408408}
    409 .intArrow {
    410     border-bottom: 1px dashed #afafaf;
    411     font-size: 13px;
    412     font-weight: 300;
    413     width: 75px;
    414     position: relative;
    415     margin-left: 15px;
    416     margin-right: 15px;
    417     display: inline-block;
    418     float: left;
    419     vertical-align: middle;
    420     top: 15px;
    421     margin-left: 20px;
    422     margin-right: 20px;
    423 }
    424 .intArrow .arrowImg {
    425     background: url(paramtrArrow.jpg) no-repeat;
    426    width: 5px;
    427     height: 10px;
    428     display: block;
    429     top: -4px;
    430     position: absolute;
    431     right: 0;
    432     opacity: 0.8;
    433 }
    434409.fiedPropPlus, .fiedPropMinus{
    435410   width: 24px;
    436411   height: 24px;
    437    background: url(fieldprop-plus.png) no-repeat;
     412   background: url(../images/fieldprop-plus.png) no-repeat;
    438413   background-size: contain;
    439414   margin-top: 2px;
    … …  
    443418}
    444419.fiedPropMinus {
    445     background: url(fieldprop-minus.png) no-repeat; background-size: contain;
     420    background: url(../images/fieldprop-minus.png) no-repeat; background-size: contain;
    446421    margin-left: 8px;
    447422}

  • zoho-forms/tags/5.0/tinymce/zforms_dailog.js

    r3729081 r3748754  
    9494        var embedType = $("#zf_embedCatogory").val();
    9595        if(embedType == "formPerma"){
    96                 var perma_link = document.getElementById("permalink").value;
     96                var perma_link = $.trim(document.getElementById("permalink").value);
    9797                if(perma_link.length==0)
    9898                {
    9999                        document.getElementById("permaLinkError").style.display="block";
    100100                        document.getElementById("permaLinkError").innerHTML="Please enter your form's public link.";
    101                         document.getElementById("permaContainer").classList.add("errorCont");
     101                        document.getElementById("permaContainer").classList.add("zf-wb-errorCont");
     102                        return;
     103                }
     104                if(perma_link.toLowerCase().indexOf("https://") !== 0)
     105                {
     106                        document.getElementById("permaLinkError").style.display="block";
     107                        document.getElementById("permaLinkError").innerHTML="Enter a valid permalink Url";
     108                        document.getElementById("permaContainer").classList.add("zf-wb-errorCont");
    102109                        return;
    103110                }
    … …  
    109116                        document.getElementById("formSelectionError").style.display="block";           
    110117                        document.getElementById("formSelectionError").innerHTML="Please select a form.";
    111                         document.getElementById("selctContainer").className= "errorCont";
     118                        document.getElementById("selctContainer").classList.add("zf-wb-errorCont");
    112119                        return;
    113120                }
    … …  
    126133                                if(!paramKeyRegex.test(paramKey)){
    127134                                        hasError = true;
    128                                         $(elem).find("input[elname=paramKey]").parent("div").addClass("errorCont");
     135                                        $(elem).find("input[elname=paramKey]").parent("div").addClass("zf-wb-errorCont");
    129136                                }
    130137                                if(paramKey!='' && paramVal!=''){
    … …  
    140147                        }
    141148                }
    142                 var formWidth = document.getElementById('width');
     149                var formWidth = document.getElementById('formWidth');
     150                var widthUnit = $("#formWidth").closest(".embedInputCont").find("i.selected").attr("size_symbol") || "%";
    143151                if(formWidth.value=="")
    144152                {
    145                         formWidth.value="100%";
    146                 }
    147                 var formHeight = document.getElementById('height');
     153                        formWidth.value="100"+widthUnit;
     154                }else if(!/(px|%)$/.test(formWidth.value)){
     155                        formWidth.value=formWidth.value+widthUnit;
     156                }
     157                var formHeight = document.getElementById('formHeight');
     158                var heightUnit = $("#formHeight").closest(".embedInputCont").find("i").attr("size_symbol") || "px";
    148159                if(formHeight.value=="")
    149160                {
    150                         formHeight.value="600px";
     161                        formHeight.value="600"+heightUnit;
     162                }else if(!/(px|%)$/.test(formHeight.value)){
     163                        formHeight.value=formHeight.value+heightUnit;
    151164                }
    152165                //insertContent(urlBuild,formWidth.value,formHeight.value);
    … …  
    170183                        tag +=' urlparams="'+urlParams+'"';
    171184                }
    172                 if($("#jsEmbed").is(":checked")){
    173                         tag +=' type=js';
    174                 }
    175                 if($("#autoHeightCB").is(":checked")){
     185                tag +=' type=js';
     186                if(!$("#autoHeightCB").is(":checked")){
    176187                        tag +=' autoheight=true'
    177188                }
    … …  
    203214        $("#chooseFormDiv").hide();
    204215        $("#embedActionsDiv").hide();
     216        selectMappingStep("choose");
     217}
     218
     219function selectMappingStep(step){
     220        if(step == "embed"){
     221                $("#chooseFormStep").addClass("is-selected");
     222                $("#configureEmbedStep").addClass("is-selected");
     223                setStepCompleted("#chooseFormStep", true);
     224                setStepCompleted("#configureEmbedStep", false);
     225        }else{
     226                $("#configureEmbedStep").removeClass("is-selected");
     227                $("#chooseFormStep").addClass("is-selected");
     228                setStepCompleted("#chooseFormStep", false);
     229                setStepCompleted("#configureEmbedStep", false);
     230        }
     231}
     232function setStepCompleted(stepSelector, completed){
     233        var $step = $(stepSelector);
     234        if(completed){
     235                $step.find("span[elname=stepNumber]").hide();
     236                $step.find("span[elname=tickIcon]").css("display", "");
     237        }else{
     238                $step.find("span[elname=stepNumber]").css("display", "");
     239                $step.find("span[elname=tickIcon]").hide();
     240        }
     241}
     242
     243function selectConnectionCard(card){
     244        $("#accessZohoFormsCard, #embedUsingPermalinkCard").removeClass("selected");
     245        $(card).addClass("selected");
     246}
     247
     248function proceedFromHome(){
     249        if($("#accessZohoFormsCard").hasClass("selected")){
     250                showChooseFormDiv();
     251        }else if($("#embedUsingPermalinkCard").hasClass("selected")){
     252                embedPerma();
     253        }
    205254}                       
    206255                       
    … …  
    210259        $("#zf_embedCatogory").val("formPerma");
    211260        $("#permaLinkDiv").show();
     261        $("#formSelectionDiv").hide();
    212262        $("#embedActionsDiv").show();
    213         if(document.getElementById("permaContainer").classList.contains("errorCont"))
    214         {
    215                 document.getElementById("permaContainer").classList.remove("errorCont");
     263        if(document.getElementById("permaContainer").classList.contains("zf-wb-errorCont"))
     264        {
     265                document.getElementById("permaContainer").classList.remove("zf-wb-errorCont");
    216266                document.getElementById("permaLinkError").style.display="none";
    217267        }
    … …  
    219269        //document.getElementById("permaLinkDiv").style.display="block";
    220270        document.getElementById("chooseFormDiv").style.display= "none";
    221         //document.getElementById("selectForm").classList.remove("selected");
    222        
     271        selectMappingStep("embed");
    223272}
    224273               
    225 function signin()
    226 {                               
    227         if(window.tinyMCE)
    228         {
    229                 var domainValue = $("#zForm_domain").val();
    230                 var formsUrl = getZohoURL(domainValue);
    231                 if(formsUrl !=""){
    232                         window.open(formsUrl+"/forms/login.html");
    233                         document.getElementById("refreshDiv").style.display="block";
    234                         document.getElementById("signinDiv").style.display="none";
    235                 }
    236         }                               
     274var signInTabOpened = false;
     275function openSignInTab(formsUrl){
     276        if(!signInTabOpened && formsUrl !=""){
     277                signInTabOpened = true;
     278                window.open(formsUrl);
     279        }
     280        $("#zDomaindiv").hide();
     281        $("#zfCreateFormDiv").hide();
     282        document.getElementById("zfRefreshDiv").style.display="flex";
    237283}
    238284function appendScript()
    … …  
    259305        $("#zf_tiny_homeDiv").hide();
    260306        $("#zf_embedCatogory").val("formSelect");
    261         //document.getElementById("selectForm").classList.add("selected");
     307        document.getElementById("permaLinkDiv").style.display= "none";
     308        if(a!="" && a.forms && a.forms.length > 0){
     309                $("#chooseFormDiv").hide();
     310                $("#formSelectionDiv").show();
     311                $("#embedActionsDiv").show();
     312                selectMappingStep("embed");
     313                return;
     314        }
    262315        document.getElementById("chooseFormDiv").style.display="block";
    263         document.getElementById("permaLinkDiv").style.display= "none";
    264         //document.getElementById("publicLink").className= "none";
    265316        showEmbedActionsDiv();
    266317}
    267318
    268319function proceedToSelectFormOnTinyMce(){
    269         var domainValue = $("#zForm_domain").val();
     320        var domainValue = $("#zf_domain").val();
    270321        if(domainValue == "-select-"){
    271                 $("#domainSelectionErr").show();
    272                 $("#domainSelectionDiv").addClass("errorCont");
     322                $("#domainErr").show();
     323                $("#zDomaindiv").addClass("zf-wb-errorCont");
    273324                return;
    274325        }
    275326        var formsUrl = getZohoFormsURL(domainValue);
    276327        if(formsUrl !=""){
     328                signInTabOpened = false;
     329                var refreshVisible = $("#zfRefreshDiv").is(":visible");
     330                var loaderElem = refreshVisible ? $("#refreshLoadingImgElem") : $("#connectLoadingImgElem");
     331                loaderElem.show();
    277332                getZohoFormsLisOnTinyMce(formsUrl);
    278                 $("#domainSelectionDiv").hide();
    279                 $("#refreshDiv").hide();
    280                 $("#loadingDiv").show();
    281333                setTimeout(function() {
    282                 $("#loadingDiv").hide();
     334                loaderElem.hide();
    283335                if(a==""){
    284                                 $("#signinDiv").show();
    285                         }else if(a.forms.length == 0){
    286                                 $("#createFormDiv").show();
     336                                openSignInTab(formsUrl);
     337                                return;
     338                        }
     339                $("#zDomaindiv").hide();
     340                $("#zfRefreshDiv").hide();
     341                if(a.forms.length == 0){
     342                                $("#zfCreateFormDiv").show();
    287343                        }else{
     344                                $("#chooseFormDiv").hide();
     345                                $("#permaLinkDiv").hide();
    288346                                $("#formSelectionDiv").show();
     347                                $("#embedActionsDiv").show();
     348                                selectMappingStep("embed");
    289349                        }
    290350                       
    … …  
    294354function getZohoFormsLisOnTinyMce(formsUrl){
    295355                        var apiURL = formsUrl+"/api/getforms?type=plugin";
    296                         $("#loadingDiv").show();
    297356                        getFormsAndIncludeScriptOnTinyMce(apiURL,addToFormListDropDown);
    298357                }
    … …  
    310369                                                formList.options.add(option);
    311370                                        }
    312                                         $("#zFormSelectDiv").show();
     371                                        if($("#formname").data("select2")){
     372                                                $("#formname").trigger("change.select2");
     373                                        }
     374                                        $("#chooseFormDiv").hide();
     375                                        $("#permaLinkDiv").hide();
     376                                        $("#formSelectionDiv").show();
     377                                        $("#embedActionsDiv").show();
     378                                        selectMappingStep("embed");
    313379                                }
     380                        }else{
     381                                openSignInTab(getZohoFormsURL($("#zf_domain").val()));
    314382                        }
    315383                }
    … …  
    369437}
    370438function hideDomainSelctError(){
    371         $("#domainSelectionDiv").removeClass("errorCont");
    372         $("#domainSelectionErr").hide();
     439        $("#zDomaindiv").removeClass("zf-wb-errorCont");
     440        $("#domainErr").hide();
    373441}
    374442
    375443function hideError()
    376444{
    377         if(document.getElementById("permaContainer").classList.contains("errorCont"))
    378         {
    379                 document.getElementById("permaContainer").classList.remove("errorCont");
     445        if(document.getElementById("permaContainer").classList.contains("zf-wb-errorCont"))
     446        {
     447                document.getElementById("permaContainer").classList.remove("zf-wb-errorCont");
    380448                document.getElementById("permaLinkError").style.display="none";
    381449        }
    382         if(document.getElementById("selctContainer").classList.contains("errorCont")){
     450        if(document.getElementById("selctContainer").classList.contains("zf-wb-errorCont")){
    383451                document.getElementById("formSelectionError").style.display="none";
    384                 document.getElementById("selctContainer").classList.remove("errorCont");
     452                document.getElementById("selctContainer").classList.remove("zf-wb-errorCont");
    385453        }
    386454}
    … …  
    391459{
    392460        document.getElementById("selectForm").classList.add("selected");
    393         if(document.getElementById("selctContainer").classList.contains("errorCont"))
    394         {
    395                 document.getElementById("selctContainer").classList.remove("errorCont");
     461        if(document.getElementById("selctContainer").classList.contains("zf-wb-errorCont"))
     462        {
     463                document.getElementById("selctContainer").classList.remove("zf-wb-errorCont");
    396464                document.getElementById("formSelectionError").style.display="none";
    397465        }
    … …  
    401469                if(a.forms.length==0)
    402470                {
    403                         document.getElementById("createFormDiv").style.display="block";
     471                        document.getElementById("zfCreateFormDiv").style.display="block";
    404472                        document.getElementById("chooseFormDiv").style.display="none";
    405                         document.getElementById("signinDiv").style.display="none";
    406473                }
    407474                else
    408475                {
    409476                        document.getElementById("chooseFormDiv").style.display="block";
    410                         document.getElementById("signinDiv").style.display="none";
    411477                }       
    412478        }
    413479        else
    414         {       
    415                
    416                 document.getElementById("signinDiv").style.display="block";
    417 
    418 
    419                                
     480        {
     481                openSignInTab(getZohoFormsURL($("#zf_domain").val()));
    420482        }
    421483        document.getElementById("permaLinkDiv").style.display= "none";
    422         document.getElementById("refreshDiv").style.display="none";
     484        if(a!=""){
     485                document.getElementById("zfRefreshDiv").style.display="none";
     486        }
    423487        document.getElementById("publicLink").className= "none";
    424488}
    … …  
    436500function createForm()
    437501{
    438         var domainValue = $("#zForm_domain").val();
     502        var domainValue = $("#zf_domain").val();
    439503        var formsUrl = getZohoFormsURL(domainValue);
    440504        if(formsUrl !=""){
    441505                window.open(formsUrl); 
    442                 document.getElementById("refreshDiv").style.display="block";   
    443                 document.getElementById("createFormDiv").style.display="none";
    444                 document.getElementById("signinDiv").style.display="none";
     506                document.getElementById("zfRefreshDiv").style.display="flex";   
     507                document.getElementById("zfCreateFormDiv").style.display="none";
    445508        }
    446509}
    … …  
    454517                var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    455518                $(newParam).removeAttr("elname");
    456                 $(newParam).show();
     519                $(newParam).css("display", "");
    457520                $(paramsDiv).append($(newParam));
    458521                $(urlParamsDiv).slideDown();
    … …  
    465528        var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    466529        $(newParam).removeAttr("elname");
    467         $(newParam).show();
     530        $(newParam).css("display", "");
    468531        $(newParam).insertAfter($(elem).parent().parent("div[eltype=keyValPair]"));
    469532}
    470533
    471 function showiframeOrJsChange(){
    472         if($("#jsEmbed").is(":checked")){
    473                 $("#autoHeightDiv").slideDown();
    474         }else{
    475                 $("#autoHeightDiv").slideUp();
    476         }
    477         $("#autoHeightCB").prop("checked",false);
    478         $("#height").removeProp("disabled");
    479         $("#height").val("600px");
    480 
    481 }
    482534function deleteParam(elem){
    483535        $(elem).parent().parent("div").remove();
    … …  
    494546        if(formname !="-Select-"){
    495547                $("#embedActionsDiv").slideDown();
    496         }else{
    497                 $("#embedActionsDiv").slideUp();
    498         }
    499 
     548                selectMappingStep("embed");
     549        }
     550}
     551function selectWidthUnit(elem){
     552        $(elem).siblings("i").removeClass("selected");
     553        $(elem).addClass("selected");
     554}
     555function allowOnlyNumbers(elem){
     556        var value = elem.value.replace(/[^0-9]/g, "");
     557        if(elem.value !== value){
     558                elem.value = value;
     559        }
    500560}
    501561function disableHeight(){
    502562        if($("#autoHeightCB").is(":checked")){
    503                 $("#height").prop("disabled",true);
    504                 $("#height").val('');
     563                $("#formHeightDiv").css("display", "");
    505564        }else{
    506                 $("#height").removeProp("disabled");
    507                 $("#height").val('600px');
     565                $("#formHeightDiv").hide();
    508566        }
    509567}
    510568
    511569function hideparamError(elem){
    512         $(elem).parent("div").removeClass("errorCont");
     570        $(elem).parent("div").removeClass("zf-wb-errorCont");
    513571        $("#paramError").hide();
    514572}
     573
     574jQuery(function(){
     575        /*setTimeout(function(){
     576                if(!window.tinyMCEPopup || !tinyMCEPopup.uiWindow || !url){
     577                        return;
     578                }
     579                var titleEl = tinyMCEPopup.uiWindow.getEl("title");
     580                if(!titleEl || titleEl.getElementsByTagName("img").length){
     581                        return;
     582                }
     583                var icon = titleEl.ownerDocument.createElement("img");
     584                icon.src = url + "/../images/zohoforms.png";
     585                icon.alt = "";
     586                icon.style.width = "18px";
     587                icon.style.height = "18px";
     588                icon.style.marginRight = "8px";
     589                icon.style.verticalAlign = "middle";
     590                titleEl.insertBefore(icon, titleEl.firstChild);
     591        }, 0);*/
     592        function setupSelect(selector, onChange){
     593                var $el = jQuery(selector);
     594                if(!$el.length || !jQuery.fn.select2 || $el.data("select2")){
     595                        return;
     596                }
     597                $el.select2({
     598                        width: "100%",
     599                        dropdownParent: jQuery(".zf-WpPopupContainer"),
     600                        minimumResultsForSearch: Infinity
     601                });
     602                if(onChange){
     603                        $el.on("change.zfSelect2", onChange);
     604                }
     605        }
     606        setupSelect("#zf_domain", hideDomainSelctError);
     607        setupSelect("#formname");
     608        jQuery(document).on("mousedown.zfSelect2", function(event){
     609                if(jQuery(event.target).closest(".select2-container").length){
     610                        return;
     611                }
     612                jQuery("#zf_domain, #formname").each(function(){
     613                        var $el = jQuery(this);
     614                        if($el.data("select2")){
     615                                $el.select2("close");
     616                        }
     617                });
     618        });
     619});

  • zoho-forms/tags/5.0/tinymce/zforms_dialog.php

    r3729081 r3748754  
    1515                <script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce/utils/form_utils.js"></script>
    1616                <script type="text/javascript" src="jquery.js"></script>
     17                <script type="text/javascript" src="../lib/select2/select2.min.js"></script>
    1718                <script language="javascript" type="text/javascript" src="zforms_dailog.js"></script>
    18                 <link href="zforms_dailog.css" rel="stylesheet">               
    19      </head>
    20      <body style="background: rgba(0,0,0,0.7);">
     19                <!-- <link href="zforms_dailog.css" rel="stylesheet"> -->
     20                <link href="../lib/select2/select2.min.css" rel="stylesheet">
     21                <link href="../zohoforms-block.css" rel="stylesheet">
     22                <link href="zforms_newdialog.css" rel="stylesheet">
     23    </head>
     24    <body style="background: rgba(0,0,0,0.7);">
    2125       
    22                 <div class="zf-WpPopupContainer">
     26                <div class="zf-WpPopupContainer zf-wb-containerWrapper">
    2327                <div class="zf-WpMainWrap">
    2428
    2529                        <input id="zf_embedCatogory" type="hidden" value="formPerma">
    26                         <div class="zf-WpFormPermaWrap" id="zf_tiny_homeDiv" >
    27                                 <p>You can choose a form from your Zoho Form's account or enter your  form's permalink</p>
    28                                 <button onclick="showChooseFormDiv();">Access Zoho Forms</button>
    29                                 <span>or</span>
    30                                 <a onclick="embedPerma();">Enter Form Permalink</a>
    31                         </div>
    32 
    33                         <div class="zf-WpEmbeddedWrap zf-EmbedInner" id="permaLinkDiv" style="display:none">
    34                                 <div class="zf-WpEmbeddedHead">
    35                                                 <span onclick="goToHome();">
    36                                                         <img src="backbtn.jpg">
    37                                                 </span>
    38                                                 <h3>Embedded with Permalink</h3>
    39                                         </div>
    40                                        
    41 
    42                                         <div class="zf-WpEmbeddedContainer">
    43                                                   <div class="embeddedPublicLink" id="permaContainer">
    44                                                                 <label>Enter your form's public Link <em>*</em></label>
    45                                                                 <textarea onchange="hideError()" id="permalink"></textarea>
    46                                                                 <span>Not sure where to find your form's permalink URL? <a href="https://www.zoho.com/forms/help/share/public-sharing.html#link" target="_blank">Click here</a> to learn more.</span>
    47                                                                 <p id="permaLinkError" style="display:none;"/>
    48                                                         </div>
    49                                         </div>
    50                         </div>
    51                         <div class="zf-WpEmbeddedWrap zf-EmbedInner" id="chooseFormDiv" style="display: none;">
    52                                 <div class="zf-WpEmbeddedHead">
    53                                         <span onclick="goToHome();"><img src="backbtn.jpg"></span>
    54                                                 <h3>Choose your form</h3>
    55                                 </div>
    56                                 <div id="domainSelectionDiv" class="zf-WpSelectDomain">
    57                                         <label>Choose the domain where you've registered your Zoho account.<em>*</em></label>
    58                                                 <span class="cusDropArrow"></span>
    59                                                 <select id="zForm_domain" onchange="hideDomainSelctError()"; >
    60                                                         <option value="-select-">-Select-</option>
    61                                                         <option value=".com">zoho.com</option>
    62                                                         <option value=".eu">zoho.eu</option>
    63                                                         <option value=".com.cn">zoho.com.cn</option>
    64                                                         <option value=".in">zoho.in</option>
    65                                                         <option value=".com.au">zoho.com.au</option>
    66                                                         <option value=".jp">zoho.jp</option>
    67                                                         <option value=".ca">zohocloud.ca</option>
    68                                                         <option value=".sa">zoho.sa</option>
    69                                                 </select>
    70                                        
    71                                         <p id="domainSelectionErr" style="display:none">Please choose a domain.</p>
    72                                         <div class="zf-wpFooter" style="border-top: 0px;">
    73                                                 <button onclick="proceedToSelectFormOnTinyMce();">Connect</button>
    74                                         </div>
    75                                 </div>
    76                                 <div class="zf-WpSelectDomain zf-WpSelectFrm" id="formSelectionDiv" style="display:none">
    77                                         <div id="selctContainer">
    78                                                 <label>Choose a form<em>*</em></label>
    79                                                 <span class="cusDropArrow"></span>
    80                                                         <select id="formname" onchange="showEmbedActionsDiv();hideError();"; style="width: 100%" >
    81                                                                 <option value="-Select-">-Select-</option>
    82                                                         </select>
    83                                                
    84                                                 <p id="formSelectionError" />
    85                                         </div>
    86                                 </div>
    87                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="signinDiv" style="display:none">
    88                                                         <p> Sign in to your Zoho Forms account to select a form. </p>
    89                                                 <div class="zf-wpFooter" style="border-top: 0px;">
    90                                                         <button onclick="signin()">Sign In</button>
    91                                                 </div>
    92                                 </div>
    93                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="createFormDiv" style="display:none">
    94                                         <p> You have not created any forms yet. Click on Create to build a new form. </p>
    95                                         <div class="zf-wpFooter" style="border-top: 0px;">
    96                                                 <button onclick="createForm()">Create</button> 
    97                                         </div>
    98                                 </div>
    99                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="refreshDiv" style="display:none">
    100                                         <p> Please Refresh to view your forms. </p>
    101                                         <div class="zf-wpFooter" style="border-top: 0px;">
    102                                                 <button id="button_refresh" onclick="proceedToSelectFormOnTinyMce()">Refresh</button>           
    103                                         </div>
    104                                 </div>
    105                                 <div id="loadingDiv" class="zf-WpFormPermaWrap zf-WpFormRefresh" style="display: none;">
     30            <div class="connFormCont">
     31                                <div>
     32                                        <!-- <div class="connFormHeader">
     33                                                <i>
     34                                                        <img src="../images/zohoforms.png" alt="">
     35                                                </i>
     36                                                <h4>Connect Your Form</h4>
     37                                        </div> -->
     38                                        <div class="customAddMapping">
     39                                                <a id="chooseFormStep" class="is-selected">
     40                                                        <span elname="stepNumber">1</span>
     41                                                        <span elname="tickIcon" style="display: none;">
     42                                                                <img src="../images/completed.png" alt="">
     43                                                        </span>
     44                                                        <em>Choose Form</em>
     45                                                </a>
     46                                                <a id="configureEmbedStep">
     47                                                        <span elname="stepNumber">2</span>
     48                                                        <span elname="tickIcon" style="display: none;">
     49                                                                <img src="../images/completed.png" alt="">
     50                                                        </span>
     51                                                        <em>Embed Settings</em>
     52                                                </a>
     53                                        </div>
     54                                </div>
     55                        <div id="zf_tiny_homeDiv" class="connFormInnCont">
     56                                <div class="zf-wb-signWrapper zconnectMainCont">
     57                                        <h2>Choose a way to embed your form</h2>
     58                                        <div class="accCardCont">
     59                                                <div id="accessZohoFormsCard" class="accConectCard" onclick="selectConnectionCard(this);">
     60                                                        <i>
     61                                                                <img src="../images/access-form.png" alt="">
     62                                                        </i>
     63                                                        <div class="accCardRight">
     64                                                        <h4>Access Zoho Forms</h4>
     65                                                        <p>Sign in to Zoho Forms and choose a form.</p>
     66                                                        </div>
     67                                                       
     68                                                </div>
     69                                                <div id="embedUsingPermalinkCard" class="accConectCard" onclick="selectConnectionCard(this);">
     70                                                        <i>
     71                                                                <img src="../images/icon-link.png" alt="">
     72                                                        </i>
     73                                                        <div class="accCardRight">
     74                                                        <h4>Use a Permalink</h4>
     75                                                        <p>Embed a form using its permalink URL.</p>
     76                                                        </div>
     77                                                       
     78                                                </div>
     79                                        </div>
     80                                </div>
     81                                <div class="connFormFooter">
     82                                        <button class="greenBtnNew" onclick="proceedFromHome();">Next</button>
     83                                </div>
     84                        </div>
     85
     86                        <div class="zf-wb-outerWrapper" id="chooseFormDiv" style="display: none;">
     87                                <div id="loadingDiv" class="zf-wb-loading" style="display: none;">
    10688                                        <p>loading</p>
    10789                                        <div class="zf-wb-spinner">
    … …  
    11193                                        </div>
    11294                                </div>
    113                         </div>
    114 
    115                         <div class="zf-WpEmbeddedWrap" id="embedActionsDiv" style="display:none">
    116                                 <div class="embedFormUsing">
    117                                         <label>Embed form using</label>
    118                                         <div class="flLeft cusRadioButton">
    119                                                 <span>
    120                                                         <input name="embedType" id="iframeEmbed" type="radio" value="iframe" checked="" onchange="showiframeOrJsChange();">
    121                                                         <label for="iframeEmbed">Iframe</label>
    122                                                 </span>
    123                                                 <span>
    124                                                         <input name="embedType" id="jsEmbed" type="radio" value="jsCode" onchange="showiframeOrJsChange();">
    125                                                         <label for="jsEmbed">Javascript</label>
    126                                                 </span>
    127                                         </div>
    128                                         <div id="autoHeightDiv" style="display:none;" class="flLeft cusCheckBox">
    129                                                 <input type="checkbox" id="autoHeightCB" onchange="disableHeight();">
    130                                                 <label for="autoHeightCB">Set form height automatically.</label>
    131                                         </div>
    132 
    133                                         <div class="embedFormInputField">
    134                                                 <span>
    135                                                         <label>Width</label>
    136                                                         <input type="text" value="100%" id="width">
    137                                                 </span>
    138                                                 <span>
    139                                                         <label>Height</label>
    140                                                         <input type="text" value ="600px" id="height">
    141                                                 </span>
    142                                         </div>
    143                                 </div>
    144                                 <div class="embedIncldeParamtrs">
    145                                         <div class="cusCheckBox">
    146                                                 <input type="checkbox" id="queryParamsCB" onchange="showOrHideUrlParamsDiv();">
    147                                                 <label for="queryParamsCB">Include URL Parameters</label>
    148                                         </div>
    149                                         <span>Include parameters to prefill forms and add referrers to track sources</span>
    150                                  </div>
    151                                  <div class="embedParameterValue" id="urlParamsDiv" style="display:none;">
    152                                                                 <div class="embedField">
    153                                                                                 <div class="embedFiel_Col1"> Parameter Name </div>
    154                                                                                 <div class="embedFiel_Col2"> Parameter Value  </div>
     95                                <div id="zDomaindiv" class="connFormInnCont">
     96                                        <div class="zf-wb-innerWrapper zconnectMainCont">
     97                                                <label>Select the domain your Zoho account is registered on. <em>*</em></label>
     98                                                <div class="zf-wb-dropWrapper">
     99                                                        <select id="zf_domain" onchange="hideDomainSelctError();">
     100                                                                <option value="-select-">-Select-</option>
     101                                                                <option value=".com">zoho.com</option>
     102                                                                <option value=".eu">zoho.eu</option>
     103                                                                <option value=".com.cn">zoho.com.cn</option>
     104                                                                <option value=".in">zoho.in</option>
     105                                                                <option value=".com.au">zoho.com.au</option>
     106                                                                <option value=".jp">zoho.jp</option>
     107                                                                <option value=".ca">zohocloud.ca</option>
     108                                                                <option value=".sa">zoho.sa</option>
     109                                                        </select>
     110                                                </div>
     111                                                <p id="domainErr" style="display: none;">Please choose a domain.</p>
     112                                        </div>
     113                                        <div class="connFormFooter">
     114                                                <button onclick="goToHome();">Back</button>
     115                                                <button class="greenBtnNew" onclick="proceedToSelectFormOnTinyMce();">
     116                                                        <em id="connectLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Connect
     117                                                </button>
     118                                        </div>
     119                                </div>
     120                                <div id="zfRefreshDiv" class="refreshCont" style="display: none;">
     121                                        <img src="../images/refresh-form.png" alt="">
     122                                        <h3>Sign in on the Zoho page, then come back and refresh to load your forms.</h3>
     123                                        <div class="refFormFooter">
     124                                                <button onclick="goToHome();">Back</button>
     125                                                <button class="greenBtnNew" onclick="proceedToSelectFormOnTinyMce();">
     126                                                        <em id="refreshLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Refresh
     127                                                </button>
     128                                        </div>
     129                                </div>
     130                                <div id="zfCreateFormDiv" class="refreshCont" style="display: none;">
     131                                        <img src="../images/refresh-form.png" alt="">
     132                                        <h3>You don't have any forms.</h3>
     133                                        <div class="refFormFooter">
     134                                                <button class="greenBtnNew" onclick="createForm();">
     135                                                        <em id="createLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Create a new form
     136                                                </button>
     137                                        </div>
     138                                </div>
     139                        </div>
     140
     141                        <div id="embedActionsDiv" class="embedActionsDiv" style="display: none;">
     142                                <div class="zconnectMainCont">
     143                                        <div id="formSelectionDiv" class="zf-wb-innerWrapper" style="display: none;">
     144                                                <div class="zf-wb-innerWrapper" id="selctContainer">
     145                                                        <label>Choose a form <em>*</em></label>
     146                                                        <div class="zf-wb-dropWrapper">
     147                                                                <select id="formname" onchange="showEmbedActionsDiv();hideError();">
     148                                                                        <option value="-Select-">-Select-</option>
     149                                                                </select>
     150                                                        </div>
     151                                                        <p id="formSelectionError" style="display: none;">Please select a form.</p>
     152                                                </div>
     153                                        </div>
     154                                        <div id="permaLinkDiv" class="zf-wb-outerWrapper" style="display: none;">
     155                                                <div class="zf-wb-innerWrapper" id="permaContainer">
     156                                                        <label>Enter your form's permalink URL <em>*</em></label>
     157                                                        <textarea id="permalink" rows="4" style="width: 100%;" onchange="hideError();"></textarea>
     158                                                        <p id="permaLinkError" style="display: none;">Please enter your form's permalink URL.</p>
     159                                                        <span>Need help finding your permalink? <a href="https://help.zoho.com/portal/en/kb/forms/sharing-forms/articles/sharing-a-form-publicly#Sharing_a_link" target="_blank">Learn more</a></span>
     160                                                </div>
     161                                        </div>
     162                                        <div class="embedFormDivider"></div>
     163                                        <div class="embedFormUsing">
     164                                                <div class="embedFormInputField">
     165                                                        <span>
     166                                                                <label>Width </label>
     167                                                                <div class="embedInputCont">
     168                                                                        <input type="text" id="formWidth" placeholder="100" oninput="allowOnlyNumbers(this);">
     169                                                                        <div class="embedInputPer">
     170                                                                                <i onclick="selectWidthUnit(this);" size_symbol="px">px</i>
     171                                                                                <i class="selected" onclick="selectWidthUnit(this);" size_symbol="%">%</i>
     172                                                                        </div>
    155173                                                                </div>
    156                                                                 <div class="clearBoth"></div>
    157                                                                 <div class="addparamsWrap" elname="paramTemplate" eltype="keyValPair" style="display:none;">
    158                                                                                 <div class="addParamaFeld">
    159                                                                                                 <input type="text" elname="paramKey" maxlength="50" onchange="hideparamError(this);">
    160                                                                                 </div>
    161                                                                                 <div class="intArrow"><em class="arrowImg"></em></div>
    162                                                                                 <div class="addParamaFeld">
    163                                                                                                 <input type="text" elname="value" maxlength="50">
    164                                                                                 </div>
    165                                                                                 <div class="zf-Wp-plusminus">
    166                                                                                         <span class="fiedPropPlus" onclick="addUrlParam(this);"></span>
    167                                                                                         <span class="fiedPropMinus" onclick="deleteParam(this);"> </span>
    168                                                                                 </div>
     174                                                               
     175                                                        </span>
     176                                                        <div id="autoHeightDiv" class="cusCheckBox autoHeightDiv">
     177                                                                <input type="checkbox" id="autoHeightCB" onchange="disableHeight();">
     178                                                                <label for="autoHeightCB">Set Custom Height.</label>
     179                                                        </div>
     180                                                        <span id="formHeightDiv" style="display: none;">
     181                                                                <label>Height </label>
     182                                                                <div class="embedInputCont">
     183                                                                        <input type="text" id="formHeight" class="formHeight" placeholder="600" oninput="allowOnlyNumbers(this);">
     184                                                                        <div class="embedInputPer">
     185                                                                                <i size_symbol="px">px</i>
    169186                                                                        </div>
    170                                                                 <div elname="paramsDiv">
    171187                                                                </div>
    172                                                 </div>
    173                                                 <div id="paramError" class="errorCont" style="display:none;">
    174                                                         <p>Parameters should contain only alphanumeric characters, underscore, and hyphen.</p>
    175                                                 </div>
    176                                 <div class="clearBoth"></div>
    177                                  <div class="zf-wpFooter">
    178                                         <button onclick="zforms_submit()">Embed</button>
    179                                 </div>
     188                                                               
     189                                                        </span>
     190                                                </div>
     191                                        </div>
     192                                        <div class="embedFormDivider"></div>
     193                                        <div class="embedIncldeParamtrs">
     194                                                <div class="cusCheckBox">
     195                                                        <input type="checkbox" id="queryParamsCB" onchange="showOrHideUrlParamsDiv();">
     196                                                        <label for="queryParamsCB">Add URL Parameters</label>
     197                                                </div>
     198                                                <span>Prefill form fields and track where responses come from.</span>
     199                                        </div>
     200                                        <div id="urlParamsDiv" class="embedParameterValue" style="display: none;">
     201                                                <div class="embedField">
     202                                                        <div class="embedFiel_Col1">
     203                                                                <label>Parameter Name</label>
     204                                                        </div>
     205                                                        <div class="embedFiel_Col2">
     206                                                                <label>Parameter Value </label>
     207                                                        </div>
     208                                                </div>
     209                                                <div class="clearBoth"></div>
     210                                                <div elname="paramsDiv"></div>
     211                                                <div class="clearBoth"></div>
     212                                                <div elname="paramTemplate" class="addparamsWrap" eltype="keyValPair" style="display: none;">
     213                                                        <div class="addParamaFeld">
     214                                                                <input type="text" elname="paramKey" maxlength="50" onchange="hideparamError(this);">
     215                                                        </div>
     216                                                        <div class="addParamaFeld">
     217                                                                <input type="text" elname="value" maxlength="50">
     218                                                        </div>
     219                                                        <div class="zf-Wp-plusminus">
     220                                                                <span class="fiedPropPlus" elname="addParam" onclick="addUrlParam(this);"></span>
     221                                                                <span class="fiedPropMinus" elname="deleteParam" onclick="deleteParam(this);"></span>
     222                                                        </div>
     223                                                </div>
     224                                        </div>
     225                                        <div class="zf-wb-errorCont" id="paramError" style="display: none;">
     226                                                <p>Parameters should contain only alphanumeric characters, underscore, and hyphen.</p>
     227                                        </div>
     228                                </div>
     229                                <div class="connFormFooter">
     230                                        <button type="button" onclick="goToHome();">Back</button>
     231                                        <button type="button" class="greenBtnNew" onclick="zforms_submit();">
     232                                                <em elem="loadingImgElem" class="newBtnLoader" style="display: none;"></em>Embed Form
     233                                        </button>
     234                                </div>
     235                        </div>
    180236                        </div>
    181237                </div>
    … …  
    184240        </body>
    185241</html>
    186 

  • zoho-forms/tags/5.0/tinymce/zforms_editor_plugin.js

    r3729081 r3748754  
    1717                title : 'Zoho Forms',
    1818                cmd : 'zforms_embed_window', 
    19                 image : url+'/zohoforms.png',                           
     19                image : url+'/../images/zohoforms.png',                                 
    2020            });
    2121                        return false;

  • zoho-forms/tags/5.0/zohoForms.php

    r3729081 r3748754  
    55Plugin URI: http://wordpress.org/extend/plugins/zohoforms
    66Description: Try Zoho Forms, the best WordPress contact form plugin! Create contact, payment & custom forms with a drag and drop builder. Get started for free!
    7 Version: 4.1
     7Version: 5.0
    88Author: Zoho Forms
    99Author URI: https://forms.zoho.com
    … …  
    1111
    1212// Keep in sync with the Version header above.
    13 define('ZOHO_FORMS_VERSION', '4.1');
     13define('ZOHO_FORMS_VERSION', '5.0');
    1414
    1515//Shortcode for embeding the form
    … …  
    148148function loadZohoFormsBlockFiles() {
    149149  wp_enqueue_script(
     150    'zoho-forms-select2',
     151    plugin_dir_url(__FILE__) . 'lib/select2/select2.min.js',
     152    array('jquery'),
     153    '4.0.13',
     154    true
     155  );
     156  wp_enqueue_script(
    150157    'zoho-forms-block-js',
    151158    plugin_dir_url(__FILE__) . 'zohoforms-block.js',
    152     array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-i18n', 'jquery'),
     159    array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-i18n', 'jquery', 'zoho-forms-select2'),
    153160    ZOHO_FORMS_VERSION,
    154161    true
    … …  
    156163  wp_localize_script( 'zoho-forms-block-js', 'zohoFormsBlock', array(
    157164      'blockCSS' => plugin_dir_url(__FILE__) . 'zohoforms-block.css',
    158       'favIconPath' => plugin_dir_url(__FILE__) . 'tinymce/zFormsIcon.png'
     165      'select2CSS' => plugin_dir_url(__FILE__) . 'lib/select2/select2.min.css',
     166      'favIconPath' => plugin_dir_url(__FILE__) . 'images/zFormsIcon.png',
     167      'accessFormIcon' => plugin_dir_url(__FILE__) . 'images/access-form.png',
     168      'permalinkIcon' => plugin_dir_url(__FILE__) . 'images/icon-link.png',
     169      'refreshFormIcon' => plugin_dir_url(__FILE__) . 'images/refresh-form.png',
     170      'zohoFormsIcon' => plugin_dir_url(__FILE__) . 'images/zohoforms.png',
     171      'completedIcon' => plugin_dir_url(__FILE__) . 'images/completed.png'
    159172    ) );
    160173}

  • zoho-forms/tags/5.0/zohoforms-block.css

    r3729081 r3748754  
    1         .body{
    2             margin: 0;
    3             padding: 0;
    4             font-family: Arimo, Helvetica, sans-serif;
    5            
    6         }
    7        
    8         input:focus, textarea:focus, select:focus{ outline: none !important; border-color: #24A68A !important; box-shadow: none !important;}
    9         button:focus{outline: none;}
    10         button{cursor: pointer;}
    11        
    12         .clearBoth{
    13             clear:both;
    14         }
    15        
    16         .flLeft{
    17             float:left;
    18         }
    19        
    20         .flRight{
    21             float:right;
    22         }
    23 
    24         .zf-wb-containerWrapper{
    25             letter-spacing:0.5px;
    26             width: 100%;
    27             padding: 0 10px;
    28             padding-top: 10px;
    29         }
    30 
    31         .zf-wb-tabToggle{
    32             width: 60%;
    33             margin:0 auto;
    34             font-size: 14px;
    35             font-weight: 400;
    36             margin-bottom: 10px;
    37         }
    38 
    39         .zf-wb-tabToggle ul{
    40             display: table;
    41             width: 100%;
    42             padding: 0;
    43             margin: 0 !important;
    44         }
    45 
    46         .zf-wb-tabToggle ul li{
    47             padding:6px 8px;
    48             border-collapse: collapse;
    49             border-width: 1px 0 1px 1px;
    50             border-color: #d8d8d8;
    51             border-style: solid;
    52             overflow: hidden;
    53             display: table-cell;
    54             text-align: center;
    55             cursor: pointer;
    56             width: 50%;
    57         }
    58 
    59         .zf-wb-tabToggle ul li:last-child{
    60             border-width: 1px;
    61             -webkit-border-radius:0px 25px 25px 0;
    62             -moz-border-radius:0px 25px 25px 0;
    63             border-radius:0px 25px 25px 0;
    64         }
    65 
    66         .zf-wb-tabToggle ul li:first-child{
    67             -webkit-border-radius:25px 0 0 25px;
    68             -moz-border-radius:25px 0 0 25px;
    69             border-radius:25px 0 0 25px;
    70         }
    71 
    72         .zf-wb-tabToggle ul li.active{
    73             border:1px solid #007AFF;
    74             background: #007AFF;
    75             color: #fff;
    76             cursor: default;
    77         }
    78 
    79         .zf-wb-tabToggle ul li.active ~ li{
    80             border-width: 1px 1px 1px 0;
    81         }   
    82 
    83         .zf-wb-outerWrapper{ font-size: 14px !important;}
    84         .zf-wb-outerWrapper .zf-wb-desc{ font-size: 14px; color: #666; text-align: center; margin-bottom:20px;}
    85         .zf-wb-outerWrapper .zf-wb-innerWrapper{ padding-bottom:20px;}
    86         .zf-wb-outerWrapper .zf-wb-innerWrapper label{ display: block;margin-bottom:5px;}
    87         .zf-wb-outerWrapper .zf-wb-innerWrapper label em{ color:#ff0000;font-size:16px;}
    88        
    89         .zf-wb-outerWrapper .zf-wb-innerWrapper input, .zf-wb-outerWrapper .zf-wb-innerWrapper textarea{ width: 100%; border:1px solid #d6d6d6;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px; font-size: 14px;}
    90        
    91         .zf-wb-outerWrapper .zf-wb-twoColumns .zf-wb-innerWrapper{ width: 45%;}
    92        
    93         .zf-wb-errorCont input, .zf-wb-errorCont textarea{ border: 1px solid #ff0000 !important;}
    94 
    95         .zf-wb-errorCont input:focus, .zf-wb-errorCont textarea:focus{ border:1px solid #ff0000 !important; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;} 
    96 
    97         .zf-wb-errorCont p{font-size:13px !important; color:#ff0000; margin:0 !important; padding-top:3px;}
    98        
    99         .zf-wb-Fotter{ text-align:center; border-top: 1px solid #d6d6d6; padding:20px 0; padding-bottom: 10px; margin-top: -1px;}
    100         .zf-wb-Fotter button{ padding:6px 18px; border: 1px solid #d6d6d6; font-size: 14px !important; margin: 0 5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; line-height: 21px !important;}
    101         .zf-wb-blue{border: 1px solid #24A68A;background: #24A68A;color: #fff;border-radius: 3px;font-size: 14px;cursor: pointer;padding: 10px 12px;display: inline-block;}
    102         .zf-wb-red{background:#f04b2f; color:#fff !important; border:1px solid #f04b2f !important;}
    103         .zf-wb-green{background:#00A552; color:#fff !important; border:1px solid #00A552 !important;}
    104         .zf-wb-white{background:#fff; border:1px solid #adadad !important;}
    105            
    106         .zf-wb-signWrapper{ text-align: center; font-size: 14px; padding: 10px 0 20px 0; margin-bottom: 10px;}
    107         .zf-wb-signWrapper p{ margin: 0 !important;font-size: 15px !important;line-height: 23px !important;margin-bottom: 15px !important;}
    108         .zf-wb-signWrapper button{ padding:6px 18px; border: 1px solid #d6d6d6; font-size: 14px !important; margin: 0 5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; margin-top: 5px;}
    109        
    110         .zf-wb-dropWrapper{ border:1px solid #d6d6d6; position: relative; height:32px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; overflow: hidden;}
    111         .zf-wb-dropWrapper::before{ content: "";right: 12px;top: 11px; position: absolute;width: 0; height: 0; border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 7px solid #222;}
    112 
    113         .zf-wb-dropWrapper select{
    114             position: absolute;
    115             top: 0;
    116             border: 0 none !important;
    117             width: 100%;
    118             max-width: 100%;
    119             outline: none !important;
    120             -moz-outline: none !important;
    121             margin: 0;
    122              appearance: none;
    123             -moz-appearance: radio-container;
    124             -webkit-appearance: none;
    125             background: transparent;
    126             text-overflow: '';
    127              webkit-user-select: none;
    128             -moz-user-select: none;
    129             -ms-user-select: none;
    130             -o-user-select: none;
    131             user-select: none;
    132             text-indent: 2px;
    133             white-space: nowrap;
    134             text-overflow: ellipsis;
    135             height: auto;
    136             font-size: 14px !important;
    137             padding-bottom: 5px;
    138             line-height: inherit;;
    139             }
    140                 .zf-wb-dropWrapper select:hover{color:#444 !important;}
    141         .zf-wb-dropWrapper select:focus, .zf-wb-dropWrapper select:hover, .zf-wb-dropWrapper select option{-moz-outline: none !important; outline: none !important; border:none; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;outline-offset: -2px !important; color: #444;}
    142          select:-moz-focusring {color: transparent !important;text-shadow: 0 0 0 #000 !important;}
    143         .zf-wb-infoDiv { position: relative;border-radius: 100px;border: 2px solid #1a75ef;width: 38px;height: 38px;z-index: 9999999;padding: 5px;line-height: 33px;text-align: center;display: inline-block;margin-bottom: 15px;}
    144         .zf-wb-infoDiv:before { position: absolute;content: "i";color: #1a75ef;font-size: 20px;left: 15px;font-weight: 600;top: 0;}
    145         .zf-wb-signWrapper a { color: #24A68A !important;cursor: pointer;text-decoration: underline !important;box-shadow: none !important;font-size: 16px;}
    146         .zf-wb-signWrapper label {margin: 0 12px !important;font-size: 15px;color: #999;cursor: default;}
    147         .zf-wb-headwrap { border-bottom: 1px solid #ccc; padding: 0 0 12px 0; margin-bottom: 20px;}
    148         .zf-wb-heading { padding: 0 0 0 42px;font-size: 17px;font-weight: 600;}
    149         .zf-wb-backIocn { position: relative; border: 1px solid #ccc; width: 23px; height: 23px; float: left; cursor: pointer; margin: 2px 0 0 0;}
    150         .zf-wb-backIocn svg { display: inline-block; width: 15px; height: 17px; stroke-width: 0; stroke: currentColor; fill: #a2a2a2; position: absolute; left: 2px; top: -1px;}
    151         .zf-wb-innerWrapper span { color: #777;}
    152         .zf-wb-innerWrapper a:hover { box-shadow: none !important;color: #24A68A !important;}
    153         .zf-wb-innerWrapper a { color: #24A68A !important;text-decoration: underline !important;box-shadow: none !important;}
    154         .zf-wb-connect-btn{ text-align: center;border-top: none;}       
    155         .zf-wb-errorCont .zf-wb-dropWrapper { border: 1px solid #ff0000;}
    156         .zf-wb-loading{ text-align: center;}
    157         .zf-wb-loading p{ display: inline;padding: 0 10px 0 0px !important;}
    158         .zf-wb-lightblue { background: #E3F0FF; color: #153C69; border: 1px solid #C8E1FE !important;
    159         }
    160         .zf-wb-dropWrapper select{height: 32px;}
    161 
    162     /*loading animation */
    163 .zf-wb-spinner { text-align: center;display: inline;position: relative;top: 2px;}
    164 .zf-wb-spinner > div {
    165 width: 11px;
    166 height: 11px;
    167 background-color: #333;
    168 
    169 border-radius: 100%;
    170 display: inline-block;
    171 -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    172 animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    173 }
    174 
    175 .zf-wb-spinner .bounce1 {
    176 -webkit-animation-delay: -0.32s;
    177 animation-delay: -0.32s;
    178 }
    179 
    180 .zf-wb-spinner .bounce2 {
    181 -webkit-animation-delay: -0.16s;
    182 animation-delay: -0.16s;
    183 }
    184 
    185 @-webkit-keyframes sk-bouncedelay {
    186 0%, 80%, 100% { -webkit-transform: scale(0) }
    187 40% { -webkit-transform: scale(1.0) }
    188 }
    189 
    190 @keyframes sk-bouncedelay {
    191 0%, 80%, 100% {
    192 -webkit-transform: scale(0);
    193 transform: scale(0);
    194 } 40% {
    195 -webkit-transform: scale(1.0);
    196 transform: scale(1.0);
    197 }
    198 }
    199 
    200 .zf-WpEmbeddedWrap  {
    201     padding: 0 25px;
    202 }
    203 .zf-WpEmbeddedWrap .zf-WpSelectFrm .cusDropArrow {
    204   top: 60px;
    205 }
    206 .embedFormUsing label {
    207     font-size: 15px;
    208     margin-bottom: 12px;
    209     display: inline-block;
    210 }
    211 .embedFormUsing {
    212     padding-bottom: 15px;
    213     margin-bottom: 15px;
    214 }
    215 .cusRadioButton span {
    216     margin-right: 25px;
    217 }
    218 .cusRadioButton [type="radio"]:checked, .cusRadioButton [type="radio"]:not(:checked) {
     1.body{
     2    margin: 0;
     3    padding: 0;
     4    font-family: Arimo, Helvetica, sans-serif;
     5   
     6}
     7
     8input:focus, textarea:focus, select:focus{ outline: none !important; border-color: #24A68A !important; box-shadow: none !important;}
     9button:focus{outline: none;}
     10button{cursor: pointer;}
     11
     12.clearBoth{
     13    clear:both;
     14}
     15
     16.flLeft{
     17    float:left;
     18}
     19
     20.flRight{
     21    float:right;
     22}
     23
     24
     25.zconnectMainCont {   
     26    padding: 24px 32px;
     27    min-height: 290px;
     28    box-sizing: border-box;
     29}
     30.zf-wb-outerWrapper .zf-wb-desc{ font-size: 14px; color: #666; text-align: center; margin-bottom:20px;}
     31.zf-wb-outerWrapper .zf-wb-innerWrapper h4{
     32    font-size: 13px;
     33    color: #454e5c;
     34    margin: 0;
     35    margin-bottom: 14px;
     36}
     37.zf-wb-innerWrapper label {
     38font-size: 14px;
     39color: #222;
     40font-weight: 500;
     41margin-bottom: 8px;
     42display: block;
     43}
     44.zf-wb-outerWrapper label em{ color:#ff0000;font-size:16px;}
     45
     46.zf-wb-outerWrapper .zf-wb-innerWrapper input, .zf-wb-outerWrapper .zf-wb-innerWrapper textarea{ width: 100%; border:1px solid #d6d6d6;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;padding:4px; font-size: 14px;}
     47.zf-wb-outerWrapper .zf-wb-innerWrapper textarea {
     48    height: 105px;
     49    box-sizing: border-box;
     50    padding: 12px;
     51}
     52
     53
     54.zf-wb-errorCont input, .zf-wb-errorCont textarea{ border: 1px solid #ff0000 !important;}
     55
     56.zf-wb-errorCont input:focus, .zf-wb-errorCont textarea:focus{ border:1px solid #ff0000 !important; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;} 
     57
     58.zf-wb-errorCont p{font-size:13px !important; color:#ff0000;     margin: 0;
     59margin-bottom: 4px;}
     60.zf-wb-dropWrapper{     
     61    border: 1px solid #ccd6e0;
     62    position: relative;
     63    height: 38px;
     64    -moz-border-radius: 4px;
     65    -webkit-border-radius: 4px;
     66    border-radius: 4px;
     67    overflow: hidden;
     68    margin-bottom: 6px;
     69}
     70.zf-wb-dropWrapper::before{ content: "";
     71right: 18px;
     72position: absolute;
     73border-left: 6px solid transparent;
     74border-right: 6px solid transparent;
     75border-top: 17px solid #222;
     76border: solid #222;
     77border-width: 0 1.5px 1.5px 0;
     78top: 17px;
     79width: 10px;
     80height: 10px;
     81box-sizing: border-box;
     82transform: rotate(45deg);}
     83
     84.zf-wb-dropWrapper select{
    21985    position: absolute;
    220     left: -9999px;
    221 }
    222 .cusRadioButton [type="radio"]:checked + label, .cusRadioButton [type="radio"]:not(:checked) + label {
    223     position: relative;
    224     padding-left: 26px !important;
    225     cursor: pointer;
    226     line-height: 16px;
    227     display: inline-block;
    228     color: #444;
     86    top: 0;
     87    border: 0 none !important;
     88    width: 100%;
     89    max-width: 100%;
     90    outline: none !important;
     91    -moz-outline: none !important;
    22992    margin: 0;
    230     font-weight: normal;
    231     font-size: 15px;
    232 }
    233 .cusRadioButton [type="radio"]:checked + label:before, .cusRadioButton [type="radio"]:not(:checked) + label:before {
    234     content: '';
    235     position: absolute;
    236     left: 0;
    237     top: 0;
    238     width: 15px;
    239     height: 15px;
    240     border: 1px solid #24A68A;
    241     border-radius: 100%;
    242     background: #fff;
    243 }
    244 .cusRadioButton [type="radio"]:checked + label:after {
    245     opacity: 1;
    246     -webkit-transform: scale(1);
    247     transform: scale(1);
    248 }
    249 
    250 .cusRadioButton [type="radio"]:checked + label:after, .cusRadioButton [type="radio"]:not(:checked) + label:after {
    251     content: '';
    252     width: 9px;
    253     height: 9px;
    254     background: #24A68A;
    255     position: absolute;
    256     top: 3px;
    257     left: 3px;
    258     border-radius: 100%;
    259     -webkit-transition: all 0.2s ease;
    260     transition: all 0.2s ease;
    261 }
    262 .cusRadioButton [type="radio"]:not(:checked) + label {
    263     color: #444;
    264 }
    265 .cusRadioButton [type="radio"]:not(:checked) + label:after {
    266     opacity: 0;
    267     -webkit-transform: scale(0);
    268     transform: scale(0);
    269 }
    270 .cusRadioButton {
    271     margin-bottom: 20px;
    272 }
    273 
    274 .cusCheckBox [type="checkbox"] {
    275     border: 0;
    276     clip: rect(1px, 1px, 1px, 1px);
    277     -webkit-clip-path: inset(50%);
    278     clip-path: inset(50%);
    279     height: 1px;
    280     overflow: hidden;
    281     padding: 0;
    282     position: absolute;
    283     width: 1px;
    284     white-space: nowrap;
    285 }
    286 .cusCheckBox [type="checkbox"] + label {
    287    position: relative;
    288     -webkit-user-select: none;
     93     appearance: none;
     94    -moz-appearance: radio-container;
     95    -webkit-appearance: none;
     96    background: transparent;
     97    text-overflow: '';
     98     webkit-user-select: none;
    28999    -moz-user-select: none;
    290100    -ms-user-select: none;
     101    -o-user-select: none;
    291102    user-select: none;
     103    text-indent: 2px;
     104    white-space: nowrap;
     105    text-overflow: ellipsis;
     106    height: auto;
     107    font-size: 14px !important;
     108    padding-bottom: 5px;
     109    line-height: inherit;;
     110    }
     111
     112 .zf-wb-innerWrapper a { color: #24A68A !important;text-decoration: underline !important;box-shadow: none !important;}
     113 .zf-wb-innerWrapper span {         color: #454e5c;
     114font-size: 13px;
     115display: flex;
     116flex-wrap: wrap;
     117gap: 4px;}
     118.zf-wb-dropWrapper select{    height: 51px;
     119padding-left: 18px;
     120color: #222;
     121font-size: 16px !important;}
     122
     123
     124.cusCheckBox [type="checkbox"] {
     125border: 0;
     126clip: rect(1px, 1px, 1px, 1px);
     127-webkit-clip-path: inset(50%);
     128clip-path: inset(50%);
     129height: 1px;
     130overflow: hidden;
     131padding: 0;
     132position: absolute;
     133width: 1px;
     134white-space: nowrap;
     135}
     136.cusCheckBox [type="checkbox"] + label {
     137position: relative;
     138-webkit-user-select: none;
     139-moz-user-select: none;
     140-ms-user-select: none;
     141user-select: none;
     142cursor: pointer;
     143line-height: 17px;
     144padding-left: 26px;
     145display: inline-block;
     146font-size: 14px;
     147color: #222 !important;
     148}
     149.cusCheckBox [type="checkbox"]:not(:checked) + label:before, .cusCheckBox [type="checkbox"]:not(:checked) + .decisionCusCheckBox:before {
     150border: 1px solid #afafaf;
     151background: #fff;
     152}
     153.cusCheckBox [type="checkbox"] + label::before{
     154
     155background-color: #24A68A;
     156border: 1px solid #24A68A;
     157box-sizing: content-box;
     158content: '';
     159color: #444;
     160margin-right: 7px;
     161top: -1px;
     162left: 0;
     163width: 16px;
     164height: 16px;
     165display: inline-block;
     166vertical-align: middle;
     167position: absolute;
     168border-radius: 3px;
     169}
     170.cusCheckBox [type="checkbox"]:checked + label::after{
     171content: '';
     172-webkit-transform: rotate(-45deg) scale(1);
     173transform: rotate(-45deg) scale(1);
     174transition: -webkit-transform 200ms ease-out;
     175transition: transform 200ms ease-out;
     176transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
     177}
     178
     179.cusCheckBox [type="checkbox"] + label::after {
     180background-color: transparent;
     181top: 9.5px;
     182left: 4px;
     183position: absolute;
     184width: 9.2px;
     185height: 3px;
     186margin-top: calc(24px / -2 / 2 * 0.8);
     187border-style: solid;
     188border-color: #fff;
     189border-width: 0 0 2px 2px;
     190border-radius: 0;
     191-o-border-image: none;
     192border-image: none;
     193-webkit-transform: rotate(-45deg) scale(0);
     194transform: rotate(-45deg) scale(0);
     195transition: none;
     196}
     197
     198.cusCheckBox {
     199margin-bottom: 3px;
     200display: flex;
     201}
     202.autoHeightDiv.cusCheckBox [type="checkbox"] + label {
     203color: #475568 !important;
     204font-weight: 400;
     205margin-bottom: 0;
     206}
     207.embedInputCont {
     208    position: relative;
     209    display: inline-flex;
     210    align-items: center;
     211}
     212.embedInputCont input {
     213    padding-right: 40px;
     214}
     215.embedInputCont input[type="text"].formHeight {
     216    padding-right: 50px;
     217}
     218.embedInputPer {
     219    display: flex;
     220    position: absolute;
     221    right: 3px;
     222    background: #f0f4fb;
     223    border-radius: 4px;
     224}
     225.embedInputPer i {
     226    font-size: 13px;
     227    color: #222;
     228    border: 1px solid transparent;
     229    width: 36px;
     230    height: 29px;
     231    display: flex;
     232    justify-content: center;
    292233    cursor: pointer;
    293     line-height: 17px;
    294     padding-left: 30px;
    295     display: inline-block;
    296     font-size: 15px;
    297 }
    298 .cusCheckBox [type="checkbox"]:not(:checked) + label:before, .cusCheckBox [type="checkbox"]:not(:checked) + .decisionCusCheckBox:before {
    299     border: 1px solid #ddd;
     234    font-style: normal;
     235    line-height: 28px;
     236}
     237.embedInputPer i.selected {
     238    background: #fafffe;
     239    border: 1px solid #7acab8;
     240    border-radius: 4px;
     241    cursor: default;
     242}
     243
     244.embedFormInputField {
     245display: flex;
     246flex-flow: column;
     247width: 100%;
     248margin-bottom: 10px;
     249gap: 16px;
     250}
     251.embedFormInputField span {
     252
     253}
     254.embedFormInputField label {
     255font-size: 13px;
     256display: block;
     257margin-bottom: 8px;
     258color: #222;
     259font-weight: 600;
     260}
     261.embedFormInputField span:last-child {
     262float: right;
     263}
     264.embedFormInputField input[type="text"] {
     265    width: 140px;
     266    box-sizing: border-box;
     267    border-radius: 4px;
     268    border: 1px solid #ccd6e0;
     269    padding: 7px 87px 7px 10px;
     270    font-size: 13px;
     271    height: 38px;
     272}
     273.embedIncldeParamtrs span {
     274font-size: 14px;
     275color: #6b6b6b;
     276line-height: 23px;
     277margin-bottom: 15px;
     278margin-top: 10px;
     279display: flex;
     280flex-wrap: wrap;
     281}
     282.embedParameterValue {
     283border: 1px solid #eaeaea;
     284display: inline-block;
     285width: 100%;
     286padding-bottom: 7px;
     287border-radius: 4px;
     288margin-bottom: 10px;
     289}
     290.embedField {
     291background: #f3f5f9;
     292border-bottom: 1px solid #eaeaea;
     293padding: 10px 20px;
     294display: inline-block;
     295width: 100%;
     296box-sizing: border-box;
     297border-radius: 3px 3px 0 0;
     298}
     299.embedIncldeParamtrs label {
     300font-size: 15px;
     301font-weight: 500;
     302}
     303
     304.embedFiel_Col1 {
     305width: 270px;
     306float: left;
     307font-size: 14px;
     308color: #000;
     309font-weight: 500;
     310}
     311.embedFiel_Col2 {
     312width: 270px;
     313float: left;
     314font-size: 14px;
     315color: #000;
     316font-weight: 500;
     317margin-left: 25px;
     318}
     319.addparamsWrap {
     320display: flex;
     321align-items: center;
     322gap: 16px;
     323width: 100%;
     324float: left;
     325padding: 14px 20px;
     326border-bottom: 1px solid #eaeaea;
     327box-sizing: border-box;
     328}
     329.addparamsWrap:last-of-type {
     330border-bottom: none;
     331}
     332.fiedPropPlus, .fiedPropMinus{
     333width: 24px;
     334height: 24px;
     335background: url(./images/fieldprop-plus.png) no-repeat;
     336background-size: contain;
     337margin-top: 2px;
     338float: left; cursor: pointer;
     339left: 0px !important;
     340}
     341.fiedPropMinus {
     342background: url(./images/fieldprop-minus.png) no-repeat;
     343background-size: contain;
     344margin-left: 8px;
     345}
     346.addParamaFeld {
     347flex-grow: 1;
     348width: 220px;
     349}
     350.addParamaFeld input[type="text"] {
     351width: 100%;
     352border-radius: 3px;
     353border: 1px solid #ccd6e0;
     354box-sizing: border-box;
     355padding: 7px 10px;
     356font-size: 13px;
     357height: 36px;
     358}
     359input[type="text"]:disabled {
     360background: #ececec;
     361}
     362
     363
     364
     365
     366/* Rewamp UI Css Start */
     367.connFormCont {
     368background: #fff;
     369border: 1px solid #ddd;
     370border-radius: 8px;
     371}
     372.connFormHeader {
     373width: 100%;
     374box-sizing: border-box;
     375padding: 20px 32px;
     376display: flex;
     377align-items: center;
     378border-bottom: 1px solid rgba(230, 230, 230, 0.6);
     379border-radius: 8px 8px 0 0;
     380flex-shrink: 0;
     381position: relative;
     382background: #fff;
     383overflow: hidden;
     384}
     385.connFormHeader i {
     386width: 32px;
     387height: 32px;
     388}
     389.connFormHeader i img {
     390width: 32px;
     391height: 32px;
     392}
     393.connFormHeader h4 {
     394font-size: 18px;
     395color: #000;
     396font-weight: bold;
     397overflow: hidden;
     398text-overflow: ellipsis;
     399text-align: left;
     400margin: 0;
     401margin-left: 12px;
     402padding: 0;
     403}
     404.connFormHeader i {
     405width: 22px;
     406height: 22px;
     407}
     408.connFormHeader i img {
     409width: 22px;
     410height: 22px;
     411}
     412.connFormFooter {
     413width: 100%;
     414grid-gap: 16px;
     415padding: 18px 32px;
     416border-top: 1px solid #ddd;
     417box-sizing: border-box;
     418display: flex;
     419justify-content: end;
     420align-items: center;
     421}
     422.connFormFooter button {
     423border-radius: 50px;
     424padding: 12px 32px;
     425background: #fff;
     426border: 1px solid #d3dce0;
     427font-size: 14px;
     428min-width: 105px;
     429position: relative;
     430}
     431.connFormFooter button:hover {
     432border: 1px solid #d3dce0;
     433background: rgb(241 244 247 / 50%);
     434}
     435.connFormFooter .greenBtnNew {
     436background: #24a68a;
     437color: #fff;
     438border: 1px solid #24a68a;
     439}
     440.connFormFooter .greenBtnNew:hover,
     441.refFormFooter .greenBtnNew:hover {
     442box-shadow: 0px 6px 45px 0px rgba(0, 0, 0, 0.18) inset;
     443background: #24a68a;
     444border: 1px solid #24a68a;
     445}
     446.customAddMapping {
     447display: flex;
     448align-items: center;
     449justify-content: space-evenly;
     450padding: 10px 0;
     451border-bottom: 1px solid rgba(230, 230, 230, 0.6);
     452background: #f6f8fb;
     453position: relative;
     454}
     455.customAddMapping::before {
     456content: "";
     457position: absolute;
     458width: 50%;
     459border-top: 1px dashed #a3a6b0;
     460}
     461.customAddMapping a {
     462background: #f6f8fb;
     463position: relative;
     464padding: 0 10px;
     465display: flex;
     466align-items: center;
     467}
     468.customAddMapping span {
     469display: inline-flex;
     470align-items: center;
     471justify-content: center;
     472width: 27px;
     473height: 27px;
     474border-radius: 10px;
     475background: #fff;
     476border: 1px solid #e3dddd;
     477font-size: 12px;
     478color: #444;
     479font-weight: 500;
     480margin-right: 8px;
     481}
     482.customAddMapping a.is-selected span {
     483border: 1px solid transparent;
     484background: #24a68a;
     485color: #fff;
     486}
     487.customAddMapping span img {
     488    width: 14px;
     489}
     490.customAddMapping em {
     491color: #222;
     492font-size: 14px;
     493font-weight: 500;
     494max-width: 200px;
     495overflow: hidden;
     496text-overflow: ellipsis;
     497white-space: nowrap;
     498display: inline-block;
     499padding-right: 2px;
     500font-style: normal;
     501}
     502.customAddMapping a.is-selected em {
     503color: #23a689;
     504}
     505.zf-wb-signWrapper {
     506display: flex;
     507box-sizing: border-box;
     508width: 100%;
     509padding: 32px;
     510text-align: left;
     511flex-direction: column;
     512overflow: hidden;
     513overflow-y: auto;
     514position: relative;
     515}
     516.zf-wb-signWrapper h2 {
     517font-size: 15px;
     518color: #000;
     519font-weight: 500;
     520margin: 0;
     521margin-bottom: 12px;
     522}
     523.accCardCont {
     524display: flex;
     525flex-flow: column;
     526gap: 20px;
     527}
     528.accConectCard {
     529    border: 1px solid #e2e8ef;
     530    border-radius: 12px;
     531    padding: 20px;
     532    cursor: pointer;
     533    display: flex;
     534    align-items: center;
     535    gap: 20px;
     536}
     537.accConectCard:hover {
     538border: 1px solid #c2c8ce;
     539}
     540.accConectCard.selected {
     541border: 1px solid #23a689;
     542background: #fafffe;
     543}
     544.accConectCard i {
     545    width: 50px;
     546    height: 50px;
     547    border: 1px solid #e2e8ef;
     548    border-radius: 12px;
    300549    background: #fff;
    301 }
    302 .cusCheckBox [type="checkbox"] + label::before{
    303    
    304     background-color: #fff;
    305     border: 1px solid #24A68A;
    306     box-sizing: content-box;
    307     content: '';
    308     color: #444;
    309     margin-right: 7px;
    310     top: 0;
    311     left: 0;
    312     width: 15px;
    313     height: 15px;
    314     display: inline-block;
    315     vertical-align: middle;
    316     position: absolute;
    317 }
    318 .cusCheckBox [type="checkbox"]:checked + label::after{
    319     content: '';
    320     -webkit-transform: rotate(-45deg) scale(1);
    321     transform: rotate(-45deg) scale(1);
    322     transition: -webkit-transform 200ms ease-out;
    323     transition: transform 200ms ease-out;
    324     transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
    325 }
    326 
    327 .cusCheckBox [type="checkbox"] + label::after {
    328   background-color: transparent;
    329     box-sizing: content-box;
    330     content: '';
    331     position: absolute;
    332     top: 9px;
    333     left: 4px;
    334     width: 7px;
    335     height: 4px;
    336     margin-top: calc(24px / -2 / 2 * 0.8);
    337     border-style: solid;
    338     border-color: #24A68A;
    339     border-width: 0 0 2px 2px;
    340     border-radius: 0;
    341     -o-border-image: none;
    342     border-image: none;
    343     -webkit-transform: rotate(-45deg) scale(0);
    344     transform: rotate(-45deg) scale(0);
    345     transition: none;
    346 }
    347 
    348 .cusCheckBox {
    349     margin-bottom: 3px;
    350 }
    351 
    352 .embedFormInputField {
    353     display: inline-block;
    354     width: 100%;
    355     margin-bottom: 10px;
    356     margin-top: 10px;
    357 }
    358 .embedFormInputField span {
    359     width: 45%;
    360     float: left;
     550    display: flex;
     551    align-items: center;
     552    justify-content: center;
     553    box-sizing: border-box;
     554    flex-shrink: 0;
     555}
     556.accConectCard i img {
     557width: 18px;
     558}
     559.accConectCard h4 {
     560font-size: 15px;
     561color: #000;
     562font-weight: 500;
     563margin: 0;
     564margin-bottom: 6px;
     565}
     566.accConectCard p {
     567color: #454e5c;
     568font-size: 14px;
     569line-height: 150%;
     570margin: 0;
     571font-weight: 400;
     572}
     573.embedFormDivider {
     574width: 100%;
     575height: 1px;
     576background: #e2e8ef;
     577margin: 24px 0;
     578}
     579.tabs {
     580display: inline-flex;
     581width: auto;
     582border: 1px solid #d0d8e2;
     583border-radius: 3px;
     584height: 38px;
     585margin-bottom: 24px;
     586box-sizing: border-box;
     587}
     588
     589.tab {
     590background: #fff;
     591border-radius: 3px;
     592color: #46546a;
     593font-size: 14px;
     594cursor: pointer;
     595padding: 10px 24px;
     596border: none;
     597outline: none;
     598width: 119px;
     599}
     600
     601.tab.active {
     602color: #24a68a;
     603border-radius: 0 0 0 0;
     604background: #fbfffe;
     605position: relative;
     606}
     607.tab.active:before {
     608position: absolute;
     609left: -1px;
     610top: -1px;
     611right: -1px;
     612bottom: -1px;
     613content: "";
     614border: 1px solid #24a68a;
     615border-radius: 3px;
     616}
     617
     618.refreshCont {
     619padding: 24px 32px;
     620display: flex;
     621flex-flow: column;
     622align-items: center;
     623justify-content: center;
     624min-height: 360px;
     625}
     626.refreshCont img {
     627width: 120px;
     628height: 120px;
     629margin-bottom: 16px;
     630}
     631.refreshCont h3 {
     632font-size: 14px;
     633color: #222;
     634margin-bottom: 28px;
     635font-weight: 600;
     636}
     637.refFormFooter {
     638display: flex;
     639align-items: center;
     640justify-content: center;
     641gap: 16px;
     642}
     643.refFormFooter button {
     644border-radius: 50px;
     645padding: 12px 32px;
     646background: #fff;
     647border: 1px solid #d3dce0;
     648font-size: 14px;
     649min-width: 105px;
     650position: relative;
     651}
     652.refFormFooter .greenBtnNew {
     653background: #24a68a;
     654color: #fff;
     655border: 1px solid #24a68a;
     656}
     657.newBtnLoader {
     658font-size: 7px;
     659float: left;
     660margin: 2px 6px 0 0;
     661text-indent: -9999em;
     662width: 2em;
     663height: 2em;
     664border-radius: 50%;
     665background: #ffffff;
     666background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     667background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     668background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     669background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     670background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     671-webkit-animation: newload 0.8s infinite linear;
     672animation: newload 0.8s infinite linear;
     673-webkit-transform: translateZ(0);
     674-ms-transform: translateZ(0);
     675transform: translateZ(0);
     676/* display: none; */
     677position: absolute;
     678left: 13px;
     679}
     680.newBtnLoader:before {
     681width: 50%;
     682height: 50%;
     683background: #ffffff;
     684border-radius: 100% 0 0 0;
     685position: absolute;
     686top: 0;
     687left: 0;
     688content: '';
     689}
     690.newBtnLoader:after {
     691background: rgb(36 166 138);
     692width: 75%;
     693height: 75%;
     694border-radius: 50%;
     695content: '';
     696margin: auto;
     697position: absolute;
     698top: 0;
     699left: 0;
     700bottom: 0;
     701right: 0;
     702}
     703.greenBtnNew:hover .newBtnLoader:after {
     704    background: #209479;
     705}
     706
     707.embedFormUsing label {
     708font-size: 14px;
     709color: #222;
     710font-weight: 500;
     711margin-bottom: 8px;
     712display: block;
     713}
     714.embedFormUsing {   
     715margin-bottom: 15px;
    361716}
    362717.embedFormInputField label {
    363     font-size: 14px;
    364     display: block;
    365     margin-bottom: 10px;
    366 }
    367 .embedFormInputField span:last-child {
    368     float: right;
    369 }
    370 .embedFormInputField input[type="text"] {
    371     width: 100%;
    372     box-sizing: border-box;
    373     border-radius: 3px;
    374     border: 1px solid #ccc;
    375     padding: 7px 10px;
    376     font-size: 13px;
    377 }
    378 .embedIncldeParamtrs span {
    379     font-size: 14px;
    380     color: #6b6b6b;
    381     line-height: 23px;
    382     position: relative;
    383     left: 30px;
    384     margin-bottom: 15px;
    385     display: inline-block;
    386 }
    387 .embedParameterValue {
    388     border: 1px solid #ccc;
    389     display: inline-block;
    390     width: 100%;
    391     padding-bottom: 7px;
    392 }
    393 .embedField {
    394     background: #f6f6f6;
    395     padding: 10px 20px;
    396     margin-bottom: 15px;
    397     display: inline-block;
    398     width: 100%;
    399     box-sizing: border-box;
    400 }
    401 .embedFiel_Col1 {
    402     width: 240px;
    403     float: left;
    404     font-size: 14px;
    405 }
    406 .embedFiel_Col2 {
    407     width: 200px;
    408     float: left;
    409     font-size: 14px;
    410     margin-left: 67px;
    411 }
    412 .addparamsWrap {
    413     display: inline-block;
    414     width: 100%;
    415     margin-bottom: 16px;
    416     float: left;
    417     padding: 0 20px;
    418 }
    419 .intArrow {
    420     border-bottom: 1px dashed #afafaf;
    421     font-size: 13px;
    422     font-weight: 300;
    423     width: 75px;
    424     position: relative;
    425     margin-left: 15px;
    426     margin-right: 15px;
    427     display: inline-block;
    428     float: left;
    429     vertical-align: middle;
    430     top: 15px;
    431     margin-left: 20px;
    432     margin-right: 20px;
    433 }
    434 .intArrow .arrowImg {
    435     background: url(./tinymce/paramtrArrow.jpg) no-repeat;
    436    width: 5px;
    437     height: 10px;
    438     display: block;
    439     top: -4px;
    440     position: absolute;
    441     right: 0;
    442     opacity: 0.8;
    443 }
    444 .fiedPropPlus, .fiedPropMinus{
    445    width: 24px;
    446    height: 24px;
    447    background: url(./tinymce/fieldprop-plus.png) no-repeat;
    448    background-size: contain;
    449    margin-top: 2px;
    450    float: left; cursor: pointer;
    451    margin-left: 15px;
    452    left: 0px !important;
    453 }
    454 .fiedPropMinus {
    455     background: url(./tinymce/fieldprop-minus.png) no-repeat;
    456     background-size: contain;
    457     margin-left: 8px;
    458 }
    459 .addParamaFeld {
    460     width: 190px;
    461     float: left;
    462 }
    463 .addParamaFeld input[type="text"] {
    464     width: 100%;
    465     border-radius: 3px;
    466     border: 1px solid #ccc;
    467     box-sizing: border-box;
    468     padding: 7px 10px;
    469     font-size: 13px;
    470 }
    471 input[type="text"]:disabled {
    472     background: #ececec;
    473 }
     718color: #222;
     719font-weight: 500;
     720}
     721.zf-Wp-plusminus {
     722display: flex;
     723}
     724.block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
     725max-width: 750px;
     726}
     727.zf-wb-dropWrapper::before {
     728display: none;
     729}
     730.zf-wb-innerWrapper .select2-container .selection {
     731width: 100%;
     732display: block;
     733height: 38px;
     734border: none;
     735}
     736.zf-wb-innerWrapper .select2-container--default .select2-selection--single {
     737background-color: #fff;
     738border: none;
     739border-radius: 4px;
     740height: 38px;
     741line-height: 41px;
     742}
     743.zf-wb-innerWrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
     744color: #444;
     745line-height: 38px;
     746font-size: 13px;
     747font-weight: 400;
     748padding-left: 12px;
     749}
     750.zf-wb-containerWrapper .select2-dropdown {
     751z-index: 100000;
     752background: #fff;
     753border: 1px solid #d3dce0;
     754-webkit-border-radius: 0px 0px 8px 8px;
     755-moz-border-radius: 0px 0px 8px 8px;
     756border-radius: 8px;
     757box-shadow: 0px 1px 15px 0px #0000001A;
     758box-sizing: border-box;
     759}
     760.zf-wb-containerWrapper .select2-results__option {
     761padding: 9px 12px;
     762border-radius: 4px;
     763margin-bottom: 2px;
     764position: relative;
     765line-height: 150%;
     766font-size: 13px;
     767color: #222 !important;
     768}
     769
     770.zf-wb-containerWrapper .select2-container--default .select2-results__option--highlighted[aria-selected] {
     771background: rgb(241 244 247 / 70%);
     772color: #222 !important;
     773}
     774.zf-wb-containerWrapper .select2-container--default .select2-results__option[aria-selected=true] {
     775background:  rgb(233 246 243) !important;
     776color: rgb(36 166 138) !important;
     777}
     778.zf-wb-containerWrapper .select2-container--default .select2-results > .select2-results__options {
     779margin: 4px;
     780}
     781.zf-wb-containerWrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
     782border-color: #888 transparent transparent transparent;
     783border-style: solid;
     784left: 3px;
     785margin-left: -4px;
     786margin-top: -2px;
     787position: absolute;
     788top: 50%;
     789width: 7px;
     790height: 7px;
     791border-width: 0;
     792border-top: 1.5px solid rgb(34 34 34);
     793border-left: 1.5px solid rgb(34 34 34);
     794transform: rotate(223deg);
     795}
     796
     797.zf-wb-containerWrapper .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     798transform: rotate(47deg);
     799width: 7px;
     800height: 7px;
     801border-width: 0;
     802border-top: 1.5px solid #222;
     803border-left: 1.5px solid #222;
     804top: 57%;
     805}
     806
     807@-webkit-keyframes newload {
     8080% {
     809-webkit-transform: rotate(0deg);
     810transform: rotate(0deg);
     811}
     812
     813100% {
     814-webkit-transform: rotate(360deg);
     815transform: rotate(360deg);
     816}
     817}
     818
     819@keyframes newload {
     8200% {
     821-webkit-transform: rotate(0deg);
     822transform: rotate(0deg);
     823}
     824
     825100% {
     826-webkit-transform: rotate(360deg);
     827transform: rotate(360deg);
     828}
     829}
     830/* Rewamp UI Css End */
     831
     832

  • zoho-forms/tags/5.0/zohoforms-block.js

    r3729081 r3748754  
    77        alt: "Zoho Forms"
    88});
    9 var backSvgIcon = wpCreateElem('svg', null,
    10     wpCreateElem('path', { d: "M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z"} )
    11     );
    129var zohoFormsAttributes = {
    1310        zf_short_code: {type: 'string'},
    … …  
    3835                        return jQuery(blockRef.current).find(selector);
    3936                }
     37                wpElem.useEffect(function(){
     38                        if(!blockRef.current || !jQuery.fn.select2){
     39                                return;
     40                        }
     41                        var $block = jQuery(blockRef.current);
     42                        var ownerDoc = blockRef.current.ownerDocument;
     43                        function setupSelect(selector, onChange){
     44                                var $el = $block.find(selector);
     45                                if(!$el.length || $el.data("select2")){
     46                                        return;
     47                                }
     48                                $el.select2({
     49                                        width: "100%",
     50                                        dropdownParent: $block,
     51                                        minimumResultsForSearch: Infinity
     52                                });
     53                                $el.on("change.zfSelect2", onChange);
     54                        }
     55                        setupSelect("#zf_domain", hideDomainError);
     56                        setupSelect("#zf_formslist", formSelectOnchange);
     57                        function closeSelect2OnOutsideClick(event){
     58                                if(jQuery(event.target).closest(".select2-container").length){
     59                                        return;
     60                                }
     61                                $block.find("#zf_domain, #zf_formslist").each(function(){
     62                                        var $el = jQuery(this);
     63                                        if($el.data("select2")){
     64                                                $el.select2("close");
     65                                        }
     66                                });
     67                        }
     68                        jQuery(ownerDoc).on("mousedown.zfSelect2", closeSelect2OnOutsideClick);
     69                        return function(){
     70                                jQuery(ownerDoc).off("mousedown.zfSelect2", closeSelect2OnOutsideClick);
     71                                $block.find("#zf_domain, #zf_formslist").each(function(){
     72                                        var $el = jQuery(this);
     73                                        $el.off("change.zfSelect2");
     74                                        if($el.data("select2")){
     75                                                $el.select2("destroy");
     76                                        }
     77                                });
     78                        };
     79                }, []);
     80                var isAutoHeight = props.attributes.autoheight === true || props.attributes.autoheight === "true";
     81                wpElem.useEffect(function(){
     82                        if(!isAutoHeight || !blockRef.current){
     83                                return;
     84                        }
     85                        var ownerWindow = blockRef.current.ownerDocument.defaultView;
     86                        if(!ownerWindow){
     87                                return;
     88                        }
     89                        function onFormResize(event){
     90                                var evntData = event.data;
     91                                if(!evntData || evntData.constructor != String || !blockRef.current){
     92                                        return;
     93                                }
     94                                var zf_ifrm_data = evntData.split("|");
     95                                if(zf_ifrm_data.length != 2 && zf_ifrm_data.length != 3){
     96                                        return;
     97                                }
     98                                var iframe = blockRef.current.querySelector("iframe");
     99                                if(!iframe){
     100                                        return;
     101                                }
     102                                var zf_perma = zf_ifrm_data[0];
     103                                if(iframe.src.indexOf("formperma") < 0 || iframe.src.indexOf(zf_perma) < 0){
     104                                        return;
     105                                }
     106                                var zf_ifrm_ht_nw = (parseInt(zf_ifrm_data[1], 10) + 15) + "px";
     107                                var prevIframeHeight = iframe.style.height;
     108                                var zf_tout = false;
     109                                if(zf_ifrm_data.length == 3){
     110                                        iframe.scrollIntoView();
     111                                        zf_tout = true;
     112                                }
     113                                if(prevIframeHeight != zf_ifrm_ht_nw){
     114                                        if(zf_tout){
     115                                                ownerWindow.setTimeout(function(){
     116                                                        iframe.style.height = zf_ifrm_ht_nw;
     117                                                }, 500);
     118                                        }else{
     119                                                iframe.style.height = zf_ifrm_ht_nw;
     120                                        }
     121                                }
     122                        }
     123                        ownerWindow.addEventListener("message", onFormResize, false);
     124                        return function(){
     125                                ownerWindow.removeEventListener("message", onFormResize, false);
     126                        };
     127                }, [isAutoHeight, props.attributes.formPerma]);
    40128                if(isEmbedded){
    41                         return wpCreateElem("div", blockProps, wpCreateElem("iframe", {src: props.attributes.formPerma, width: props.attributes.width, height: props.attributes.height, frameborder:"0", allow : "geolocation;microphone;camera", "aria-label" : props.attributes.formtitle}));
     129                        var iframeSrc = props.attributes.formPerma;
     130                        if(isAutoHeight && iframeSrc && iframeSrc.indexOf("zf_rszfm=") === -1){
     131                                iframeSrc += (iframeSrc.indexOf("?") === -1 ? "?" : "&") + "zf_rszfm=1";
     132                        }
     133                        return wpCreateElem("div", blockProps, wpCreateElem("iframe", {src: iframeSrc, width: props.attributes.width, height: props.attributes.height, style: { border: "none", width: props.attributes.width, height: props.attributes.height, transition: "all 0.5s ease" }, frameborder:"0", allow : "geolocation;microphone;camera", "aria-label" : props.attributes.formtitle}));
    42134                }
    43135                var $ = jQuery;
    … …  
    56148                        var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    57149                        $(newParam).removeAttr("elname");
    58                         $(newParam).show();
     150                        $(newParam).css("display", "");
    59151                        bindParamRow(newParam);
    60152                        $(newParam).insertAfter($(elem).parent().parent("div[eltype=keyValPair]"));
    … …  
    74166                        getElem("#formPermaLinkPasteDiv").hide();
    75167                        getElem("#chooseZohoFormDiv").hide();
     168                        getElem("#blockEditShortCodeDiv").hide();
    76169                        getElem("#zfHomeDiv").show();
    77170                        getElem("#embedActionsDiv").hide();
     171                        selectMappingStep("choose");
     172                }
     173                function selectMappingStep(step){
     174                        if(step == "embed"){
     175                                getElem("#chooseFormStep").addClass("is-selected");
     176                                getElem("#configureEmbedStep").addClass("is-selected");
     177                                setStepCompleted("#chooseFormStep", true);
     178                                setStepCompleted("#configureEmbedStep", false);
     179                        }else{
     180                                getElem("#configureEmbedStep").removeClass("is-selected");
     181                                getElem("#chooseFormStep").addClass("is-selected");
     182                                setStepCompleted("#chooseFormStep", false);
     183                                setStepCompleted("#configureEmbedStep", false);
     184                        }
     185                }
     186                function setStepCompleted(stepSelector, completed){
     187                        var $step = getElem(stepSelector);
     188                        if(completed){
     189                                $step.find("span[elname=stepNumber]").hide();
     190                                $step.find("span[elname=tickIcon]").css("display", "");
     191                        }else{
     192                                $step.find("span[elname=stepNumber]").css("display", "");
     193                                $step.find("span[elname=tickIcon]").hide();
     194                        }
     195                }
     196                function selectConnectionCard(event){
     197                        getElem("#accessZohoFormsCard, #embedUsingPermalinkCard").removeClass("selected");
     198                        $(event.currentTarget).addClass("selected");
     199                }
     200                function proceedFromHome(){
     201                        if(getElem("#accessZohoFormsCard").hasClass("selected")){
     202                                getElem("#blockEditShortCodeDiv").hide();
     203                                chooseForm();
     204                        }else if(getElem("#embedUsingPermalinkCard").hasClass("selected")){
     205                                getElem("#blockEditShortCodeDiv").hide();
     206                                embedPerma();
     207                        }
    78208                }
    79209
    … …  
    92222                        if(formName!="-select-"){
    93223                                getElem("#embedActionsDiv").show();
    94                         }else{
    95                                 getElem("#embedActionsDiv").hide();
     224                                selectMappingStep("embed");
    96225                        }
    97226                }
    … …  
    100229                        var formPerma='', formTitle = '';
    101230                        if(getElem("#embedCatogory").val()=="formPerma"){
    102                                 formPerma = getElem("#permalink").val();
     231                                formPerma = String(getElem("#permalink").val()).trim();
     232                                var permaLinkErrElem = getElem('#permaLinkError');
    103233                                if(formPerma.length==0){
    104                                         var permaLinkErrElem = getElem('#permaLinkError');
     234                                        $(permaLinkErrElem).text("Please enter your form's permalink URL.");
     235                                        $(permaLinkErrElem).parent().addClass("zf-wb-errorCont");
     236                                        $(permaLinkErrElem).show();
     237                                        return;
     238                                }
     239                                if(formPerma.toLowerCase().indexOf("https://") !== 0){
     240                                        $(permaLinkErrElem).text("Enter a valid permalink Url");
    105241                                        $(permaLinkErrElem).parent().addClass("zf-wb-errorCont");
    106242                                        $(permaLinkErrElem).show();
    … …  
    117253                                formTitle = getElem("#zf_formslist").find(":selected").text();
    118254                        }
    119                         var height = getElem("#formHeight").val();
    120                         var width = getElem("#formWidth").val();
    121                         if(height == ""){
    122                                 height = '600px';
    123                         }
    124                         if(width == ""){
    125                                 width= '100%';
    126                         }
    127                         var embedType= "iframe";
    128                         if(getElem("#jsEmbed").is(":checked")){
    129                                 embedType ='js';
    130                         }
    131                         var autoHeight = false;
    132                         if(getElem("#autoHeightCB").is(":checked")){
    133                                 autoHeight =true;
    134                         }
     255                        var widthVal = getElem("#formWidth").val();
     256                        var widthUnit = getElem("#formWidth").closest(".embedInputCont").find("i.selected").attr("size_symbol") || "%";
     257                        if(widthVal == ""){
     258                                widthVal = "100" + widthUnit;
     259                        }else if(!/(px|%)$/.test(widthVal)){
     260                                widthVal = widthVal + widthUnit;
     261                        }
     262                        var heightVal = getElem("#formHeight").val();
     263                        var heightUnit = getElem("#formHeight").closest(".embedInputCont").find("i").attr("size_symbol") || "px";
     264                        if(heightVal == ""){
     265                                heightVal = "600" + heightUnit;
     266                        }else if(!/(px|%)$/.test(heightVal)){
     267                                heightVal = heightVal + heightUnit;
     268                        }
     269                        var embedType = "js";
     270                        var autoHeight = !getElem("#autoHeightCB").is(":checked");
    135271                        var urlParams = '';
    136272                        if(getElem("#queryParamsCB").is(":checked")){
    … …  
    157293                                }
    158294                        }
    159                         saveShortCode(formPerma,width,height,embedType,autoHeight,urlParams, formTitle);
     295                        saveShortCode(formPerma,widthVal,heightVal,embedType,autoHeight,urlParams, formTitle);
    160296                }
    161297                //form select error
    … …  
    189325                        getElem("#chooseZohoFormDiv").hide();
    190326                        getElem("#formPermaLinkPasteDiv").show();
     327                        getElem("#zFormSelectDiv").hide();
    191328                        getElem("#permalink").focus();
    192329                        getElem("#embedActionsDiv").show();
    193330                        getElem("#embedCatogory").val("formPerma");
     331                        selectMappingStep("embed");
    194332                }
    195333                //while choosing embed form threw formslist
    … …  
    212350                //Getting zoho forms and adding to list
    213351                function getZohoForms(){
    214                         getElem("#zfRefreshDiv").hide();
     352                        var refreshVisible = getElem("#zfRefreshDiv").is(":visible");
     353                        var domainVisible = getElem("#zDomaindiv").is(":visible");
     354                        if(!refreshVisible){
     355                                getElem("#zfRefreshDiv").hide();
     356                        }
    215357                        var newScript = document.createElement("script");
    216358                        var inlineScript = document.createTextNode("var a='';");
    … …  
    222364                                resetFormsList();
    223365                                if(zohoFormsURL != ""){
    224                                         getElem("#zDomaindiv").hide();
    225                                         getZohoFormsList(zohoFormsURL);
     366                                        if(domainVisible){
     367                                                getElem("#connectLoadingImgElem").show();
     368                                                getZohoFormsList(zohoFormsURL, "connect");
     369                                        }else if(refreshVisible){
     370                                                getElem("#refreshLoadingImgElem").show();
     371                                                getZohoFormsList(zohoFormsURL, "refresh");
     372                                        }else{
     373                                                getElem("#zDomaindiv").hide();
     374                                                getZohoFormsList(zohoFormsURL, false);
     375                                        }
    226376                                }else{
    227377                                        getElem("#zFormSelectDiv").hide();
    … …  
    243393                }
    244394                //reset forms list
     395                function syncSelect2(selector){
     396                        var $el = getElem(selector);
     397                        if($el.length && $el.data("select2")){
     398                                $el.trigger("change.select2");
     399                        }
     400                }
    245401                function resetFormsList(){
    246402                        hideFormSelectError();
    247                         getElem('#zf_formslist').find('option').remove();
    248                         getElem('#zf_formslist').append("<option value='-select-'>-Select-</option>");
     403                        var $list = getElem("#zf_formslist");
     404                        if($list.data("select2")){
     405                                $list.select2("close");
     406                        }
     407                        $list.find("option").remove();
     408                        $list.append("<option value='-select-'>-Select-</option>");
     409                        $list.val("-select-");
     410                        syncSelect2("#zf_formslist");
    249411                }
    250412                //constructing url based on domain extention
    … …  
    261423                }
    262424                //calling api and adding to dropdown
    263                 function getZohoFormsList(formsUrl){
     425                function getZohoFormsList(formsUrl, loader){
    264426                        var apiURL = formsUrl+"/api/getforms?type=plugin";
    265                         getElem("#loadingDiv").show();
    266                         getFormsAndIncludeScript(apiURL,addToFormListDropDown);
    267                 }
    268                 function showiframeOrJsChange(){
    269                         if(getElem("#jsEmbed").is(":checked")){
    270                                 getElem("#autoHeightDiv").slideDown();
    271                         }else{
    272                                 getElem("#autoHeightDiv").slideUp();
    273                         }
    274                         getElem("#autoHeightCB").prop("checked",false);
    275                         getElem("#formHeight").prop("disabled",false);
    276                         getElem("#formHeight").prop("placeholder","600px");
     427                        if(!loader){
     428                                getElem("#loadingDiv").show();
     429                        }
     430                        getFormsAndIncludeScript(apiURL, function(){
     431                                if(loader == "connect"){
     432                                        getElem("#connectLoadingImgElem").hide();
     433                                        getElem("#zDomaindiv").hide();
     434                                }else if(loader == "refresh"){
     435                                        getElem("#refreshLoadingImgElem").hide();
     436                                        getElem("#zfRefreshDiv").hide();
     437                                }
     438                                addToFormListDropDown();
     439                        });
    277440                }
    278441                function showOrHideUrlParamsDiv(){
    … …  
    285448                                $(newParam).removeAttr("elname");
    286449                                bindParamRow(newParam);
    287                                 $(newParam).show();
     450                                $(newParam).css("display", "");
    288451                                $(paramsDiv).append($(newParam));
    289452                                $(urlParamsDiv).slideDown();
    … …  
    293456                }
    294457
     458                function selectWidthUnit(event){
     459                        var $unit = jQuery(event.currentTarget);
     460                        $unit.siblings("i").removeClass("selected");
     461                        $unit.addClass("selected");
     462                }
     463                function allowOnlyNumbers(event){
     464                        var value = event.target.value.replace(/[^0-9]/g, "");
     465                        if(event.target.value !== value){
     466                                event.target.value = value;
     467                        }
     468                }
    295469                function disableOrEnableHeight(){
    296470                        if(getElem("#autoHeightCB").is(":checked")){
    297                                 getElem("#formHeight").prop("disabled",true);
    298                                 getElem("#formHeight").prop("placeholder","");
    299                                 getElem("#formHeight").val('');
     471                                getElem("#formHeightDiv").css("display", "");
    300472                        }else{
    301                                 getElem("#formHeight").prop("disabled",false);
    302                                 getElem("#formHeight").prop("placeholder","600px");
     473                                getElem("#formHeightDiv").hide();
    303474                        }
    304475                }
    … …  
    333504                    document.getElementsByTagName("head")[0].appendChild(script);       
    334505                }
     506                function getFormsWithFetch(){
     507                        fetch("/wp-json/zohoforms/v1/getforms")
     508                                .then(function(response){ return response.json(); })
     509                                .then(function(data){
     510                                        a = data;
     511                                        addToFormListDropDown();
     512                                });
     513                }
    335514                function addToFormListDropDown(){
    336515                        getElem("#zfRefreshDiv").hide();
    … …  
    349528                                                formList.options.add(option);
    350529                                        }
     530                                        syncSelect2("#zf_formslist");
    351531                                        getElem("#zFormSelectDiv").show();
     532                                        getElem("#formPermaLinkPasteDiv").hide();
    352533                                        getElem("#embedActionsDiv").show();
     534                                        selectMappingStep("embed");
    353535                                }
    354536                        }else{
    … …  
    373555                var domainDropDownElem = wpCreateElem("div",
    374556                                                                {
    375                                                                         id: "zDomaindiv",
    376                                                                         class: "zf-wb-innerWrapper"
     557                                                                        id: "zDomaindiv"
    377558                                                                },
    378                                                                 wpCreateElem("label",null,"Choose the domain where you've registered your Zoho account.",wpCreateElem("em",null,"*")),
     559                                                                wpCreateElem("div",
     560                                                                        {
     561                                                                                class: "zf-wb-innerWrapper zconnectMainCont"
     562                                                                        },
     563                                                                wpCreateElem("label",null,"Select the domain your Zoho account is registered on.",wpCreateElem("em",null,"*")),
    379564                                                                wpCreateElem("div",
    380565                                                                        {
    … …  
    442627                                                                            )
    443628                                                                        ),
    444                                                                 wpCreateElem("p",{ id:"domainErr", style:{display:'none'}},"Please choose a domain."),
    445                                                                 wpCreateElem("div",{class:"zf-wb-connect-btn zf-wb-Fotter"},wpCreateElem("button", { onClick: getZohoForms, class: "zf-wb-blue" },"Connect"))
     629                                                                wpCreateElem("p",{ id:"domainErr", style:{display:'none'}},"Please choose a domain.")
     630                                                                ),
     631                                                                wpCreateElem("div",
     632                                                                        {
     633                                                                                class: "connFormFooter"
     634                                                                        },
     635                                                                        wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     636                                                                        wpCreateElem("button",
     637                                                                                {
     638                                                                                        class: "greenBtnNew",
     639                                                                                        onClick: getZohoForms
     640                                                                                },
     641                                                                                wpCreateElem("em", { id: "connectLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     642                                                                                "Connect"
     643                                                                        )
     644                                                                )
    446645                                                                );
    447646                var formListEmbedDiv = wpCreateElem("div",
    … …  
    451650                                                                                display: 'none',
    452651                                                                        },
    453                                                                         class: "zf-wb-innerWrapper"
     652                                                                        class: "zf-wb-innerWrapper zf-wb-outerWrapper"
    454653                                                                },
    455654                                                                wpCreateElem("div",
    … …  
    480679                                                        {
    481680                                                            id: "zfRefreshDiv",
     681                                                            class: "refreshCont",
    482682                                                            style: {
    483683                                                              display: 'none'
    484                                                             },
    485                                                             class: "zf-wb-signWrapper"
     684                                                            }
    486685                                                        },
    487                                                         wpCreateElem("p", null,"Click 'Refresh' to choose a form."),
    488                                                         wpCreateElem("button", {  id: "refreshLink", onClick: getZohoForms, class: "zf-wb-lightblue" },"Refresh")
     686                                                        wpCreateElem("img", { src: zohoFormsBlock.refreshFormIcon }),
     687                                                        wpCreateElem("h3", null, "Sign in on the Zoho page, then come back and refresh to load your forms."),
     688                                                        wpCreateElem("div", { class: "refFormFooter" },
     689                                                                wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     690                                                                wpCreateElem("button", { class: "greenBtnNew", onClick: getZohoForms },
     691                                                                        wpCreateElem("em", { id: "refreshLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     692                                                                        "Refresh"
     693                                                                )
     694                                                        )
    489695                                                );
    490696                var createFormDiv = wpCreateElem("div",
    491697                                                                {
    492698                                                                    id: "zfCreateFormDiv",
     699                                                                    class: "refreshCont",
    493700                                                                    style: {
    494701                                                                      display: 'none'
    495                                                                     },
    496                                                                     class: "zf-wb-signWrapper"
     702                                                                    }
    497703                                                                },
    498                                                                 wpCreateElem("p", null,"You don't have any forms."),
    499                                                                 wpCreateElem("button", {  id: "createFormLink", onClick: openSigninOrCreateForm, class: "zf-wb-green"},"CREATE A NEW FORM")
     704                                                                wpCreateElem("img", { src: zohoFormsBlock.refreshFormIcon }),
     705                                                                wpCreateElem("h3", null, "You don't have any forms."),
     706                                                                wpCreateElem("div", { class: "refFormFooter" },
     707                                                                        wpCreateElem("button", { class: "greenBtnNew", onClick: openSigninOrCreateForm },
     708                                                                                wpCreateElem("em", { id: "createLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     709                                                                                "Create a new form"
     710                                                                        )
     711                                                                )
    500712                                                        );
    501713                var chooseZFormDiv = wpCreateElem("div",
    … …  
    507719                                                                    }
    508720                                                                },
    509                                                                 wpCreateElem("div",
    510                                                                         {class: "zf-wb-headwrap"},
    511                                                                         wpCreateElem("span",{class: "zf-wb-backIocn", onClick:goToHomeDiv},backSvgIcon),
    512                                                                         wpCreateElem("div",{class: "zf-wb-heading"},"Choose your form")
    513                                                                 ),
    514721                                                                wpCreateElem("div",{id: "loadingDiv", class: "zf-wb-loading" ,style: {display: 'none'}},wpCreateElem("p",null,"loading"),wpCreateElem("div",{class: "zf-wb-spinner"},wpCreateElem("div",{class:"bounce1"}),wpCreateElem("div",{class:"bounce2"}),wpCreateElem("div",{class:"bounce3"}))),
    515722                                                                domainDropDownElem,
    516                                                                 formListEmbedDiv,
    517723                                                                refreshDiv,
    518724                                                                createFormDiv
    … …  
    525731                                                                                style: { display:'none'}
    526732                                                                        },
    527                                                                         wpCreateElem("div",
    528                                                                                 {class: "zf-wb-headwrap"},
    529                                                                                 wpCreateElem("span",{class: "zf-wb-backIocn", onClick:goToHomeDiv},backSvgIcon),
    530                                                                                 wpCreateElem("div",{class: "zf-wb-heading"},"Enter form permalink")
    531                                                                         ),
    532733                                                                        wpCreateElem("div",
    533734                                                                                {
    … …  
    543744                                                                                        }
    544745                                                                                ),
    545                                                                                 wpCreateElem("p", { id: "permaLinkError", style: {display:'none'} },"Please enter your form's permalink URL."),
    546                                                                                 wpCreateElem("span",null,"Not sure where to find the permalink URL? ",wpCreateElem("a",{href: "https://www.zoho.com/forms/help/share/public-sharing.html#link", target: "_blank"},"Click here "),wpCreateElem("span",null,"to learn more."))
     746                                                                                wpCreateElem("p", { id: "permaLinkError", style: {display:'none'} },"Please enter the permalink URL."),
     747                                                                                wpCreateElem("span",null,"Need help finding your permalink? ",wpCreateElem("a",{href: "https://help.zoho.com/portal/en/kb/forms/sharing-forms/articles/sharing-a-form-publicly#Sharing_a_link", target: "_blank"},"Learn more"))
    547748                                                                        ),);
    548                 var embedTypeDIv = wpCreateElem("div", {
    549                                                                   class: "cusRadioButton",
    550                                                                   id: "embedTypeDiv"
    551                                                                 },
    552                                                                 wpCreateElem("span", {
    553                                                                   class: ""
    554                                                                 },
    555                                                                 wpCreateElem("input", {
    556                                                                   type: "radio",
    557                                                                   id: "iframeEmbed",
    558                                                                   name: "embedType",
    559                                                                   onClick: showiframeOrJsChange,
    560                                                                   value: "iframe",
    561                                                                   defaultChecked: true
    562                                                                 },),
    563                                                                 wpCreateElem("label", {
    564                                                                   for: "iframeEmbed"
    565                                                                 }, "iFrame")),
    566                                                                 wpCreateElem("span", {
    567                                                                   class: ""
    568                                                                 },
    569                                                                 wpCreateElem("input", {
    570                                                                   type: "radio",
    571                                                                   id: "jsEmbed",
    572                                                                   name: "embedType",
    573                                                                   onClick: showiframeOrJsChange,
    574                                                                   value: "iframe",
    575                                                                 },),
    576                                                                 wpCreateElem("label", {
    577                                                                   for: "jsEmbed"
    578                                                                 }, "Java Script")) 
    579                                                                 );
    580749                var urlParamsCBDiv = wpCreateElem("div",{
    581750                                                                        class: "embedIncldeParamtrs"
    … …  
    587756                                                                }), wpCreateElem("label", {
    588757                                                                  for: "queryParamsCB"
    589                                                                 }, "Add URL params")),
    590                                                                 wpCreateElem("span",null,"Include parameters to prefill forms and add referrers to track sources"));
     758                                                                }, "Add URL Parameters")),
     759                                                                wpCreateElem("span",null,"Prefill form fields and track where responses come from."));
    591760                var urlParamDiv = wpCreateElem("div",
    592761                                                          {
    … …  
    609778                                                                class: "embedFiel_Col2"
    610779                                                              },
    611                                                               wpCreateElem("label", null, "Parameter Value ")
     780                                                              wpCreateElem("label", null, "Parameter Value")
    612781                                                              ),
    613782                                                             
    … …  
    644813                                                            maxlength: "50"
    645814                                                          })),
    646                                                                 wpCreateElem("div",{
    647                                                                         class: "intArrow"
    648                                                                 },
    649                                                                 wpCreateElem("em",{class: "arrowImg"})),
    650815                                                           wpCreateElem("div", {
    651816                                                            class: "addParamaFeld"
    … …  
    671836                                                                {
    672837                                                                  id: "autoHeightDiv",
    673                                                                   class: "cusCheckBox",
    674                                                                   onChange : disableOrEnableHeight ,
    675                                                                   style: { display:'none'}
     838                                                                  class: "cusCheckBox autoHeightDiv"
    676839                                                                }, wpCreateElem("input", {
    677840                                                                  type: "checkbox",
    678841                                                                  id: "autoHeightCB",
     842                                                                  onChange: disableOrEnableHeight
    679843                                                                }), wpCreateElem("label", {
    680844                                                                  for: "autoHeightCB"
    681                                                                 }, "Set form height automatically."));
     845                                                                }, "Set custom height"));
    682846                var embedActionDiv = wpCreateElem("div",
    683847                                                                {
    684848                                                                id: "embedActionsDiv",
    685                                                                 //class: "zf-WpEmbeddedWrap",
     849                                                                class: "embedActionsDiv",
    686850                                                                        style: { display:'none'}
    687851                                                                },
     852                                                                wpCreateElem("div", { class: "zconnectMainCont" },
     853                                                                formListEmbedDiv,
     854                                                                permaLinkEmbedDiv,
     855                                                                wpCreateElem("div", { class: "embedFormDivider" }),
    688856                                                                wpCreateElem("div",
    689857                                                                {
    690858                                                                        class: "embedFormUsing",
    691859                                                                },
    692                                                                 wpCreateElem("label", null, "Embed form using", ),
    693                                                                 embedTypeDIv,
    694                                                                 autoHeightCBDiv,
    695860                                                                wpCreateElem("div",
    696861                                                                        {
    697862                                                                                class: "embedFormInputField"
    698863                                                                        },
    699                                                                         wpCreateElem("span",
    700                                                                                 {
    701                                                                                        
    702                                                                                 },
     864                                                                        wpCreateElem("span", null,
    703865                                                                                wpCreateElem("label", null, "Width "),
    704                                                                                 wpCreateElem("input",
    705                                                                                         {
     866                                                                                wpCreateElem("div", { class: "embedInputCont" },
     867                                                                                        wpCreateElem("input", {
    706868                                                                                        type: "text",
    707869                                                                                        id: "formWidth",
    708                                                                                         placeholder: "100%"
    709                                                                                         }
    710                                                                                 )
     870                                                                                        placeholder: "100",
     871                                                                                        onInput: allowOnlyNumbers
     872                                                                                        }),
     873                                                                                        wpCreateElem("div", { class: "embedInputPer" },
     874                                                                                                wpCreateElem("i", { onClick: selectWidthUnit, size_symbol: "px" }, "px"),
     875                                                                                                wpCreateElem("i", { class: "selected", onClick: selectWidthUnit, size_symbol: "%" }, "%")
     876                                                                                        )
     877                                                                                )
    711878                                                                        ),
     879                                                                        autoHeightCBDiv,
    712880                                                                        wpCreateElem("span",
    713881                                                                                {
    714                                                                                        
     882                                                                                        id: "formHeightDiv",
     883                                                                                        style: { display: "none" }
    715884                                                                                },
    716885                                                                                wpCreateElem("label", null, "Height "),
    717                                                                                 wpCreateElem("input",
    718                                                                                         {
     886                                                                                wpCreateElem("div", { class: "embedInputCont" },
     887                                                                                        wpCreateElem("input", {
    719888                                                                                        type: "text",
    720889                                                                                        id: "formHeight",
    721                                                                                         placeholder: "600px"
    722                                                                                         }
    723                                                                                 )
    724                                                                         ),
    725                                                                         //wpCreateElem("div",{class:"clearBoth"},null)
     890                                                                                        class: "formHeight",
     891                                                                                        placeholder: "600",
     892                                                                                        onInput: allowOnlyNumbers
     893                                                                                        }),
     894                                                                                        wpCreateElem("div", { class: "embedInputPer" },
     895                                                                                                wpCreateElem("i", { size_symbol: "px" }, "px")
     896                                                                                        )
     897                                                                                )
     898                                                                        )
    726899                                                                )),
     900                                                                wpCreateElem("div", { class: "embedFormDivider" }),
    727901                                                                        urlParamsCBDiv,
    728902                                                                        urlParamDiv,
    … …  
    731905                                                                                id: "paramError",
    732906                                                                        style: {display:'none'}
    733                                                                    },wpCreateElem("p", null,"Parameters should contain only alphanumeric characters, underscore, and hyphen.")),
    734                                                                 wpCreateElem("div",{class:"zf-wb-Fotter"},wpCreateElem("button",{class:"zf-wb-blue", onClick: zf_block_embed},"Embed"))
     907                                                                   },wpCreateElem("p", null,"Parameters should contain only alphanumeric characters, underscore, and hyphen."))
     908                                                                   ),
     909                                                                wpCreateElem("div", { class: "connFormFooter" },
     910                                                                        wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     911                                                                        wpCreateElem("button", { class: "greenBtnNew", onClick: zf_block_embed },
     912                                                                                wpCreateElem("em", { elem: "loadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     913                                                                                "Embed Form"
     914                                                                        )
     915                                                                )
    735916                                                        );
    736917                return wpCreateElem("div",
    … …  
    742923                                                }
    743924                                        ),
     925                                        wpCreateElem("link",
     926                                                {
     927                                                        href: zohoFormsBlock.select2CSS,
     928                                                        rel: "stylesheet"
     929                                                }
     930                                        ),
    744931                                        wpCreateElem("input",{
    745932                                                id:"embedCatogory",
    … …  
    747934                                                value:"formPerma"
    748935                                        }),
    749                                         wpCreateElem("div",
     936                                        wpCreateElem("div", { class: "connFormCont" },
     937                                                wpCreateElem("div", null,
     938                                                        wpCreateElem("div", { class: "connFormHeader" },
     939                                                                wpCreateElem("i", null,
     940                                                                        wpCreateElem("img", { src: zohoFormsBlock.zohoFormsIcon })
     941                                                                ),
     942                                                                wpCreateElem("h4", null, "Zoho Forms")
     943                                                        ),
     944                                                        wpCreateElem("div", { class: "customAddMapping" },
     945                                                                wpCreateElem("a", { id: "chooseFormStep", class: "is-selected" },
     946                                                                        wpCreateElem("span", { elname: "stepNumber" }, "1"),
     947                                                                        wpCreateElem("span", { elname: "tickIcon", style: { display: "none" } },
     948                                                                                wpCreateElem("img", { src: zohoFormsBlock.completedIcon, alt: "" })
     949                                                                        ),
     950                                                                        wpCreateElem("em", null, "Choose Form")
     951                                                                ),
     952                                                                wpCreateElem("a", { id: "configureEmbedStep" },
     953                                                                        wpCreateElem("span", { elname: "stepNumber" }, "2"),
     954                                                                        wpCreateElem("span", { elname: "tickIcon", style: { display: "none" } },
     955                                                                                wpCreateElem("img", { src: zohoFormsBlock.completedIcon, alt: "" })
     956                                                                        ),
     957                                                                        wpCreateElem("em", null, "Embed Settings")
     958                                                                )
     959                                                        )
     960                                                ),
     961                                                wpCreateElem("div",
    750962                                                        {
    751963                                                        id: "zfHomeDiv",
    752                                                            
    753                                                             class: "zf-wb-signWrapper"
     964                                                        class: "connFormInnCont"
    754965                                                        },
    755                                                         wpCreateElem("p", null,"You can choose a form from your Zoho forms account or enter your form's permalink URL and embed it."),
    756                                                         wpCreateElem("button", { class:"zf-wb-blue", onClick: chooseForm },"Access Zoho Forms"),
    757                                                         wpCreateElem("label",null,"or"),
    758                                                         wpCreateElem("a",{onClick: embedPerma},"Embed using permalink")
    759                                         ),     
    760                                         permaLinkEmbedDiv,
    761                                         chooseZFormDiv,
    762                                         embedActionDiv,
    763                                         wpCreateElem("div", { id: "blockEditShortCodeDiv"} )
     966                                                        wpCreateElem("div", { class: "zf-wb-signWrapper zconnectMainCont" },
     967                                                                wpCreateElem("h2", null, "Choose a way to embed your form"),
     968                                                                wpCreateElem("div", { class: "accCardCont" },
     969                                                                        wpCreateElem("div", { id: "accessZohoFormsCard", class: "accConectCard", onClick: selectConnectionCard },
     970                                                                                wpCreateElem("i", null, wpCreateElem("img", { src: zohoFormsBlock.accessFormIcon })),
     971                                                                                wpCreateElem("div", { class: "accCardRight" },
     972                                                                                        wpCreateElem("h4", null, "Access Zoho Forms"),
     973                                                                                        wpCreateElem("p", null, "Sign in to Zoho Forms and choose a form.")
     974                                                                                )
     975                                                                        ),
     976                                                                        wpCreateElem("div", { id: "embedUsingPermalinkCard", class: "accConectCard", onClick: selectConnectionCard },
     977                                                                                wpCreateElem("i", null, wpCreateElem("img", { src: zohoFormsBlock.permalinkIcon })),
     978                                                                                wpCreateElem("div", { class: "accCardRight" },
     979                                                                                        wpCreateElem("h4", null, "Use a Permalink"),
     980                                                                                        wpCreateElem("p", null, "Embed a form using its permalink URL.")
     981                                                                                )
     982                                                                        )
     983                                                                )
     984                                                        ),
     985                                                        wpCreateElem("div", { class: "connFormFooter" },
     986                                                                wpCreateElem("button", { class: "greenBtnNew", onClick: proceedFromHome }, "Next")
     987                                                        )
     988                                                ),
     989                                                chooseZFormDiv,
     990                                                embedActionDiv
     991                                        ),
     992                                        wpCreateElem("div", { id: "blockEditShortCodeDiv", style: { display: "none" } })
    764993                                );
    765994        }, //End of edit function

  • zoho-forms/trunk/readme.txt

    r3729093 r3748754  
    55Tags: contact form, form builder, custom form, forms, form plugin
    66Requires at least: 2.8
    7 Tested up to: 7.1
    8 Stable tag: 4.1
     7Tested up to: 7.1.3
     8Stable tag: 5.0
    99License: GPLv2 or later
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    230230== Changelog ==
    231231
     232= 5.0 =
     233
     234* Refreshed the Zoho Forms plugin with a new look for embedding forms.
     235
    232236= 4.1 =
    233237
    234238* Upgraded the Zoho Forms block to Block API version 3 for compatibility with the iframe-based block editor.
    235 
     239* Fixed the Zoho Forms block not working in the block editor from WordPress 7.1.
    236240= 4.0.4 =
    237241
    … …  
    292296== Upgrade Notice ==
    293297
    294 = 4.1 =
    295 
    296 * Required for WordPress 7.1 and later: the Zoho Forms block now supports the iframe-based block editor (Block API version 3).
    297 
    298 = 4.0.4 =
    299 
    300 * Enhanced iframe and JavaScript code of forms with required browser permissions and WCAG attributes.
     298= 5.0 =
     299
     300* Refreshed the Zoho Forms plugin with a new look for embedding forms.

  • zoho-forms/trunk/tinymce/zforms_dailog.css

    r3729081 r3748754  
    407407    padding: 0 20px;
    408408}
    409 .intArrow {
    410     border-bottom: 1px dashed #afafaf;
    411     font-size: 13px;
    412     font-weight: 300;
    413     width: 75px;
    414     position: relative;
    415     margin-left: 15px;
    416     margin-right: 15px;
    417     display: inline-block;
    418     float: left;
    419     vertical-align: middle;
    420     top: 15px;
    421     margin-left: 20px;
    422     margin-right: 20px;
    423 }
    424 .intArrow .arrowImg {
    425     background: url(paramtrArrow.jpg) no-repeat;
    426    width: 5px;
    427     height: 10px;
    428     display: block;
    429     top: -4px;
    430     position: absolute;
    431     right: 0;
    432     opacity: 0.8;
    433 }
    434409.fiedPropPlus, .fiedPropMinus{
    435410   width: 24px;
    436411   height: 24px;
    437    background: url(fieldprop-plus.png) no-repeat;
     412   background: url(../images/fieldprop-plus.png) no-repeat;
    438413   background-size: contain;
    439414   margin-top: 2px;
    … …  
    443418}
    444419.fiedPropMinus {
    445     background: url(fieldprop-minus.png) no-repeat; background-size: contain;
     420    background: url(../images/fieldprop-minus.png) no-repeat; background-size: contain;
    446421    margin-left: 8px;
    447422}

  • zoho-forms/trunk/tinymce/zforms_dailog.js

    r3729081 r3748754  
    9494        var embedType = $("#zf_embedCatogory").val();
    9595        if(embedType == "formPerma"){
    96                 var perma_link = document.getElementById("permalink").value;
     96                var perma_link = $.trim(document.getElementById("permalink").value);
    9797                if(perma_link.length==0)
    9898                {
    9999                        document.getElementById("permaLinkError").style.display="block";
    100100                        document.getElementById("permaLinkError").innerHTML="Please enter your form's public link.";
    101                         document.getElementById("permaContainer").classList.add("errorCont");
     101                        document.getElementById("permaContainer").classList.add("zf-wb-errorCont");
     102                        return;
     103                }
     104                if(perma_link.toLowerCase().indexOf("https://") !== 0)
     105                {
     106                        document.getElementById("permaLinkError").style.display="block";
     107                        document.getElementById("permaLinkError").innerHTML="Enter a valid permalink Url";
     108                        document.getElementById("permaContainer").classList.add("zf-wb-errorCont");
    102109                        return;
    103110                }
    … …  
    109116                        document.getElementById("formSelectionError").style.display="block";           
    110117                        document.getElementById("formSelectionError").innerHTML="Please select a form.";
    111                         document.getElementById("selctContainer").className= "errorCont";
     118                        document.getElementById("selctContainer").classList.add("zf-wb-errorCont");
    112119                        return;
    113120                }
    … …  
    126133                                if(!paramKeyRegex.test(paramKey)){
    127134                                        hasError = true;
    128                                         $(elem).find("input[elname=paramKey]").parent("div").addClass("errorCont");
     135                                        $(elem).find("input[elname=paramKey]").parent("div").addClass("zf-wb-errorCont");
    129136                                }
    130137                                if(paramKey!='' && paramVal!=''){
    … …  
    140147                        }
    141148                }
    142                 var formWidth = document.getElementById('width');
     149                var formWidth = document.getElementById('formWidth');
     150                var widthUnit = $("#formWidth").closest(".embedInputCont").find("i.selected").attr("size_symbol") || "%";
    143151                if(formWidth.value=="")
    144152                {
    145                         formWidth.value="100%";
    146                 }
    147                 var formHeight = document.getElementById('height');
     153                        formWidth.value="100"+widthUnit;
     154                }else if(!/(px|%)$/.test(formWidth.value)){
     155                        formWidth.value=formWidth.value+widthUnit;
     156                }
     157                var formHeight = document.getElementById('formHeight');
     158                var heightUnit = $("#formHeight").closest(".embedInputCont").find("i").attr("size_symbol") || "px";
    148159                if(formHeight.value=="")
    149160                {
    150                         formHeight.value="600px";
     161                        formHeight.value="600"+heightUnit;
     162                }else if(!/(px|%)$/.test(formHeight.value)){
     163                        formHeight.value=formHeight.value+heightUnit;
    151164                }
    152165                //insertContent(urlBuild,formWidth.value,formHeight.value);
    … …  
    170183                        tag +=' urlparams="'+urlParams+'"';
    171184                }
    172                 if($("#jsEmbed").is(":checked")){
    173                         tag +=' type=js';
    174                 }
    175                 if($("#autoHeightCB").is(":checked")){
     185                tag +=' type=js';
     186                if(!$("#autoHeightCB").is(":checked")){
    176187                        tag +=' autoheight=true'
    177188                }
    … …  
    203214        $("#chooseFormDiv").hide();
    204215        $("#embedActionsDiv").hide();
     216        selectMappingStep("choose");
     217}
     218
     219function selectMappingStep(step){
     220        if(step == "embed"){
     221                $("#chooseFormStep").addClass("is-selected");
     222                $("#configureEmbedStep").addClass("is-selected");
     223                setStepCompleted("#chooseFormStep", true);
     224                setStepCompleted("#configureEmbedStep", false);
     225        }else{
     226                $("#configureEmbedStep").removeClass("is-selected");
     227                $("#chooseFormStep").addClass("is-selected");
     228                setStepCompleted("#chooseFormStep", false);
     229                setStepCompleted("#configureEmbedStep", false);
     230        }
     231}
     232function setStepCompleted(stepSelector, completed){
     233        var $step = $(stepSelector);
     234        if(completed){
     235                $step.find("span[elname=stepNumber]").hide();
     236                $step.find("span[elname=tickIcon]").css("display", "");
     237        }else{
     238                $step.find("span[elname=stepNumber]").css("display", "");
     239                $step.find("span[elname=tickIcon]").hide();
     240        }
     241}
     242
     243function selectConnectionCard(card){
     244        $("#accessZohoFormsCard, #embedUsingPermalinkCard").removeClass("selected");
     245        $(card).addClass("selected");
     246}
     247
     248function proceedFromHome(){
     249        if($("#accessZohoFormsCard").hasClass("selected")){
     250                showChooseFormDiv();
     251        }else if($("#embedUsingPermalinkCard").hasClass("selected")){
     252                embedPerma();
     253        }
    205254}                       
    206255                       
    … …  
    210259        $("#zf_embedCatogory").val("formPerma");
    211260        $("#permaLinkDiv").show();
     261        $("#formSelectionDiv").hide();
    212262        $("#embedActionsDiv").show();
    213         if(document.getElementById("permaContainer").classList.contains("errorCont"))
    214         {
    215                 document.getElementById("permaContainer").classList.remove("errorCont");
     263        if(document.getElementById("permaContainer").classList.contains("zf-wb-errorCont"))
     264        {
     265                document.getElementById("permaContainer").classList.remove("zf-wb-errorCont");
    216266                document.getElementById("permaLinkError").style.display="none";
    217267        }
    … …  
    219269        //document.getElementById("permaLinkDiv").style.display="block";
    220270        document.getElementById("chooseFormDiv").style.display= "none";
    221         //document.getElementById("selectForm").classList.remove("selected");
    222        
     271        selectMappingStep("embed");
    223272}
    224273               
    225 function signin()
    226 {                               
    227         if(window.tinyMCE)
    228         {
    229                 var domainValue = $("#zForm_domain").val();
    230                 var formsUrl = getZohoURL(domainValue);
    231                 if(formsUrl !=""){
    232                         window.open(formsUrl+"/forms/login.html");
    233                         document.getElementById("refreshDiv").style.display="block";
    234                         document.getElementById("signinDiv").style.display="none";
    235                 }
    236         }                               
     274var signInTabOpened = false;
     275function openSignInTab(formsUrl){
     276        if(!signInTabOpened && formsUrl !=""){
     277                signInTabOpened = true;
     278                window.open(formsUrl);
     279        }
     280        $("#zDomaindiv").hide();
     281        $("#zfCreateFormDiv").hide();
     282        document.getElementById("zfRefreshDiv").style.display="flex";
    237283}
    238284function appendScript()
    … …  
    259305        $("#zf_tiny_homeDiv").hide();
    260306        $("#zf_embedCatogory").val("formSelect");
    261         //document.getElementById("selectForm").classList.add("selected");
     307        document.getElementById("permaLinkDiv").style.display= "none";
     308        if(a!="" && a.forms && a.forms.length > 0){
     309                $("#chooseFormDiv").hide();
     310                $("#formSelectionDiv").show();
     311                $("#embedActionsDiv").show();
     312                selectMappingStep("embed");
     313                return;
     314        }
    262315        document.getElementById("chooseFormDiv").style.display="block";
    263         document.getElementById("permaLinkDiv").style.display= "none";
    264         //document.getElementById("publicLink").className= "none";
    265316        showEmbedActionsDiv();
    266317}
    267318
    268319function proceedToSelectFormOnTinyMce(){
    269         var domainValue = $("#zForm_domain").val();
     320        var domainValue = $("#zf_domain").val();
    270321        if(domainValue == "-select-"){
    271                 $("#domainSelectionErr").show();
    272                 $("#domainSelectionDiv").addClass("errorCont");
     322                $("#domainErr").show();
     323                $("#zDomaindiv").addClass("zf-wb-errorCont");
    273324                return;
    274325        }
    275326        var formsUrl = getZohoFormsURL(domainValue);
    276327        if(formsUrl !=""){
     328                signInTabOpened = false;
     329                var refreshVisible = $("#zfRefreshDiv").is(":visible");
     330                var loaderElem = refreshVisible ? $("#refreshLoadingImgElem") : $("#connectLoadingImgElem");
     331                loaderElem.show();
    277332                getZohoFormsLisOnTinyMce(formsUrl);
    278                 $("#domainSelectionDiv").hide();
    279                 $("#refreshDiv").hide();
    280                 $("#loadingDiv").show();
    281333                setTimeout(function() {
    282                 $("#loadingDiv").hide();
     334                loaderElem.hide();
    283335                if(a==""){
    284                                 $("#signinDiv").show();
    285                         }else if(a.forms.length == 0){
    286                                 $("#createFormDiv").show();
     336                                openSignInTab(formsUrl);
     337                                return;
     338                        }
     339                $("#zDomaindiv").hide();
     340                $("#zfRefreshDiv").hide();
     341                if(a.forms.length == 0){
     342                                $("#zfCreateFormDiv").show();
    287343                        }else{
     344                                $("#chooseFormDiv").hide();
     345                                $("#permaLinkDiv").hide();
    288346                                $("#formSelectionDiv").show();
     347                                $("#embedActionsDiv").show();
     348                                selectMappingStep("embed");
    289349                        }
    290350                       
    … …  
    294354function getZohoFormsLisOnTinyMce(formsUrl){
    295355                        var apiURL = formsUrl+"/api/getforms?type=plugin";
    296                         $("#loadingDiv").show();
    297356                        getFormsAndIncludeScriptOnTinyMce(apiURL,addToFormListDropDown);
    298357                }
    … …  
    310369                                                formList.options.add(option);
    311370                                        }
    312                                         $("#zFormSelectDiv").show();
     371                                        if($("#formname").data("select2")){
     372                                                $("#formname").trigger("change.select2");
     373                                        }
     374                                        $("#chooseFormDiv").hide();
     375                                        $("#permaLinkDiv").hide();
     376                                        $("#formSelectionDiv").show();
     377                                        $("#embedActionsDiv").show();
     378                                        selectMappingStep("embed");
    313379                                }
     380                        }else{
     381                                openSignInTab(getZohoFormsURL($("#zf_domain").val()));
    314382                        }
    315383                }
    … …  
    369437}
    370438function hideDomainSelctError(){
    371         $("#domainSelectionDiv").removeClass("errorCont");
    372         $("#domainSelectionErr").hide();
     439        $("#zDomaindiv").removeClass("zf-wb-errorCont");
     440        $("#domainErr").hide();
    373441}
    374442
    375443function hideError()
    376444{
    377         if(document.getElementById("permaContainer").classList.contains("errorCont"))
    378         {
    379                 document.getElementById("permaContainer").classList.remove("errorCont");
     445        if(document.getElementById("permaContainer").classList.contains("zf-wb-errorCont"))
     446        {
     447                document.getElementById("permaContainer").classList.remove("zf-wb-errorCont");
    380448                document.getElementById("permaLinkError").style.display="none";
    381449        }
    382         if(document.getElementById("selctContainer").classList.contains("errorCont")){
     450        if(document.getElementById("selctContainer").classList.contains("zf-wb-errorCont")){
    383451                document.getElementById("formSelectionError").style.display="none";
    384                 document.getElementById("selctContainer").classList.remove("errorCont");
     452                document.getElementById("selctContainer").classList.remove("zf-wb-errorCont");
    385453        }
    386454}
    … …  
    391459{
    392460        document.getElementById("selectForm").classList.add("selected");
    393         if(document.getElementById("selctContainer").classList.contains("errorCont"))
    394         {
    395                 document.getElementById("selctContainer").classList.remove("errorCont");
     461        if(document.getElementById("selctContainer").classList.contains("zf-wb-errorCont"))
     462        {
     463                document.getElementById("selctContainer").classList.remove("zf-wb-errorCont");
    396464                document.getElementById("formSelectionError").style.display="none";
    397465        }
    … …  
    401469                if(a.forms.length==0)
    402470                {
    403                         document.getElementById("createFormDiv").style.display="block";
     471                        document.getElementById("zfCreateFormDiv").style.display="block";
    404472                        document.getElementById("chooseFormDiv").style.display="none";
    405                         document.getElementById("signinDiv").style.display="none";
    406473                }
    407474                else
    408475                {
    409476                        document.getElementById("chooseFormDiv").style.display="block";
    410                         document.getElementById("signinDiv").style.display="none";
    411477                }       
    412478        }
    413479        else
    414         {       
    415                
    416                 document.getElementById("signinDiv").style.display="block";
    417 
    418 
    419                                
     480        {
     481                openSignInTab(getZohoFormsURL($("#zf_domain").val()));
    420482        }
    421483        document.getElementById("permaLinkDiv").style.display= "none";
    422         document.getElementById("refreshDiv").style.display="none";
     484        if(a!=""){
     485                document.getElementById("zfRefreshDiv").style.display="none";
     486        }
    423487        document.getElementById("publicLink").className= "none";
    424488}
    … …  
    436500function createForm()
    437501{
    438         var domainValue = $("#zForm_domain").val();
     502        var domainValue = $("#zf_domain").val();
    439503        var formsUrl = getZohoFormsURL(domainValue);
    440504        if(formsUrl !=""){
    441505                window.open(formsUrl); 
    442                 document.getElementById("refreshDiv").style.display="block";   
    443                 document.getElementById("createFormDiv").style.display="none";
    444                 document.getElementById("signinDiv").style.display="none";
     506                document.getElementById("zfRefreshDiv").style.display="flex";   
     507                document.getElementById("zfCreateFormDiv").style.display="none";
    445508        }
    446509}
    … …  
    454517                var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    455518                $(newParam).removeAttr("elname");
    456                 $(newParam).show();
     519                $(newParam).css("display", "");
    457520                $(paramsDiv).append($(newParam));
    458521                $(urlParamsDiv).slideDown();
    … …  
    465528        var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    466529        $(newParam).removeAttr("elname");
    467         $(newParam).show();
     530        $(newParam).css("display", "");
    468531        $(newParam).insertAfter($(elem).parent().parent("div[eltype=keyValPair]"));
    469532}
    470533
    471 function showiframeOrJsChange(){
    472         if($("#jsEmbed").is(":checked")){
    473                 $("#autoHeightDiv").slideDown();
    474         }else{
    475                 $("#autoHeightDiv").slideUp();
    476         }
    477         $("#autoHeightCB").prop("checked",false);
    478         $("#height").removeProp("disabled");
    479         $("#height").val("600px");
    480 
    481 }
    482534function deleteParam(elem){
    483535        $(elem).parent().parent("div").remove();
    … …  
    494546        if(formname !="-Select-"){
    495547                $("#embedActionsDiv").slideDown();
    496         }else{
    497                 $("#embedActionsDiv").slideUp();
    498         }
    499 
     548                selectMappingStep("embed");
     549        }
     550}
     551function selectWidthUnit(elem){
     552        $(elem).siblings("i").removeClass("selected");
     553        $(elem).addClass("selected");
     554}
     555function allowOnlyNumbers(elem){
     556        var value = elem.value.replace(/[^0-9]/g, "");
     557        if(elem.value !== value){
     558                elem.value = value;
     559        }
    500560}
    501561function disableHeight(){
    502562        if($("#autoHeightCB").is(":checked")){
    503                 $("#height").prop("disabled",true);
    504                 $("#height").val('');
     563                $("#formHeightDiv").css("display", "");
    505564        }else{
    506                 $("#height").removeProp("disabled");
    507                 $("#height").val('600px');
     565                $("#formHeightDiv").hide();
    508566        }
    509567}
    510568
    511569function hideparamError(elem){
    512         $(elem).parent("div").removeClass("errorCont");
     570        $(elem).parent("div").removeClass("zf-wb-errorCont");
    513571        $("#paramError").hide();
    514572}
     573
     574jQuery(function(){
     575        /*setTimeout(function(){
     576                if(!window.tinyMCEPopup || !tinyMCEPopup.uiWindow || !url){
     577                        return;
     578                }
     579                var titleEl = tinyMCEPopup.uiWindow.getEl("title");
     580                if(!titleEl || titleEl.getElementsByTagName("img").length){
     581                        return;
     582                }
     583                var icon = titleEl.ownerDocument.createElement("img");
     584                icon.src = url + "/../images/zohoforms.png";
     585                icon.alt = "";
     586                icon.style.width = "18px";
     587                icon.style.height = "18px";
     588                icon.style.marginRight = "8px";
     589                icon.style.verticalAlign = "middle";
     590                titleEl.insertBefore(icon, titleEl.firstChild);
     591        }, 0);*/
     592        function setupSelect(selector, onChange){
     593                var $el = jQuery(selector);
     594                if(!$el.length || !jQuery.fn.select2 || $el.data("select2")){
     595                        return;
     596                }
     597                $el.select2({
     598                        width: "100%",
     599                        dropdownParent: jQuery(".zf-WpPopupContainer"),
     600                        minimumResultsForSearch: Infinity
     601                });
     602                if(onChange){
     603                        $el.on("change.zfSelect2", onChange);
     604                }
     605        }
     606        setupSelect("#zf_domain", hideDomainSelctError);
     607        setupSelect("#formname");
     608        jQuery(document).on("mousedown.zfSelect2", function(event){
     609                if(jQuery(event.target).closest(".select2-container").length){
     610                        return;
     611                }
     612                jQuery("#zf_domain, #formname").each(function(){
     613                        var $el = jQuery(this);
     614                        if($el.data("select2")){
     615                                $el.select2("close");
     616                        }
     617                });
     618        });
     619});

  • zoho-forms/trunk/tinymce/zforms_dialog.php

    r3729081 r3748754  
    1515                <script language="javascript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce/utils/form_utils.js"></script>
    1616                <script type="text/javascript" src="jquery.js"></script>
     17                <script type="text/javascript" src="../lib/select2/select2.min.js"></script>
    1718                <script language="javascript" type="text/javascript" src="zforms_dailog.js"></script>
    18                 <link href="zforms_dailog.css" rel="stylesheet">               
    19      </head>
    20      <body style="background: rgba(0,0,0,0.7);">
     19                <!-- <link href="zforms_dailog.css" rel="stylesheet"> -->
     20                <link href="../lib/select2/select2.min.css" rel="stylesheet">
     21                <link href="../zohoforms-block.css" rel="stylesheet">
     22                <link href="zforms_newdialog.css" rel="stylesheet">
     23    </head>
     24    <body style="background: rgba(0,0,0,0.7);">
    2125       
    22                 <div class="zf-WpPopupContainer">
     26                <div class="zf-WpPopupContainer zf-wb-containerWrapper">
    2327                <div class="zf-WpMainWrap">
    2428
    2529                        <input id="zf_embedCatogory" type="hidden" value="formPerma">
    26                         <div class="zf-WpFormPermaWrap" id="zf_tiny_homeDiv" >
    27                                 <p>You can choose a form from your Zoho Form's account or enter your  form's permalink</p>
    28                                 <button onclick="showChooseFormDiv();">Access Zoho Forms</button>
    29                                 <span>or</span>
    30                                 <a onclick="embedPerma();">Enter Form Permalink</a>
    31                         </div>
    32 
    33                         <div class="zf-WpEmbeddedWrap zf-EmbedInner" id="permaLinkDiv" style="display:none">
    34                                 <div class="zf-WpEmbeddedHead">
    35                                                 <span onclick="goToHome();">
    36                                                         <img src="backbtn.jpg">
    37                                                 </span>
    38                                                 <h3>Embedded with Permalink</h3>
    39                                         </div>
    40                                        
    41 
    42                                         <div class="zf-WpEmbeddedContainer">
    43                                                   <div class="embeddedPublicLink" id="permaContainer">
    44                                                                 <label>Enter your form's public Link <em>*</em></label>
    45                                                                 <textarea onchange="hideError()" id="permalink"></textarea>
    46                                                                 <span>Not sure where to find your form's permalink URL? <a href="https://www.zoho.com/forms/help/share/public-sharing.html#link" target="_blank">Click here</a> to learn more.</span>
    47                                                                 <p id="permaLinkError" style="display:none;"/>
    48                                                         </div>
    49                                         </div>
    50                         </div>
    51                         <div class="zf-WpEmbeddedWrap zf-EmbedInner" id="chooseFormDiv" style="display: none;">
    52                                 <div class="zf-WpEmbeddedHead">
    53                                         <span onclick="goToHome();"><img src="backbtn.jpg"></span>
    54                                                 <h3>Choose your form</h3>
    55                                 </div>
    56                                 <div id="domainSelectionDiv" class="zf-WpSelectDomain">
    57                                         <label>Choose the domain where you've registered your Zoho account.<em>*</em></label>
    58                                                 <span class="cusDropArrow"></span>
    59                                                 <select id="zForm_domain" onchange="hideDomainSelctError()"; >
    60                                                         <option value="-select-">-Select-</option>
    61                                                         <option value=".com">zoho.com</option>
    62                                                         <option value=".eu">zoho.eu</option>
    63                                                         <option value=".com.cn">zoho.com.cn</option>
    64                                                         <option value=".in">zoho.in</option>
    65                                                         <option value=".com.au">zoho.com.au</option>
    66                                                         <option value=".jp">zoho.jp</option>
    67                                                         <option value=".ca">zohocloud.ca</option>
    68                                                         <option value=".sa">zoho.sa</option>
    69                                                 </select>
    70                                        
    71                                         <p id="domainSelectionErr" style="display:none">Please choose a domain.</p>
    72                                         <div class="zf-wpFooter" style="border-top: 0px;">
    73                                                 <button onclick="proceedToSelectFormOnTinyMce();">Connect</button>
    74                                         </div>
    75                                 </div>
    76                                 <div class="zf-WpSelectDomain zf-WpSelectFrm" id="formSelectionDiv" style="display:none">
    77                                         <div id="selctContainer">
    78                                                 <label>Choose a form<em>*</em></label>
    79                                                 <span class="cusDropArrow"></span>
    80                                                         <select id="formname" onchange="showEmbedActionsDiv();hideError();"; style="width: 100%" >
    81                                                                 <option value="-Select-">-Select-</option>
    82                                                         </select>
    83                                                
    84                                                 <p id="formSelectionError" />
    85                                         </div>
    86                                 </div>
    87                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="signinDiv" style="display:none">
    88                                                         <p> Sign in to your Zoho Forms account to select a form. </p>
    89                                                 <div class="zf-wpFooter" style="border-top: 0px;">
    90                                                         <button onclick="signin()">Sign In</button>
    91                                                 </div>
    92                                 </div>
    93                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="createFormDiv" style="display:none">
    94                                         <p> You have not created any forms yet. Click on Create to build a new form. </p>
    95                                         <div class="zf-wpFooter" style="border-top: 0px;">
    96                                                 <button onclick="createForm()">Create</button> 
    97                                         </div>
    98                                 </div>
    99                                 <div class="zf-WpFormPermaWrap zf-WpFormRefresh" id="refreshDiv" style="display:none">
    100                                         <p> Please Refresh to view your forms. </p>
    101                                         <div class="zf-wpFooter" style="border-top: 0px;">
    102                                                 <button id="button_refresh" onclick="proceedToSelectFormOnTinyMce()">Refresh</button>           
    103                                         </div>
    104                                 </div>
    105                                 <div id="loadingDiv" class="zf-WpFormPermaWrap zf-WpFormRefresh" style="display: none;">
     30            <div class="connFormCont">
     31                                <div>
     32                                        <!-- <div class="connFormHeader">
     33                                                <i>
     34                                                        <img src="../images/zohoforms.png" alt="">
     35                                                </i>
     36                                                <h4>Connect Your Form</h4>
     37                                        </div> -->
     38                                        <div class="customAddMapping">
     39                                                <a id="chooseFormStep" class="is-selected">
     40                                                        <span elname="stepNumber">1</span>
     41                                                        <span elname="tickIcon" style="display: none;">
     42                                                                <img src="../images/completed.png" alt="">
     43                                                        </span>
     44                                                        <em>Choose Form</em>
     45                                                </a>
     46                                                <a id="configureEmbedStep">
     47                                                        <span elname="stepNumber">2</span>
     48                                                        <span elname="tickIcon" style="display: none;">
     49                                                                <img src="../images/completed.png" alt="">
     50                                                        </span>
     51                                                        <em>Embed Settings</em>
     52                                                </a>
     53                                        </div>
     54                                </div>
     55                        <div id="zf_tiny_homeDiv" class="connFormInnCont">
     56                                <div class="zf-wb-signWrapper zconnectMainCont">
     57                                        <h2>Choose a way to embed your form</h2>
     58                                        <div class="accCardCont">
     59                                                <div id="accessZohoFormsCard" class="accConectCard" onclick="selectConnectionCard(this);">
     60                                                        <i>
     61                                                                <img src="../images/access-form.png" alt="">
     62                                                        </i>
     63                                                        <div class="accCardRight">
     64                                                        <h4>Access Zoho Forms</h4>
     65                                                        <p>Sign in to Zoho Forms and choose a form.</p>
     66                                                        </div>
     67                                                       
     68                                                </div>
     69                                                <div id="embedUsingPermalinkCard" class="accConectCard" onclick="selectConnectionCard(this);">
     70                                                        <i>
     71                                                                <img src="../images/icon-link.png" alt="">
     72                                                        </i>
     73                                                        <div class="accCardRight">
     74                                                        <h4>Use a Permalink</h4>
     75                                                        <p>Embed a form using its permalink URL.</p>
     76                                                        </div>
     77                                                       
     78                                                </div>
     79                                        </div>
     80                                </div>
     81                                <div class="connFormFooter">
     82                                        <button class="greenBtnNew" onclick="proceedFromHome();">Next</button>
     83                                </div>
     84                        </div>
     85
     86                        <div class="zf-wb-outerWrapper" id="chooseFormDiv" style="display: none;">
     87                                <div id="loadingDiv" class="zf-wb-loading" style="display: none;">
    10688                                        <p>loading</p>
    10789                                        <div class="zf-wb-spinner">
    … …  
    11193                                        </div>
    11294                                </div>
    113                         </div>
    114 
    115                         <div class="zf-WpEmbeddedWrap" id="embedActionsDiv" style="display:none">
    116                                 <div class="embedFormUsing">
    117                                         <label>Embed form using</label>
    118                                         <div class="flLeft cusRadioButton">
    119                                                 <span>
    120                                                         <input name="embedType" id="iframeEmbed" type="radio" value="iframe" checked="" onchange="showiframeOrJsChange();">
    121                                                         <label for="iframeEmbed">Iframe</label>
    122                                                 </span>
    123                                                 <span>
    124                                                         <input name="embedType" id="jsEmbed" type="radio" value="jsCode" onchange="showiframeOrJsChange();">
    125                                                         <label for="jsEmbed">Javascript</label>
    126                                                 </span>
    127                                         </div>
    128                                         <div id="autoHeightDiv" style="display:none;" class="flLeft cusCheckBox">
    129                                                 <input type="checkbox" id="autoHeightCB" onchange="disableHeight();">
    130                                                 <label for="autoHeightCB">Set form height automatically.</label>
    131                                         </div>
    132 
    133                                         <div class="embedFormInputField">
    134                                                 <span>
    135                                                         <label>Width</label>
    136                                                         <input type="text" value="100%" id="width">
    137                                                 </span>
    138                                                 <span>
    139                                                         <label>Height</label>
    140                                                         <input type="text" value ="600px" id="height">
    141                                                 </span>
    142                                         </div>
    143                                 </div>
    144                                 <div class="embedIncldeParamtrs">
    145                                         <div class="cusCheckBox">
    146                                                 <input type="checkbox" id="queryParamsCB" onchange="showOrHideUrlParamsDiv();">
    147                                                 <label for="queryParamsCB">Include URL Parameters</label>
    148                                         </div>
    149                                         <span>Include parameters to prefill forms and add referrers to track sources</span>
    150                                  </div>
    151                                  <div class="embedParameterValue" id="urlParamsDiv" style="display:none;">
    152                                                                 <div class="embedField">
    153                                                                                 <div class="embedFiel_Col1"> Parameter Name </div>
    154                                                                                 <div class="embedFiel_Col2"> Parameter Value  </div>
     95                                <div id="zDomaindiv" class="connFormInnCont">
     96                                        <div class="zf-wb-innerWrapper zconnectMainCont">
     97                                                <label>Select the domain your Zoho account is registered on. <em>*</em></label>
     98                                                <div class="zf-wb-dropWrapper">
     99                                                        <select id="zf_domain" onchange="hideDomainSelctError();">
     100                                                                <option value="-select-">-Select-</option>
     101                                                                <option value=".com">zoho.com</option>
     102                                                                <option value=".eu">zoho.eu</option>
     103                                                                <option value=".com.cn">zoho.com.cn</option>
     104                                                                <option value=".in">zoho.in</option>
     105                                                                <option value=".com.au">zoho.com.au</option>
     106                                                                <option value=".jp">zoho.jp</option>
     107                                                                <option value=".ca">zohocloud.ca</option>
     108                                                                <option value=".sa">zoho.sa</option>
     109                                                        </select>
     110                                                </div>
     111                                                <p id="domainErr" style="display: none;">Please choose a domain.</p>
     112                                        </div>
     113                                        <div class="connFormFooter">
     114                                                <button onclick="goToHome();">Back</button>
     115                                                <button class="greenBtnNew" onclick="proceedToSelectFormOnTinyMce();">
     116                                                        <em id="connectLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Connect
     117                                                </button>
     118                                        </div>
     119                                </div>
     120                                <div id="zfRefreshDiv" class="refreshCont" style="display: none;">
     121                                        <img src="../images/refresh-form.png" alt="">
     122                                        <h3>Sign in on the Zoho page, then come back and refresh to load your forms.</h3>
     123                                        <div class="refFormFooter">
     124                                                <button onclick="goToHome();">Back</button>
     125                                                <button class="greenBtnNew" onclick="proceedToSelectFormOnTinyMce();">
     126                                                        <em id="refreshLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Refresh
     127                                                </button>
     128                                        </div>
     129                                </div>
     130                                <div id="zfCreateFormDiv" class="refreshCont" style="display: none;">
     131                                        <img src="../images/refresh-form.png" alt="">
     132                                        <h3>You don't have any forms.</h3>
     133                                        <div class="refFormFooter">
     134                                                <button class="greenBtnNew" onclick="createForm();">
     135                                                        <em id="createLoadingImgElem" class="newBtnLoader" style="display: none;"></em>Create a new form
     136                                                </button>
     137                                        </div>
     138                                </div>
     139                        </div>
     140
     141                        <div id="embedActionsDiv" class="embedActionsDiv" style="display: none;">
     142                                <div class="zconnectMainCont">
     143                                        <div id="formSelectionDiv" class="zf-wb-innerWrapper" style="display: none;">
     144                                                <div class="zf-wb-innerWrapper" id="selctContainer">
     145                                                        <label>Choose a form <em>*</em></label>
     146                                                        <div class="zf-wb-dropWrapper">
     147                                                                <select id="formname" onchange="showEmbedActionsDiv();hideError();">
     148                                                                        <option value="-Select-">-Select-</option>
     149                                                                </select>
     150                                                        </div>
     151                                                        <p id="formSelectionError" style="display: none;">Please select a form.</p>
     152                                                </div>
     153                                        </div>
     154                                        <div id="permaLinkDiv" class="zf-wb-outerWrapper" style="display: none;">
     155                                                <div class="zf-wb-innerWrapper" id="permaContainer">
     156                                                        <label>Enter your form's permalink URL <em>*</em></label>
     157                                                        <textarea id="permalink" rows="4" style="width: 100%;" onchange="hideError();"></textarea>
     158                                                        <p id="permaLinkError" style="display: none;">Please enter your form's permalink URL.</p>
     159                                                        <span>Need help finding your permalink? <a href="https://help.zoho.com/portal/en/kb/forms/sharing-forms/articles/sharing-a-form-publicly#Sharing_a_link" target="_blank">Learn more</a></span>
     160                                                </div>
     161                                        </div>
     162                                        <div class="embedFormDivider"></div>
     163                                        <div class="embedFormUsing">
     164                                                <div class="embedFormInputField">
     165                                                        <span>
     166                                                                <label>Width </label>
     167                                                                <div class="embedInputCont">
     168                                                                        <input type="text" id="formWidth" placeholder="100" oninput="allowOnlyNumbers(this);">
     169                                                                        <div class="embedInputPer">
     170                                                                                <i onclick="selectWidthUnit(this);" size_symbol="px">px</i>
     171                                                                                <i class="selected" onclick="selectWidthUnit(this);" size_symbol="%">%</i>
     172                                                                        </div>
    155173                                                                </div>
    156                                                                 <div class="clearBoth"></div>
    157                                                                 <div class="addparamsWrap" elname="paramTemplate" eltype="keyValPair" style="display:none;">
    158                                                                                 <div class="addParamaFeld">
    159                                                                                                 <input type="text" elname="paramKey" maxlength="50" onchange="hideparamError(this);">
    160                                                                                 </div>
    161                                                                                 <div class="intArrow"><em class="arrowImg"></em></div>
    162                                                                                 <div class="addParamaFeld">
    163                                                                                                 <input type="text" elname="value" maxlength="50">
    164                                                                                 </div>
    165                                                                                 <div class="zf-Wp-plusminus">
    166                                                                                         <span class="fiedPropPlus" onclick="addUrlParam(this);"></span>
    167                                                                                         <span class="fiedPropMinus" onclick="deleteParam(this);"> </span>
    168                                                                                 </div>
     174                                                               
     175                                                        </span>
     176                                                        <div id="autoHeightDiv" class="cusCheckBox autoHeightDiv">
     177                                                                <input type="checkbox" id="autoHeightCB" onchange="disableHeight();">
     178                                                                <label for="autoHeightCB">Set Custom Height.</label>
     179                                                        </div>
     180                                                        <span id="formHeightDiv" style="display: none;">
     181                                                                <label>Height </label>
     182                                                                <div class="embedInputCont">
     183                                                                        <input type="text" id="formHeight" class="formHeight" placeholder="600" oninput="allowOnlyNumbers(this);">
     184                                                                        <div class="embedInputPer">
     185                                                                                <i size_symbol="px">px</i>
    169186                                                                        </div>
    170                                                                 <div elname="paramsDiv">
    171187                                                                </div>
    172                                                 </div>
    173                                                 <div id="paramError" class="errorCont" style="display:none;">
    174                                                         <p>Parameters should contain only alphanumeric characters, underscore, and hyphen.</p>
    175                                                 </div>
    176                                 <div class="clearBoth"></div>
    177                                  <div class="zf-wpFooter">
    178                                         <button onclick="zforms_submit()">Embed</button>
    179                                 </div>
     188                                                               
     189                                                        </span>
     190                                                </div>
     191                                        </div>
     192                                        <div class="embedFormDivider"></div>
     193                                        <div class="embedIncldeParamtrs">
     194                                                <div class="cusCheckBox">
     195                                                        <input type="checkbox" id="queryParamsCB" onchange="showOrHideUrlParamsDiv();">
     196                                                        <label for="queryParamsCB">Add URL Parameters</label>
     197                                                </div>
     198                                                <span>Prefill form fields and track where responses come from.</span>
     199                                        </div>
     200                                        <div id="urlParamsDiv" class="embedParameterValue" style="display: none;">
     201                                                <div class="embedField">
     202                                                        <div class="embedFiel_Col1">
     203                                                                <label>Parameter Name</label>
     204                                                        </div>
     205                                                        <div class="embedFiel_Col2">
     206                                                                <label>Parameter Value </label>
     207                                                        </div>
     208                                                </div>
     209                                                <div class="clearBoth"></div>
     210                                                <div elname="paramsDiv"></div>
     211                                                <div class="clearBoth"></div>
     212                                                <div elname="paramTemplate" class="addparamsWrap" eltype="keyValPair" style="display: none;">
     213                                                        <div class="addParamaFeld">
     214                                                                <input type="text" elname="paramKey" maxlength="50" onchange="hideparamError(this);">
     215                                                        </div>
     216                                                        <div class="addParamaFeld">
     217                                                                <input type="text" elname="value" maxlength="50">
     218                                                        </div>
     219                                                        <div class="zf-Wp-plusminus">
     220                                                                <span class="fiedPropPlus" elname="addParam" onclick="addUrlParam(this);"></span>
     221                                                                <span class="fiedPropMinus" elname="deleteParam" onclick="deleteParam(this);"></span>
     222                                                        </div>
     223                                                </div>
     224                                        </div>
     225                                        <div class="zf-wb-errorCont" id="paramError" style="display: none;">
     226                                                <p>Parameters should contain only alphanumeric characters, underscore, and hyphen.</p>
     227                                        </div>
     228                                </div>
     229                                <div class="connFormFooter">
     230                                        <button type="button" onclick="goToHome();">Back</button>
     231                                        <button type="button" class="greenBtnNew" onclick="zforms_submit();">
     232                                                <em elem="loadingImgElem" class="newBtnLoader" style="display: none;"></em>Embed Form
     233                                        </button>
     234                                </div>
     235                        </div>
    180236                        </div>
    181237                </div>
    … …  
    184240        </body>
    185241</html>
    186 

  • zoho-forms/trunk/tinymce/zforms_editor_plugin.js

    r3729081 r3748754  
    1717                title : 'Zoho Forms',
    1818                cmd : 'zforms_embed_window', 
    19                 image : url+'/zohoforms.png',                           
     19                image : url+'/../images/zohoforms.png',                                 
    2020            });
    2121                        return false;

  • zoho-forms/trunk/zohoForms.php

    r3729081 r3748754  
    148148function loadZohoFormsBlockFiles() {
    149149  wp_enqueue_script(
     150    'zoho-forms-select2',
     151    plugin_dir_url(__FILE__) . 'lib/select2/select2.min.js',
     152    array('jquery'),
     153    '4.0.13',
     154    true
     155  );
     156  wp_enqueue_script(
    150157    'zoho-forms-block-js',
    151158    plugin_dir_url(__FILE__) . 'zohoforms-block.js',
    152     array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-i18n', 'jquery'),
     159    array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-i18n', 'jquery', 'zoho-forms-select2'),
    153160    ZOHO_FORMS_VERSION,
    154161    true
    … …  
    156163  wp_localize_script( 'zoho-forms-block-js', 'zohoFormsBlock', array(
    157164      'blockCSS' => plugin_dir_url(__FILE__) . 'zohoforms-block.css',
    158       'favIconPath' => plugin_dir_url(__FILE__) . 'tinymce/zFormsIcon.png'
     165      'select2CSS' => plugin_dir_url(__FILE__) . 'lib/select2/select2.min.css',
     166      'favIconPath' => plugin_dir_url(__FILE__) . 'images/zFormsIcon.png',
     167      'accessFormIcon' => plugin_dir_url(__FILE__) . 'images/access-form.png',
     168      'permalinkIcon' => plugin_dir_url(__FILE__) . 'images/icon-link.png',
     169      'refreshFormIcon' => plugin_dir_url(__FILE__) . 'images/refresh-form.png',
     170      'zohoFormsIcon' => plugin_dir_url(__FILE__) . 'images/zohoforms.png',
     171      'completedIcon' => plugin_dir_url(__FILE__) . 'images/completed.png'
    159172    ) );
    160173}

  • zoho-forms/trunk/zohoforms-block.css

    r3729081 r3748754  
    1         .body{
    2             margin: 0;
    3             padding: 0;
    4             font-family: Arimo, Helvetica, sans-serif;
    5            
    6         }
    7        
    8         input:focus, textarea:focus, select:focus{ outline: none !important; border-color: #24A68A !important; box-shadow: none !important;}
    9         button:focus{outline: none;}
    10         button{cursor: pointer;}
    11        
    12         .clearBoth{
    13             clear:both;
    14         }
    15        
    16         .flLeft{
    17             float:left;
    18         }
    19        
    20         .flRight{
    21             float:right;
    22         }
    23 
    24         .zf-wb-containerWrapper{
    25             letter-spacing:0.5px;
    26             width: 100%;
    27             padding: 0 10px;
    28             padding-top: 10px;
    29         }
    30 
    31         .zf-wb-tabToggle{
    32             width: 60%;
    33             margin:0 auto;
    34             font-size: 14px;
    35             font-weight: 400;
    36             margin-bottom: 10px;
    37         }
    38 
    39         .zf-wb-tabToggle ul{
    40             display: table;
    41             width: 100%;
    42             padding: 0;
    43             margin: 0 !important;
    44         }
    45 
    46         .zf-wb-tabToggle ul li{
    47             padding:6px 8px;
    48             border-collapse: collapse;
    49             border-width: 1px 0 1px 1px;
    50             border-color: #d8d8d8;
    51             border-style: solid;
    52             overflow: hidden;
    53             display: table-cell;
    54             text-align: center;
    55             cursor: pointer;
    56             width: 50%;
    57         }
    58 
    59         .zf-wb-tabToggle ul li:last-child{
    60             border-width: 1px;
    61             -webkit-border-radius:0px 25px 25px 0;
    62             -moz-border-radius:0px 25px 25px 0;
    63             border-radius:0px 25px 25px 0;
    64         }
    65 
    66         .zf-wb-tabToggle ul li:first-child{
    67             -webkit-border-radius:25px 0 0 25px;
    68             -moz-border-radius:25px 0 0 25px;
    69             border-radius:25px 0 0 25px;
    70         }
    71 
    72         .zf-wb-tabToggle ul li.active{
    73             border:1px solid #007AFF;
    74             background: #007AFF;
    75             color: #fff;
    76             cursor: default;
    77         }
    78 
    79         .zf-wb-tabToggle ul li.active ~ li{
    80             border-width: 1px 1px 1px 0;
    81         }   
    82 
    83         .zf-wb-outerWrapper{ font-size: 14px !important;}
    84         .zf-wb-outerWrapper .zf-wb-desc{ font-size: 14px; color: #666; text-align: center; margin-bottom:20px;}
    85         .zf-wb-outerWrapper .zf-wb-innerWrapper{ padding-bottom:20px;}
    86         .zf-wb-outerWrapper .zf-wb-innerWrapper label{ display: block;margin-bottom:5px;}
    87         .zf-wb-outerWrapper .zf-wb-innerWrapper label em{ color:#ff0000;font-size:16px;}
    88        
    89         .zf-wb-outerWrapper .zf-wb-innerWrapper input, .zf-wb-outerWrapper .zf-wb-innerWrapper textarea{ width: 100%; border:1px solid #d6d6d6;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px; font-size: 14px;}
    90        
    91         .zf-wb-outerWrapper .zf-wb-twoColumns .zf-wb-innerWrapper{ width: 45%;}
    92        
    93         .zf-wb-errorCont input, .zf-wb-errorCont textarea{ border: 1px solid #ff0000 !important;}
    94 
    95         .zf-wb-errorCont input:focus, .zf-wb-errorCont textarea:focus{ border:1px solid #ff0000 !important; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;} 
    96 
    97         .zf-wb-errorCont p{font-size:13px !important; color:#ff0000; margin:0 !important; padding-top:3px;}
    98        
    99         .zf-wb-Fotter{ text-align:center; border-top: 1px solid #d6d6d6; padding:20px 0; padding-bottom: 10px; margin-top: -1px;}
    100         .zf-wb-Fotter button{ padding:6px 18px; border: 1px solid #d6d6d6; font-size: 14px !important; margin: 0 5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; line-height: 21px !important;}
    101         .zf-wb-blue{border: 1px solid #24A68A;background: #24A68A;color: #fff;border-radius: 3px;font-size: 14px;cursor: pointer;padding: 10px 12px;display: inline-block;}
    102         .zf-wb-red{background:#f04b2f; color:#fff !important; border:1px solid #f04b2f !important;}
    103         .zf-wb-green{background:#00A552; color:#fff !important; border:1px solid #00A552 !important;}
    104         .zf-wb-white{background:#fff; border:1px solid #adadad !important;}
    105            
    106         .zf-wb-signWrapper{ text-align: center; font-size: 14px; padding: 10px 0 20px 0; margin-bottom: 10px;}
    107         .zf-wb-signWrapper p{ margin: 0 !important;font-size: 15px !important;line-height: 23px !important;margin-bottom: 15px !important;}
    108         .zf-wb-signWrapper button{ padding:6px 18px; border: 1px solid #d6d6d6; font-size: 14px !important; margin: 0 5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; margin-top: 5px;}
    109        
    110         .zf-wb-dropWrapper{ border:1px solid #d6d6d6; position: relative; height:32px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; overflow: hidden;}
    111         .zf-wb-dropWrapper::before{ content: "";right: 12px;top: 11px; position: absolute;width: 0; height: 0; border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 7px solid #222;}
    112 
    113         .zf-wb-dropWrapper select{
    114             position: absolute;
    115             top: 0;
    116             border: 0 none !important;
    117             width: 100%;
    118             max-width: 100%;
    119             outline: none !important;
    120             -moz-outline: none !important;
    121             margin: 0;
    122              appearance: none;
    123             -moz-appearance: radio-container;
    124             -webkit-appearance: none;
    125             background: transparent;
    126             text-overflow: '';
    127              webkit-user-select: none;
    128             -moz-user-select: none;
    129             -ms-user-select: none;
    130             -o-user-select: none;
    131             user-select: none;
    132             text-indent: 2px;
    133             white-space: nowrap;
    134             text-overflow: ellipsis;
    135             height: auto;
    136             font-size: 14px !important;
    137             padding-bottom: 5px;
    138             line-height: inherit;;
    139             }
    140                 .zf-wb-dropWrapper select:hover{color:#444 !important;}
    141         .zf-wb-dropWrapper select:focus, .zf-wb-dropWrapper select:hover, .zf-wb-dropWrapper select option{-moz-outline: none !important; outline: none !important; border:none; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;outline-offset: -2px !important; color: #444;}
    142          select:-moz-focusring {color: transparent !important;text-shadow: 0 0 0 #000 !important;}
    143         .zf-wb-infoDiv { position: relative;border-radius: 100px;border: 2px solid #1a75ef;width: 38px;height: 38px;z-index: 9999999;padding: 5px;line-height: 33px;text-align: center;display: inline-block;margin-bottom: 15px;}
    144         .zf-wb-infoDiv:before { position: absolute;content: "i";color: #1a75ef;font-size: 20px;left: 15px;font-weight: 600;top: 0;}
    145         .zf-wb-signWrapper a { color: #24A68A !important;cursor: pointer;text-decoration: underline !important;box-shadow: none !important;font-size: 16px;}
    146         .zf-wb-signWrapper label {margin: 0 12px !important;font-size: 15px;color: #999;cursor: default;}
    147         .zf-wb-headwrap { border-bottom: 1px solid #ccc; padding: 0 0 12px 0; margin-bottom: 20px;}
    148         .zf-wb-heading { padding: 0 0 0 42px;font-size: 17px;font-weight: 600;}
    149         .zf-wb-backIocn { position: relative; border: 1px solid #ccc; width: 23px; height: 23px; float: left; cursor: pointer; margin: 2px 0 0 0;}
    150         .zf-wb-backIocn svg { display: inline-block; width: 15px; height: 17px; stroke-width: 0; stroke: currentColor; fill: #a2a2a2; position: absolute; left: 2px; top: -1px;}
    151         .zf-wb-innerWrapper span { color: #777;}
    152         .zf-wb-innerWrapper a:hover { box-shadow: none !important;color: #24A68A !important;}
    153         .zf-wb-innerWrapper a { color: #24A68A !important;text-decoration: underline !important;box-shadow: none !important;}
    154         .zf-wb-connect-btn{ text-align: center;border-top: none;}       
    155         .zf-wb-errorCont .zf-wb-dropWrapper { border: 1px solid #ff0000;}
    156         .zf-wb-loading{ text-align: center;}
    157         .zf-wb-loading p{ display: inline;padding: 0 10px 0 0px !important;}
    158         .zf-wb-lightblue { background: #E3F0FF; color: #153C69; border: 1px solid #C8E1FE !important;
    159         }
    160         .zf-wb-dropWrapper select{height: 32px;}
    161 
    162     /*loading animation */
    163 .zf-wb-spinner { text-align: center;display: inline;position: relative;top: 2px;}
    164 .zf-wb-spinner > div {
    165 width: 11px;
    166 height: 11px;
    167 background-color: #333;
    168 
    169 border-radius: 100%;
    170 display: inline-block;
    171 -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    172 animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    173 }
    174 
    175 .zf-wb-spinner .bounce1 {
    176 -webkit-animation-delay: -0.32s;
    177 animation-delay: -0.32s;
    178 }
    179 
    180 .zf-wb-spinner .bounce2 {
    181 -webkit-animation-delay: -0.16s;
    182 animation-delay: -0.16s;
    183 }
    184 
    185 @-webkit-keyframes sk-bouncedelay {
    186 0%, 80%, 100% { -webkit-transform: scale(0) }
    187 40% { -webkit-transform: scale(1.0) }
    188 }
    189 
    190 @keyframes sk-bouncedelay {
    191 0%, 80%, 100% {
    192 -webkit-transform: scale(0);
    193 transform: scale(0);
    194 } 40% {
    195 -webkit-transform: scale(1.0);
    196 transform: scale(1.0);
    197 }
    198 }
    199 
    200 .zf-WpEmbeddedWrap  {
    201     padding: 0 25px;
    202 }
    203 .zf-WpEmbeddedWrap .zf-WpSelectFrm .cusDropArrow {
    204   top: 60px;
    205 }
    206 .embedFormUsing label {
    207     font-size: 15px;
    208     margin-bottom: 12px;
    209     display: inline-block;
    210 }
    211 .embedFormUsing {
    212     padding-bottom: 15px;
    213     margin-bottom: 15px;
    214 }
    215 .cusRadioButton span {
    216     margin-right: 25px;
    217 }
    218 .cusRadioButton [type="radio"]:checked, .cusRadioButton [type="radio"]:not(:checked) {
     1.body{
     2    margin: 0;
     3    padding: 0;
     4    font-family: Arimo, Helvetica, sans-serif;
     5   
     6}
     7
     8input:focus, textarea:focus, select:focus{ outline: none !important; border-color: #24A68A !important; box-shadow: none !important;}
     9button:focus{outline: none;}
     10button{cursor: pointer;}
     11
     12.clearBoth{
     13    clear:both;
     14}
     15
     16.flLeft{
     17    float:left;
     18}
     19
     20.flRight{
     21    float:right;
     22}
     23
     24
     25.zconnectMainCont {   
     26    padding: 24px 32px;
     27    min-height: 290px;
     28    box-sizing: border-box;
     29}
     30.zf-wb-outerWrapper .zf-wb-desc{ font-size: 14px; color: #666; text-align: center; margin-bottom:20px;}
     31.zf-wb-outerWrapper .zf-wb-innerWrapper h4{
     32    font-size: 13px;
     33    color: #454e5c;
     34    margin: 0;
     35    margin-bottom: 14px;
     36}
     37.zf-wb-innerWrapper label {
     38font-size: 14px;
     39color: #222;
     40font-weight: 500;
     41margin-bottom: 8px;
     42display: block;
     43}
     44.zf-wb-outerWrapper label em{ color:#ff0000;font-size:16px;}
     45
     46.zf-wb-outerWrapper .zf-wb-innerWrapper input, .zf-wb-outerWrapper .zf-wb-innerWrapper textarea{ width: 100%; border:1px solid #d6d6d6;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;padding:4px; font-size: 14px;}
     47.zf-wb-outerWrapper .zf-wb-innerWrapper textarea {
     48    height: 105px;
     49    box-sizing: border-box;
     50    padding: 12px;
     51}
     52
     53
     54.zf-wb-errorCont input, .zf-wb-errorCont textarea{ border: 1px solid #ff0000 !important;}
     55
     56.zf-wb-errorCont input:focus, .zf-wb-errorCont textarea:focus{ border:1px solid #ff0000 !important; -moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;} 
     57
     58.zf-wb-errorCont p{font-size:13px !important; color:#ff0000;     margin: 0;
     59margin-bottom: 4px;}
     60.zf-wb-dropWrapper{     
     61    border: 1px solid #ccd6e0;
     62    position: relative;
     63    height: 38px;
     64    -moz-border-radius: 4px;
     65    -webkit-border-radius: 4px;
     66    border-radius: 4px;
     67    overflow: hidden;
     68    margin-bottom: 6px;
     69}
     70.zf-wb-dropWrapper::before{ content: "";
     71right: 18px;
     72position: absolute;
     73border-left: 6px solid transparent;
     74border-right: 6px solid transparent;
     75border-top: 17px solid #222;
     76border: solid #222;
     77border-width: 0 1.5px 1.5px 0;
     78top: 17px;
     79width: 10px;
     80height: 10px;
     81box-sizing: border-box;
     82transform: rotate(45deg);}
     83
     84.zf-wb-dropWrapper select{
    21985    position: absolute;
    220     left: -9999px;
    221 }
    222 .cusRadioButton [type="radio"]:checked + label, .cusRadioButton [type="radio"]:not(:checked) + label {
    223     position: relative;
    224     padding-left: 26px !important;
    225     cursor: pointer;
    226     line-height: 16px;
    227     display: inline-block;
    228     color: #444;
     86    top: 0;
     87    border: 0 none !important;
     88    width: 100%;
     89    max-width: 100%;
     90    outline: none !important;
     91    -moz-outline: none !important;
    22992    margin: 0;
    230     font-weight: normal;
    231     font-size: 15px;
    232 }
    233 .cusRadioButton [type="radio"]:checked + label:before, .cusRadioButton [type="radio"]:not(:checked) + label:before {
    234     content: '';
    235     position: absolute;
    236     left: 0;
    237     top: 0;
    238     width: 15px;
    239     height: 15px;
    240     border: 1px solid #24A68A;
    241     border-radius: 100%;
    242     background: #fff;
    243 }
    244 .cusRadioButton [type="radio"]:checked + label:after {
    245     opacity: 1;
    246     -webkit-transform: scale(1);
    247     transform: scale(1);
    248 }
    249 
    250 .cusRadioButton [type="radio"]:checked + label:after, .cusRadioButton [type="radio"]:not(:checked) + label:after {
    251     content: '';
    252     width: 9px;
    253     height: 9px;
    254     background: #24A68A;
    255     position: absolute;
    256     top: 3px;
    257     left: 3px;
    258     border-radius: 100%;
    259     -webkit-transition: all 0.2s ease;
    260     transition: all 0.2s ease;
    261 }
    262 .cusRadioButton [type="radio"]:not(:checked) + label {
    263     color: #444;
    264 }
    265 .cusRadioButton [type="radio"]:not(:checked) + label:after {
    266     opacity: 0;
    267     -webkit-transform: scale(0);
    268     transform: scale(0);
    269 }
    270 .cusRadioButton {
    271     margin-bottom: 20px;
    272 }
    273 
    274 .cusCheckBox [type="checkbox"] {
    275     border: 0;
    276     clip: rect(1px, 1px, 1px, 1px);
    277     -webkit-clip-path: inset(50%);
    278     clip-path: inset(50%);
    279     height: 1px;
    280     overflow: hidden;
    281     padding: 0;
    282     position: absolute;
    283     width: 1px;
    284     white-space: nowrap;
    285 }
    286 .cusCheckBox [type="checkbox"] + label {
    287    position: relative;
    288     -webkit-user-select: none;
     93     appearance: none;
     94    -moz-appearance: radio-container;
     95    -webkit-appearance: none;
     96    background: transparent;
     97    text-overflow: '';
     98     webkit-user-select: none;
    28999    -moz-user-select: none;
    290100    -ms-user-select: none;
     101    -o-user-select: none;
    291102    user-select: none;
     103    text-indent: 2px;
     104    white-space: nowrap;
     105    text-overflow: ellipsis;
     106    height: auto;
     107    font-size: 14px !important;
     108    padding-bottom: 5px;
     109    line-height: inherit;;
     110    }
     111
     112 .zf-wb-innerWrapper a { color: #24A68A !important;text-decoration: underline !important;box-shadow: none !important;}
     113 .zf-wb-innerWrapper span {         color: #454e5c;
     114font-size: 13px;
     115display: flex;
     116flex-wrap: wrap;
     117gap: 4px;}
     118.zf-wb-dropWrapper select{    height: 51px;
     119padding-left: 18px;
     120color: #222;
     121font-size: 16px !important;}
     122
     123
     124.cusCheckBox [type="checkbox"] {
     125border: 0;
     126clip: rect(1px, 1px, 1px, 1px);
     127-webkit-clip-path: inset(50%);
     128clip-path: inset(50%);
     129height: 1px;
     130overflow: hidden;
     131padding: 0;
     132position: absolute;
     133width: 1px;
     134white-space: nowrap;
     135}
     136.cusCheckBox [type="checkbox"] + label {
     137position: relative;
     138-webkit-user-select: none;
     139-moz-user-select: none;
     140-ms-user-select: none;
     141user-select: none;
     142cursor: pointer;
     143line-height: 17px;
     144padding-left: 26px;
     145display: inline-block;
     146font-size: 14px;
     147color: #222 !important;
     148}
     149.cusCheckBox [type="checkbox"]:not(:checked) + label:before, .cusCheckBox [type="checkbox"]:not(:checked) + .decisionCusCheckBox:before {
     150border: 1px solid #afafaf;
     151background: #fff;
     152}
     153.cusCheckBox [type="checkbox"] + label::before{
     154
     155background-color: #24A68A;
     156border: 1px solid #24A68A;
     157box-sizing: content-box;
     158content: '';
     159color: #444;
     160margin-right: 7px;
     161top: -1px;
     162left: 0;
     163width: 16px;
     164height: 16px;
     165display: inline-block;
     166vertical-align: middle;
     167position: absolute;
     168border-radius: 3px;
     169}
     170.cusCheckBox [type="checkbox"]:checked + label::after{
     171content: '';
     172-webkit-transform: rotate(-45deg) scale(1);
     173transform: rotate(-45deg) scale(1);
     174transition: -webkit-transform 200ms ease-out;
     175transition: transform 200ms ease-out;
     176transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
     177}
     178
     179.cusCheckBox [type="checkbox"] + label::after {
     180background-color: transparent;
     181top: 9.5px;
     182left: 4px;
     183position: absolute;
     184width: 9.2px;
     185height: 3px;
     186margin-top: calc(24px / -2 / 2 * 0.8);
     187border-style: solid;
     188border-color: #fff;
     189border-width: 0 0 2px 2px;
     190border-radius: 0;
     191-o-border-image: none;
     192border-image: none;
     193-webkit-transform: rotate(-45deg) scale(0);
     194transform: rotate(-45deg) scale(0);
     195transition: none;
     196}
     197
     198.cusCheckBox {
     199margin-bottom: 3px;
     200display: flex;
     201}
     202.autoHeightDiv.cusCheckBox [type="checkbox"] + label {
     203color: #475568 !important;
     204font-weight: 400;
     205margin-bottom: 0;
     206}
     207.embedInputCont {
     208    position: relative;
     209    display: inline-flex;
     210    align-items: center;
     211}
     212.embedInputCont input {
     213    padding-right: 40px;
     214}
     215.embedInputCont input[type="text"].formHeight {
     216    padding-right: 50px;
     217}
     218.embedInputPer {
     219    display: flex;
     220    position: absolute;
     221    right: 3px;
     222    background: #f0f4fb;
     223    border-radius: 4px;
     224}
     225.embedInputPer i {
     226    font-size: 13px;
     227    color: #222;
     228    border: 1px solid transparent;
     229    width: 36px;
     230    height: 29px;
     231    display: flex;
     232    justify-content: center;
    292233    cursor: pointer;
    293     line-height: 17px;
    294     padding-left: 30px;
    295     display: inline-block;
    296     font-size: 15px;
    297 }
    298 .cusCheckBox [type="checkbox"]:not(:checked) + label:before, .cusCheckBox [type="checkbox"]:not(:checked) + .decisionCusCheckBox:before {
    299     border: 1px solid #ddd;
     234    font-style: normal;
     235    line-height: 28px;
     236}
     237.embedInputPer i.selected {
     238    background: #fafffe;
     239    border: 1px solid #7acab8;
     240    border-radius: 4px;
     241    cursor: default;
     242}
     243
     244.embedFormInputField {
     245display: flex;
     246flex-flow: column;
     247width: 100%;
     248margin-bottom: 10px;
     249gap: 16px;
     250}
     251.embedFormInputField span {
     252
     253}
     254.embedFormInputField label {
     255font-size: 13px;
     256display: block;
     257margin-bottom: 8px;
     258color: #222;
     259font-weight: 600;
     260}
     261.embedFormInputField span:last-child {
     262float: right;
     263}
     264.embedFormInputField input[type="text"] {
     265    width: 140px;
     266    box-sizing: border-box;
     267    border-radius: 4px;
     268    border: 1px solid #ccd6e0;
     269    padding: 7px 87px 7px 10px;
     270    font-size: 13px;
     271    height: 38px;
     272}
     273.embedIncldeParamtrs span {
     274font-size: 14px;
     275color: #6b6b6b;
     276line-height: 23px;
     277margin-bottom: 15px;
     278margin-top: 10px;
     279display: flex;
     280flex-wrap: wrap;
     281}
     282.embedParameterValue {
     283border: 1px solid #eaeaea;
     284display: inline-block;
     285width: 100%;
     286padding-bottom: 7px;
     287border-radius: 4px;
     288margin-bottom: 10px;
     289}
     290.embedField {
     291background: #f3f5f9;
     292border-bottom: 1px solid #eaeaea;
     293padding: 10px 20px;
     294display: inline-block;
     295width: 100%;
     296box-sizing: border-box;
     297border-radius: 3px 3px 0 0;
     298}
     299.embedIncldeParamtrs label {
     300font-size: 15px;
     301font-weight: 500;
     302}
     303
     304.embedFiel_Col1 {
     305width: 270px;
     306float: left;
     307font-size: 14px;
     308color: #000;
     309font-weight: 500;
     310}
     311.embedFiel_Col2 {
     312width: 270px;
     313float: left;
     314font-size: 14px;
     315color: #000;
     316font-weight: 500;
     317margin-left: 25px;
     318}
     319.addparamsWrap {
     320display: flex;
     321align-items: center;
     322gap: 16px;
     323width: 100%;
     324float: left;
     325padding: 14px 20px;
     326border-bottom: 1px solid #eaeaea;
     327box-sizing: border-box;
     328}
     329.addparamsWrap:last-of-type {
     330border-bottom: none;
     331}
     332.fiedPropPlus, .fiedPropMinus{
     333width: 24px;
     334height: 24px;
     335background: url(./images/fieldprop-plus.png) no-repeat;
     336background-size: contain;
     337margin-top: 2px;
     338float: left; cursor: pointer;
     339left: 0px !important;
     340}
     341.fiedPropMinus {
     342background: url(./images/fieldprop-minus.png) no-repeat;
     343background-size: contain;
     344margin-left: 8px;
     345}
     346.addParamaFeld {
     347flex-grow: 1;
     348width: 220px;
     349}
     350.addParamaFeld input[type="text"] {
     351width: 100%;
     352border-radius: 3px;
     353border: 1px solid #ccd6e0;
     354box-sizing: border-box;
     355padding: 7px 10px;
     356font-size: 13px;
     357height: 36px;
     358}
     359input[type="text"]:disabled {
     360background: #ececec;
     361}
     362
     363
     364
     365
     366/* Rewamp UI Css Start */
     367.connFormCont {
     368background: #fff;
     369border: 1px solid #ddd;
     370border-radius: 8px;
     371}
     372.connFormHeader {
     373width: 100%;
     374box-sizing: border-box;
     375padding: 20px 32px;
     376display: flex;
     377align-items: center;
     378border-bottom: 1px solid rgba(230, 230, 230, 0.6);
     379border-radius: 8px 8px 0 0;
     380flex-shrink: 0;
     381position: relative;
     382background: #fff;
     383overflow: hidden;
     384}
     385.connFormHeader i {
     386width: 32px;
     387height: 32px;
     388}
     389.connFormHeader i img {
     390width: 32px;
     391height: 32px;
     392}
     393.connFormHeader h4 {
     394font-size: 18px;
     395color: #000;
     396font-weight: bold;
     397overflow: hidden;
     398text-overflow: ellipsis;
     399text-align: left;
     400margin: 0;
     401margin-left: 12px;
     402padding: 0;
     403}
     404.connFormHeader i {
     405width: 22px;
     406height: 22px;
     407}
     408.connFormHeader i img {
     409width: 22px;
     410height: 22px;
     411}
     412.connFormFooter {
     413width: 100%;
     414grid-gap: 16px;
     415padding: 18px 32px;
     416border-top: 1px solid #ddd;
     417box-sizing: border-box;
     418display: flex;
     419justify-content: end;
     420align-items: center;
     421}
     422.connFormFooter button {
     423border-radius: 50px;
     424padding: 12px 32px;
     425background: #fff;
     426border: 1px solid #d3dce0;
     427font-size: 14px;
     428min-width: 105px;
     429position: relative;
     430}
     431.connFormFooter button:hover {
     432border: 1px solid #d3dce0;
     433background: rgb(241 244 247 / 50%);
     434}
     435.connFormFooter .greenBtnNew {
     436background: #24a68a;
     437color: #fff;
     438border: 1px solid #24a68a;
     439}
     440.connFormFooter .greenBtnNew:hover,
     441.refFormFooter .greenBtnNew:hover {
     442box-shadow: 0px 6px 45px 0px rgba(0, 0, 0, 0.18) inset;
     443background: #24a68a;
     444border: 1px solid #24a68a;
     445}
     446.customAddMapping {
     447display: flex;
     448align-items: center;
     449justify-content: space-evenly;
     450padding: 10px 0;
     451border-bottom: 1px solid rgba(230, 230, 230, 0.6);
     452background: #f6f8fb;
     453position: relative;
     454}
     455.customAddMapping::before {
     456content: "";
     457position: absolute;
     458width: 50%;
     459border-top: 1px dashed #a3a6b0;
     460}
     461.customAddMapping a {
     462background: #f6f8fb;
     463position: relative;
     464padding: 0 10px;
     465display: flex;
     466align-items: center;
     467}
     468.customAddMapping span {
     469display: inline-flex;
     470align-items: center;
     471justify-content: center;
     472width: 27px;
     473height: 27px;
     474border-radius: 10px;
     475background: #fff;
     476border: 1px solid #e3dddd;
     477font-size: 12px;
     478color: #444;
     479font-weight: 500;
     480margin-right: 8px;
     481}
     482.customAddMapping a.is-selected span {
     483border: 1px solid transparent;
     484background: #24a68a;
     485color: #fff;
     486}
     487.customAddMapping span img {
     488    width: 14px;
     489}
     490.customAddMapping em {
     491color: #222;
     492font-size: 14px;
     493font-weight: 500;
     494max-width: 200px;
     495overflow: hidden;
     496text-overflow: ellipsis;
     497white-space: nowrap;
     498display: inline-block;
     499padding-right: 2px;
     500font-style: normal;
     501}
     502.customAddMapping a.is-selected em {
     503color: #23a689;
     504}
     505.zf-wb-signWrapper {
     506display: flex;
     507box-sizing: border-box;
     508width: 100%;
     509padding: 32px;
     510text-align: left;
     511flex-direction: column;
     512overflow: hidden;
     513overflow-y: auto;
     514position: relative;
     515}
     516.zf-wb-signWrapper h2 {
     517font-size: 15px;
     518color: #000;
     519font-weight: 500;
     520margin: 0;
     521margin-bottom: 12px;
     522}
     523.accCardCont {
     524display: flex;
     525flex-flow: column;
     526gap: 20px;
     527}
     528.accConectCard {
     529    border: 1px solid #e2e8ef;
     530    border-radius: 12px;
     531    padding: 20px;
     532    cursor: pointer;
     533    display: flex;
     534    align-items: center;
     535    gap: 20px;
     536}
     537.accConectCard:hover {
     538border: 1px solid #c2c8ce;
     539}
     540.accConectCard.selected {
     541border: 1px solid #23a689;
     542background: #fafffe;
     543}
     544.accConectCard i {
     545    width: 50px;
     546    height: 50px;
     547    border: 1px solid #e2e8ef;
     548    border-radius: 12px;
    300549    background: #fff;
    301 }
    302 .cusCheckBox [type="checkbox"] + label::before{
    303    
    304     background-color: #fff;
    305     border: 1px solid #24A68A;
    306     box-sizing: content-box;
    307     content: '';
    308     color: #444;
    309     margin-right: 7px;
    310     top: 0;
    311     left: 0;
    312     width: 15px;
    313     height: 15px;
    314     display: inline-block;
    315     vertical-align: middle;
    316     position: absolute;
    317 }
    318 .cusCheckBox [type="checkbox"]:checked + label::after{
    319     content: '';
    320     -webkit-transform: rotate(-45deg) scale(1);
    321     transform: rotate(-45deg) scale(1);
    322     transition: -webkit-transform 200ms ease-out;
    323     transition: transform 200ms ease-out;
    324     transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
    325 }
    326 
    327 .cusCheckBox [type="checkbox"] + label::after {
    328   background-color: transparent;
    329     box-sizing: content-box;
    330     content: '';
    331     position: absolute;
    332     top: 9px;
    333     left: 4px;
    334     width: 7px;
    335     height: 4px;
    336     margin-top: calc(24px / -2 / 2 * 0.8);
    337     border-style: solid;
    338     border-color: #24A68A;
    339     border-width: 0 0 2px 2px;
    340     border-radius: 0;
    341     -o-border-image: none;
    342     border-image: none;
    343     -webkit-transform: rotate(-45deg) scale(0);
    344     transform: rotate(-45deg) scale(0);
    345     transition: none;
    346 }
    347 
    348 .cusCheckBox {
    349     margin-bottom: 3px;
    350 }
    351 
    352 .embedFormInputField {
    353     display: inline-block;
    354     width: 100%;
    355     margin-bottom: 10px;
    356     margin-top: 10px;
    357 }
    358 .embedFormInputField span {
    359     width: 45%;
    360     float: left;
     550    display: flex;
     551    align-items: center;
     552    justify-content: center;
     553    box-sizing: border-box;
     554    flex-shrink: 0;
     555}
     556.accConectCard i img {
     557width: 18px;
     558}
     559.accConectCard h4 {
     560font-size: 15px;
     561color: #000;
     562font-weight: 500;
     563margin: 0;
     564margin-bottom: 6px;
     565}
     566.accConectCard p {
     567color: #454e5c;
     568font-size: 14px;
     569line-height: 150%;
     570margin: 0;
     571font-weight: 400;
     572}
     573.embedFormDivider {
     574width: 100%;
     575height: 1px;
     576background: #e2e8ef;
     577margin: 24px 0;
     578}
     579.tabs {
     580display: inline-flex;
     581width: auto;
     582border: 1px solid #d0d8e2;
     583border-radius: 3px;
     584height: 38px;
     585margin-bottom: 24px;
     586box-sizing: border-box;
     587}
     588
     589.tab {
     590background: #fff;
     591border-radius: 3px;
     592color: #46546a;
     593font-size: 14px;
     594cursor: pointer;
     595padding: 10px 24px;
     596border: none;
     597outline: none;
     598width: 119px;
     599}
     600
     601.tab.active {
     602color: #24a68a;
     603border-radius: 0 0 0 0;
     604background: #fbfffe;
     605position: relative;
     606}
     607.tab.active:before {
     608position: absolute;
     609left: -1px;
     610top: -1px;
     611right: -1px;
     612bottom: -1px;
     613content: "";
     614border: 1px solid #24a68a;
     615border-radius: 3px;
     616}
     617
     618.refreshCont {
     619padding: 24px 32px;
     620display: flex;
     621flex-flow: column;
     622align-items: center;
     623justify-content: center;
     624min-height: 360px;
     625}
     626.refreshCont img {
     627width: 120px;
     628height: 120px;
     629margin-bottom: 16px;
     630}
     631.refreshCont h3 {
     632font-size: 14px;
     633color: #222;
     634margin-bottom: 28px;
     635font-weight: 600;
     636}
     637.refFormFooter {
     638display: flex;
     639align-items: center;
     640justify-content: center;
     641gap: 16px;
     642}
     643.refFormFooter button {
     644border-radius: 50px;
     645padding: 12px 32px;
     646background: #fff;
     647border: 1px solid #d3dce0;
     648font-size: 14px;
     649min-width: 105px;
     650position: relative;
     651}
     652.refFormFooter .greenBtnNew {
     653background: #24a68a;
     654color: #fff;
     655border: 1px solid #24a68a;
     656}
     657.newBtnLoader {
     658font-size: 7px;
     659float: left;
     660margin: 2px 6px 0 0;
     661text-indent: -9999em;
     662width: 2em;
     663height: 2em;
     664border-radius: 50%;
     665background: #ffffff;
     666background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     667background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     668background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     669background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     670background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
     671-webkit-animation: newload 0.8s infinite linear;
     672animation: newload 0.8s infinite linear;
     673-webkit-transform: translateZ(0);
     674-ms-transform: translateZ(0);
     675transform: translateZ(0);
     676/* display: none; */
     677position: absolute;
     678left: 13px;
     679}
     680.newBtnLoader:before {
     681width: 50%;
     682height: 50%;
     683background: #ffffff;
     684border-radius: 100% 0 0 0;
     685position: absolute;
     686top: 0;
     687left: 0;
     688content: '';
     689}
     690.newBtnLoader:after {
     691background: rgb(36 166 138);
     692width: 75%;
     693height: 75%;
     694border-radius: 50%;
     695content: '';
     696margin: auto;
     697position: absolute;
     698top: 0;
     699left: 0;
     700bottom: 0;
     701right: 0;
     702}
     703.greenBtnNew:hover .newBtnLoader:after {
     704    background: #209479;
     705}
     706
     707.embedFormUsing label {
     708font-size: 14px;
     709color: #222;
     710font-weight: 500;
     711margin-bottom: 8px;
     712display: block;
     713}
     714.embedFormUsing {   
     715margin-bottom: 15px;
    361716}
    362717.embedFormInputField label {
    363     font-size: 14px;
    364     display: block;
    365     margin-bottom: 10px;
    366 }
    367 .embedFormInputField span:last-child {
    368     float: right;
    369 }
    370 .embedFormInputField input[type="text"] {
    371     width: 100%;
    372     box-sizing: border-box;
    373     border-radius: 3px;
    374     border: 1px solid #ccc;
    375     padding: 7px 10px;
    376     font-size: 13px;
    377 }
    378 .embedIncldeParamtrs span {
    379     font-size: 14px;
    380     color: #6b6b6b;
    381     line-height: 23px;
    382     position: relative;
    383     left: 30px;
    384     margin-bottom: 15px;
    385     display: inline-block;
    386 }
    387 .embedParameterValue {
    388     border: 1px solid #ccc;
    389     display: inline-block;
    390     width: 100%;
    391     padding-bottom: 7px;
    392 }
    393 .embedField {
    394     background: #f6f6f6;
    395     padding: 10px 20px;
    396     margin-bottom: 15px;
    397     display: inline-block;
    398     width: 100%;
    399     box-sizing: border-box;
    400 }
    401 .embedFiel_Col1 {
    402     width: 240px;
    403     float: left;
    404     font-size: 14px;
    405 }
    406 .embedFiel_Col2 {
    407     width: 200px;
    408     float: left;
    409     font-size: 14px;
    410     margin-left: 67px;
    411 }
    412 .addparamsWrap {
    413     display: inline-block;
    414     width: 100%;
    415     margin-bottom: 16px;
    416     float: left;
    417     padding: 0 20px;
    418 }
    419 .intArrow {
    420     border-bottom: 1px dashed #afafaf;
    421     font-size: 13px;
    422     font-weight: 300;
    423     width: 75px;
    424     position: relative;
    425     margin-left: 15px;
    426     margin-right: 15px;
    427     display: inline-block;
    428     float: left;
    429     vertical-align: middle;
    430     top: 15px;
    431     margin-left: 20px;
    432     margin-right: 20px;
    433 }
    434 .intArrow .arrowImg {
    435     background: url(./tinymce/paramtrArrow.jpg) no-repeat;
    436    width: 5px;
    437     height: 10px;
    438     display: block;
    439     top: -4px;
    440     position: absolute;
    441     right: 0;
    442     opacity: 0.8;
    443 }
    444 .fiedPropPlus, .fiedPropMinus{
    445    width: 24px;
    446    height: 24px;
    447    background: url(./tinymce/fieldprop-plus.png) no-repeat;
    448    background-size: contain;
    449    margin-top: 2px;
    450    float: left; cursor: pointer;
    451    margin-left: 15px;
    452    left: 0px !important;
    453 }
    454 .fiedPropMinus {
    455     background: url(./tinymce/fieldprop-minus.png) no-repeat;
    456     background-size: contain;
    457     margin-left: 8px;
    458 }
    459 .addParamaFeld {
    460     width: 190px;
    461     float: left;
    462 }
    463 .addParamaFeld input[type="text"] {
    464     width: 100%;
    465     border-radius: 3px;
    466     border: 1px solid #ccc;
    467     box-sizing: border-box;
    468     padding: 7px 10px;
    469     font-size: 13px;
    470 }
    471 input[type="text"]:disabled {
    472     background: #ececec;
    473 }
     718color: #222;
     719font-weight: 500;
     720}
     721.zf-Wp-plusminus {
     722display: flex;
     723}
     724.block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
     725max-width: 750px;
     726}
     727.zf-wb-dropWrapper::before {
     728display: none;
     729}
     730.zf-wb-innerWrapper .select2-container .selection {
     731width: 100%;
     732display: block;
     733height: 38px;
     734border: none;
     735}
     736.zf-wb-innerWrapper .select2-container--default .select2-selection--single {
     737background-color: #fff;
     738border: none;
     739border-radius: 4px;
     740height: 38px;
     741line-height: 41px;
     742}
     743.zf-wb-innerWrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
     744color: #444;
     745line-height: 38px;
     746font-size: 13px;
     747font-weight: 400;
     748padding-left: 12px;
     749}
     750.zf-wb-containerWrapper .select2-dropdown {
     751z-index: 100000;
     752background: #fff;
     753border: 1px solid #d3dce0;
     754-webkit-border-radius: 0px 0px 8px 8px;
     755-moz-border-radius: 0px 0px 8px 8px;
     756border-radius: 8px;
     757box-shadow: 0px 1px 15px 0px #0000001A;
     758box-sizing: border-box;
     759}
     760.zf-wb-containerWrapper .select2-results__option {
     761padding: 9px 12px;
     762border-radius: 4px;
     763margin-bottom: 2px;
     764position: relative;
     765line-height: 150%;
     766font-size: 13px;
     767color: #222 !important;
     768}
     769
     770.zf-wb-containerWrapper .select2-container--default .select2-results__option--highlighted[aria-selected] {
     771background: rgb(241 244 247 / 70%);
     772color: #222 !important;
     773}
     774.zf-wb-containerWrapper .select2-container--default .select2-results__option[aria-selected=true] {
     775background:  rgb(233 246 243) !important;
     776color: rgb(36 166 138) !important;
     777}
     778.zf-wb-containerWrapper .select2-container--default .select2-results > .select2-results__options {
     779margin: 4px;
     780}
     781.zf-wb-containerWrapper .select2-container--default .select2-selection--single .select2-selection__arrow b {
     782border-color: #888 transparent transparent transparent;
     783border-style: solid;
     784left: 3px;
     785margin-left: -4px;
     786margin-top: -2px;
     787position: absolute;
     788top: 50%;
     789width: 7px;
     790height: 7px;
     791border-width: 0;
     792border-top: 1.5px solid rgb(34 34 34);
     793border-left: 1.5px solid rgb(34 34 34);
     794transform: rotate(223deg);
     795}
     796
     797.zf-wb-containerWrapper .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     798transform: rotate(47deg);
     799width: 7px;
     800height: 7px;
     801border-width: 0;
     802border-top: 1.5px solid #222;
     803border-left: 1.5px solid #222;
     804top: 57%;
     805}
     806
     807@-webkit-keyframes newload {
     8080% {
     809-webkit-transform: rotate(0deg);
     810transform: rotate(0deg);
     811}
     812
     813100% {
     814-webkit-transform: rotate(360deg);
     815transform: rotate(360deg);
     816}
     817}
     818
     819@keyframes newload {
     8200% {
     821-webkit-transform: rotate(0deg);
     822transform: rotate(0deg);
     823}
     824
     825100% {
     826-webkit-transform: rotate(360deg);
     827transform: rotate(360deg);
     828}
     829}
     830/* Rewamp UI Css End */
     831
     832

  • zoho-forms/trunk/zohoforms-block.js

    r3729081 r3748754  
    77        alt: "Zoho Forms"
    88});
    9 var backSvgIcon = wpCreateElem('svg', null,
    10     wpCreateElem('path', { d: "M21 11.016v1.969h-14.156l3.563 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.563 3.609h14.156z"} )
    11     );
    129var zohoFormsAttributes = {
    1310        zf_short_code: {type: 'string'},
    … …  
    3835                        return jQuery(blockRef.current).find(selector);
    3936                }
     37                wpElem.useEffect(function(){
     38                        if(!blockRef.current || !jQuery.fn.select2){
     39                                return;
     40                        }
     41                        var $block = jQuery(blockRef.current);
     42                        var ownerDoc = blockRef.current.ownerDocument;
     43                        function setupSelect(selector, onChange){
     44                                var $el = $block.find(selector);
     45                                if(!$el.length || $el.data("select2")){
     46                                        return;
     47                                }
     48                                $el.select2({
     49                                        width: "100%",
     50                                        dropdownParent: $block,
     51                                        minimumResultsForSearch: Infinity
     52                                });
     53                                $el.on("change.zfSelect2", onChange);
     54                        }
     55                        setupSelect("#zf_domain", hideDomainError);
     56                        setupSelect("#zf_formslist", formSelectOnchange);
     57                        function closeSelect2OnOutsideClick(event){
     58                                if(jQuery(event.target).closest(".select2-container").length){
     59                                        return;
     60                                }
     61                                $block.find("#zf_domain, #zf_formslist").each(function(){
     62                                        var $el = jQuery(this);
     63                                        if($el.data("select2")){
     64                                                $el.select2("close");
     65                                        }
     66                                });
     67                        }
     68                        jQuery(ownerDoc).on("mousedown.zfSelect2", closeSelect2OnOutsideClick);
     69                        return function(){
     70                                jQuery(ownerDoc).off("mousedown.zfSelect2", closeSelect2OnOutsideClick);
     71                                $block.find("#zf_domain, #zf_formslist").each(function(){
     72                                        var $el = jQuery(this);
     73                                        $el.off("change.zfSelect2");
     74                                        if($el.data("select2")){
     75                                                $el.select2("destroy");
     76                                        }
     77                                });
     78                        };
     79                }, []);
     80                var isAutoHeight = props.attributes.autoheight === true || props.attributes.autoheight === "true";
     81                wpElem.useEffect(function(){
     82                        if(!isAutoHeight || !blockRef.current){
     83                                return;
     84                        }
     85                        var ownerWindow = blockRef.current.ownerDocument.defaultView;
     86                        if(!ownerWindow){
     87                                return;
     88                        }
     89                        function onFormResize(event){
     90                                var evntData = event.data;
     91                                if(!evntData || evntData.constructor != String || !blockRef.current){
     92                                        return;
     93                                }
     94                                var zf_ifrm_data = evntData.split("|");
     95                                if(zf_ifrm_data.length != 2 && zf_ifrm_data.length != 3){
     96                                        return;
     97                                }
     98                                var iframe = blockRef.current.querySelector("iframe");
     99                                if(!iframe){
     100                                        return;
     101                                }
     102                                var zf_perma = zf_ifrm_data[0];
     103                                if(iframe.src.indexOf("formperma") < 0 || iframe.src.indexOf(zf_perma) < 0){
     104                                        return;
     105                                }
     106                                var zf_ifrm_ht_nw = (parseInt(zf_ifrm_data[1], 10) + 15) + "px";
     107                                var prevIframeHeight = iframe.style.height;
     108                                var zf_tout = false;
     109                                if(zf_ifrm_data.length == 3){
     110                                        iframe.scrollIntoView();
     111                                        zf_tout = true;
     112                                }
     113                                if(prevIframeHeight != zf_ifrm_ht_nw){
     114                                        if(zf_tout){
     115                                                ownerWindow.setTimeout(function(){
     116                                                        iframe.style.height = zf_ifrm_ht_nw;
     117                                                }, 500);
     118                                        }else{
     119                                                iframe.style.height = zf_ifrm_ht_nw;
     120                                        }
     121                                }
     122                        }
     123                        ownerWindow.addEventListener("message", onFormResize, false);
     124                        return function(){
     125                                ownerWindow.removeEventListener("message", onFormResize, false);
     126                        };
     127                }, [isAutoHeight, props.attributes.formPerma]);
    40128                if(isEmbedded){
    41                         return wpCreateElem("div", blockProps, wpCreateElem("iframe", {src: props.attributes.formPerma, width: props.attributes.width, height: props.attributes.height, frameborder:"0", allow : "geolocation;microphone;camera", "aria-label" : props.attributes.formtitle}));
     129                        var iframeSrc = props.attributes.formPerma;
     130                        if(isAutoHeight && iframeSrc && iframeSrc.indexOf("zf_rszfm=") === -1){
     131                                iframeSrc += (iframeSrc.indexOf("?") === -1 ? "?" : "&") + "zf_rszfm=1";
     132                        }
     133                        return wpCreateElem("div", blockProps, wpCreateElem("iframe", {src: iframeSrc, width: props.attributes.width, height: props.attributes.height, style: { border: "none", width: props.attributes.width, height: props.attributes.height, transition: "all 0.5s ease" }, frameborder:"0", allow : "geolocation;microphone;camera", "aria-label" : props.attributes.formtitle}));
    42134                }
    43135                var $ = jQuery;
    … …  
    56148                        var newParam = $(urlParamsDiv).find("div[elname=paramTemplate]").clone();
    57149                        $(newParam).removeAttr("elname");
    58                         $(newParam).show();
     150                        $(newParam).css("display", "");
    59151                        bindParamRow(newParam);
    60152                        $(newParam).insertAfter($(elem).parent().parent("div[eltype=keyValPair]"));
    … …  
    74166                        getElem("#formPermaLinkPasteDiv").hide();
    75167                        getElem("#chooseZohoFormDiv").hide();
     168                        getElem("#blockEditShortCodeDiv").hide();
    76169                        getElem("#zfHomeDiv").show();
    77170                        getElem("#embedActionsDiv").hide();
     171                        selectMappingStep("choose");
     172                }
     173                function selectMappingStep(step){
     174                        if(step == "embed"){
     175                                getElem("#chooseFormStep").addClass("is-selected");
     176                                getElem("#configureEmbedStep").addClass("is-selected");
     177                                setStepCompleted("#chooseFormStep", true);
     178                                setStepCompleted("#configureEmbedStep", false);
     179                        }else{
     180                                getElem("#configureEmbedStep").removeClass("is-selected");
     181                                getElem("#chooseFormStep").addClass("is-selected");
     182                                setStepCompleted("#chooseFormStep", false);
     183                                setStepCompleted("#configureEmbedStep", false);
     184                        }
     185                }
     186                function setStepCompleted(stepSelector, completed){
     187                        var $step = getElem(stepSelector);
     188                        if(completed){
     189                                $step.find("span[elname=stepNumber]").hide();
     190                                $step.find("span[elname=tickIcon]").css("display", "");
     191                        }else{
     192                                $step.find("span[elname=stepNumber]").css("display", "");
     193                                $step.find("span[elname=tickIcon]").hide();
     194                        }
     195                }
     196                function selectConnectionCard(event){
     197                        getElem("#accessZohoFormsCard, #embedUsingPermalinkCard").removeClass("selected");
     198                        $(event.currentTarget).addClass("selected");
     199                }
     200                function proceedFromHome(){
     201                        if(getElem("#accessZohoFormsCard").hasClass("selected")){
     202                                getElem("#blockEditShortCodeDiv").hide();
     203                                chooseForm();
     204                        }else if(getElem("#embedUsingPermalinkCard").hasClass("selected")){
     205                                getElem("#blockEditShortCodeDiv").hide();
     206                                embedPerma();
     207                        }
    78208                }
    79209
    … …  
    92222                        if(formName!="-select-"){
    93223                                getElem("#embedActionsDiv").show();
    94                         }else{
    95                                 getElem("#embedActionsDiv").hide();
     224                                selectMappingStep("embed");
    96225                        }
    97226                }
    … …  
    100229                        var formPerma='', formTitle = '';
    101230                        if(getElem("#embedCatogory").val()=="formPerma"){
    102                                 formPerma = getElem("#permalink").val();
     231                                formPerma = String(getElem("#permalink").val()).trim();
     232                                var permaLinkErrElem = getElem('#permaLinkError');
    103233                                if(formPerma.length==0){
    104                                         var permaLinkErrElem = getElem('#permaLinkError');
     234                                        $(permaLinkErrElem).text("Please enter your form's permalink URL.");
     235                                        $(permaLinkErrElem).parent().addClass("zf-wb-errorCont");
     236                                        $(permaLinkErrElem).show();
     237                                        return;
     238                                }
     239                                if(formPerma.toLowerCase().indexOf("https://") !== 0){
     240                                        $(permaLinkErrElem).text("Enter a valid permalink Url");
    105241                                        $(permaLinkErrElem).parent().addClass("zf-wb-errorCont");
    106242                                        $(permaLinkErrElem).show();
    … …  
    117253                                formTitle = getElem("#zf_formslist").find(":selected").text();
    118254                        }
    119                         var height = getElem("#formHeight").val();
    120                         var width = getElem("#formWidth").val();
    121                         if(height == ""){
    122                                 height = '600px';
    123                         }
    124                         if(width == ""){
    125                                 width= '100%';
    126                         }
    127                         var embedType= "iframe";
    128                         if(getElem("#jsEmbed").is(":checked")){
    129                                 embedType ='js';
    130                         }
    131                         var autoHeight = false;
    132                         if(getElem("#autoHeightCB").is(":checked")){
    133                                 autoHeight =true;
    134                         }
     255                        var widthVal = getElem("#formWidth").val();
     256                        var widthUnit = getElem("#formWidth").closest(".embedInputCont").find("i.selected").attr("size_symbol") || "%";
     257                        if(widthVal == ""){
     258                                widthVal = "100" + widthUnit;
     259                        }else if(!/(px|%)$/.test(widthVal)){
     260                                widthVal = widthVal + widthUnit;
     261                        }
     262                        var heightVal = getElem("#formHeight").val();
     263                        var heightUnit = getElem("#formHeight").closest(".embedInputCont").find("i").attr("size_symbol") || "px";
     264                        if(heightVal == ""){
     265                                heightVal = "600" + heightUnit;
     266                        }else if(!/(px|%)$/.test(heightVal)){
     267                                heightVal = heightVal + heightUnit;
     268                        }
     269                        var embedType = "js";
     270                        var autoHeight = !getElem("#autoHeightCB").is(":checked");
    135271                        var urlParams = '';
    136272                        if(getElem("#queryParamsCB").is(":checked")){
    … …  
    157293                                }
    158294                        }
    159                         saveShortCode(formPerma,width,height,embedType,autoHeight,urlParams, formTitle);
     295                        saveShortCode(formPerma,widthVal,heightVal,embedType,autoHeight,urlParams, formTitle);
    160296                }
    161297                //form select error
    … …  
    189325                        getElem("#chooseZohoFormDiv").hide();
    190326                        getElem("#formPermaLinkPasteDiv").show();
     327                        getElem("#zFormSelectDiv").hide();
    191328                        getElem("#permalink").focus();
    192329                        getElem("#embedActionsDiv").show();
    193330                        getElem("#embedCatogory").val("formPerma");
     331                        selectMappingStep("embed");
    194332                }
    195333                //while choosing embed form threw formslist
    … …  
    212350                //Getting zoho forms and adding to list
    213351                function getZohoForms(){
    214                         getElem("#zfRefreshDiv").hide();
     352                        var refreshVisible = getElem("#zfRefreshDiv").is(":visible");
     353                        var domainVisible = getElem("#zDomaindiv").is(":visible");
     354                        if(!refreshVisible){
     355                                getElem("#zfRefreshDiv").hide();
     356                        }
    215357                        var newScript = document.createElement("script");
    216358                        var inlineScript = document.createTextNode("var a='';");
    … …  
    222364                                resetFormsList();
    223365                                if(zohoFormsURL != ""){
    224                                         getElem("#zDomaindiv").hide();
    225                                         getZohoFormsList(zohoFormsURL);
     366                                        if(domainVisible){
     367                                                getElem("#connectLoadingImgElem").show();
     368                                                getZohoFormsList(zohoFormsURL, "connect");
     369                                        }else if(refreshVisible){
     370                                                getElem("#refreshLoadingImgElem").show();
     371                                                getZohoFormsList(zohoFormsURL, "refresh");
     372                                        }else{
     373                                                getElem("#zDomaindiv").hide();
     374                                                getZohoFormsList(zohoFormsURL, false);
     375                                        }
    226376                                }else{
    227377                                        getElem("#zFormSelectDiv").hide();
    … …  
    243393                }
    244394                //reset forms list
     395                function syncSelect2(selector){
     396                        var $el = getElem(selector);
     397                        if($el.length && $el.data("select2")){
     398                                $el.trigger("change.select2");
     399                        }
     400                }
    245401                function resetFormsList(){
    246402                        hideFormSelectError();
    247                         getElem('#zf_formslist').find('option').remove();
    248                         getElem('#zf_formslist').append("<option value='-select-'>-Select-</option>");
     403                        var $list = getElem("#zf_formslist");
     404                        if($list.data("select2")){
     405                                $list.select2("close");
     406                        }
     407                        $list.find("option").remove();
     408                        $list.append("<option value='-select-'>-Select-</option>");
     409                        $list.val("-select-");
     410                        syncSelect2("#zf_formslist");
    249411                }
    250412                //constructing url based on domain extention
    … …  
    261423                }
    262424                //calling api and adding to dropdown
    263                 function getZohoFormsList(formsUrl){
     425                function getZohoFormsList(formsUrl, loader){
    264426                        var apiURL = formsUrl+"/api/getforms?type=plugin";
    265                         getElem("#loadingDiv").show();
    266                         getFormsAndIncludeScript(apiURL,addToFormListDropDown);
    267                 }
    268                 function showiframeOrJsChange(){
    269                         if(getElem("#jsEmbed").is(":checked")){
    270                                 getElem("#autoHeightDiv").slideDown();
    271                         }else{
    272                                 getElem("#autoHeightDiv").slideUp();
    273                         }
    274                         getElem("#autoHeightCB").prop("checked",false);
    275                         getElem("#formHeight").prop("disabled",false);
    276                         getElem("#formHeight").prop("placeholder","600px");
     427                        if(!loader){
     428                                getElem("#loadingDiv").show();
     429                        }
     430                        getFormsAndIncludeScript(apiURL, function(){
     431                                if(loader == "connect"){
     432                                        getElem("#connectLoadingImgElem").hide();
     433                                        getElem("#zDomaindiv").hide();
     434                                }else if(loader == "refresh"){
     435                                        getElem("#refreshLoadingImgElem").hide();
     436                                        getElem("#zfRefreshDiv").hide();
     437                                }
     438                                addToFormListDropDown();
     439                        });
    277440                }
    278441                function showOrHideUrlParamsDiv(){
    … …  
    285448                                $(newParam).removeAttr("elname");
    286449                                bindParamRow(newParam);
    287                                 $(newParam).show();
     450                                $(newParam).css("display", "");
    288451                                $(paramsDiv).append($(newParam));
    289452                                $(urlParamsDiv).slideDown();
    … …  
    293456                }
    294457
     458                function selectWidthUnit(event){
     459                        var $unit = jQuery(event.currentTarget);
     460                        $unit.siblings("i").removeClass("selected");
     461                        $unit.addClass("selected");
     462                }
     463                function allowOnlyNumbers(event){
     464                        var value = event.target.value.replace(/[^0-9]/g, "");
     465                        if(event.target.value !== value){
     466                                event.target.value = value;
     467                        }
     468                }
    295469                function disableOrEnableHeight(){
    296470                        if(getElem("#autoHeightCB").is(":checked")){
    297                                 getElem("#formHeight").prop("disabled",true);
    298                                 getElem("#formHeight").prop("placeholder","");
    299                                 getElem("#formHeight").val('');
     471                                getElem("#formHeightDiv").css("display", "");
    300472                        }else{
    301                                 getElem("#formHeight").prop("disabled",false);
    302                                 getElem("#formHeight").prop("placeholder","600px");
     473                                getElem("#formHeightDiv").hide();
    303474                        }
    304475                }
    … …  
    333504                    document.getElementsByTagName("head")[0].appendChild(script);       
    334505                }
     506                function getFormsWithFetch(){
     507                        fetch("/wp-json/zohoforms/v1/getforms")
     508                                .then(function(response){ return response.json(); })
     509                                .then(function(data){
     510                                        a = data;
     511                                        addToFormListDropDown();
     512                                });
     513                }
    335514                function addToFormListDropDown(){
    336515                        getElem("#zfRefreshDiv").hide();
    … …  
    349528                                                formList.options.add(option);
    350529                                        }
     530                                        syncSelect2("#zf_formslist");
    351531                                        getElem("#zFormSelectDiv").show();
     532                                        getElem("#formPermaLinkPasteDiv").hide();
    352533                                        getElem("#embedActionsDiv").show();
     534                                        selectMappingStep("embed");
    353535                                }
    354536                        }else{
    … …  
    373555                var domainDropDownElem = wpCreateElem("div",
    374556                                                                {
    375                                                                         id: "zDomaindiv",
    376                                                                         class: "zf-wb-innerWrapper"
     557                                                                        id: "zDomaindiv"
    377558                                                                },
    378                                                                 wpCreateElem("label",null,"Choose the domain where you've registered your Zoho account.",wpCreateElem("em",null,"*")),
     559                                                                wpCreateElem("div",
     560                                                                        {
     561                                                                                class: "zf-wb-innerWrapper zconnectMainCont"
     562                                                                        },
     563                                                                wpCreateElem("label",null,"Select the domain your Zoho account is registered on.",wpCreateElem("em",null,"*")),
    379564                                                                wpCreateElem("div",
    380565                                                                        {
    … …  
    442627                                                                            )
    443628                                                                        ),
    444                                                                 wpCreateElem("p",{ id:"domainErr", style:{display:'none'}},"Please choose a domain."),
    445                                                                 wpCreateElem("div",{class:"zf-wb-connect-btn zf-wb-Fotter"},wpCreateElem("button", { onClick: getZohoForms, class: "zf-wb-blue" },"Connect"))
     629                                                                wpCreateElem("p",{ id:"domainErr", style:{display:'none'}},"Please choose a domain.")
     630                                                                ),
     631                                                                wpCreateElem("div",
     632                                                                        {
     633                                                                                class: "connFormFooter"
     634                                                                        },
     635                                                                        wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     636                                                                        wpCreateElem("button",
     637                                                                                {
     638                                                                                        class: "greenBtnNew",
     639                                                                                        onClick: getZohoForms
     640                                                                                },
     641                                                                                wpCreateElem("em", { id: "connectLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     642                                                                                "Connect"
     643                                                                        )
     644                                                                )
    446645                                                                );
    447646                var formListEmbedDiv = wpCreateElem("div",
    … …  
    451650                                                                                display: 'none',
    452651                                                                        },
    453                                                                         class: "zf-wb-innerWrapper"
     652                                                                        class: "zf-wb-innerWrapper zf-wb-outerWrapper"
    454653                                                                },
    455654                                                                wpCreateElem("div",
    … …  
    480679                                                        {
    481680                                                            id: "zfRefreshDiv",
     681                                                            class: "refreshCont",
    482682                                                            style: {
    483683                                                              display: 'none'
    484                                                             },
    485                                                             class: "zf-wb-signWrapper"
     684                                                            }
    486685                                                        },
    487                                                         wpCreateElem("p", null,"Click 'Refresh' to choose a form."),
    488                                                         wpCreateElem("button", {  id: "refreshLink", onClick: getZohoForms, class: "zf-wb-lightblue" },"Refresh")
     686                                                        wpCreateElem("img", { src: zohoFormsBlock.refreshFormIcon }),
     687                                                        wpCreateElem("h3", null, "Sign in on the Zoho page, then come back and refresh to load your forms."),
     688                                                        wpCreateElem("div", { class: "refFormFooter" },
     689                                                                wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     690                                                                wpCreateElem("button", { class: "greenBtnNew", onClick: getZohoForms },
     691                                                                        wpCreateElem("em", { id: "refreshLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     692                                                                        "Refresh"
     693                                                                )
     694                                                        )
    489695                                                );
    490696                var createFormDiv = wpCreateElem("div",
    491697                                                                {
    492698                                                                    id: "zfCreateFormDiv",
     699                                                                    class: "refreshCont",
    493700                                                                    style: {
    494701                                                                      display: 'none'
    495                                                                     },
    496                                                                     class: "zf-wb-signWrapper"
     702                                                                    }
    497703                                                                },
    498                                                                 wpCreateElem("p", null,"You don't have any forms."),
    499                                                                 wpCreateElem("button", {  id: "createFormLink", onClick: openSigninOrCreateForm, class: "zf-wb-green"},"CREATE A NEW FORM")
     704                                                                wpCreateElem("img", { src: zohoFormsBlock.refreshFormIcon }),
     705                                                                wpCreateElem("h3", null, "You don't have any forms."),
     706                                                                wpCreateElem("div", { class: "refFormFooter" },
     707                                                                        wpCreateElem("button", { class: "greenBtnNew", onClick: openSigninOrCreateForm },
     708                                                                                wpCreateElem("em", { id: "createLoadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     709                                                                                "Create a new form"
     710                                                                        )
     711                                                                )
    500712                                                        );
    501713                var chooseZFormDiv = wpCreateElem("div",
    … …  
    507719                                                                    }
    508720                                                                },
    509                                                                 wpCreateElem("div",
    510                                                                         {class: "zf-wb-headwrap"},
    511                                                                         wpCreateElem("span",{class: "zf-wb-backIocn", onClick:goToHomeDiv},backSvgIcon),
    512                                                                         wpCreateElem("div",{class: "zf-wb-heading"},"Choose your form")
    513                                                                 ),
    514721                                                                wpCreateElem("div",{id: "loadingDiv", class: "zf-wb-loading" ,style: {display: 'none'}},wpCreateElem("p",null,"loading"),wpCreateElem("div",{class: "zf-wb-spinner"},wpCreateElem("div",{class:"bounce1"}),wpCreateElem("div",{class:"bounce2"}),wpCreateElem("div",{class:"bounce3"}))),
    515722                                                                domainDropDownElem,
    516                                                                 formListEmbedDiv,
    517723                                                                refreshDiv,
    518724                                                                createFormDiv
    … …  
    525731                                                                                style: { display:'none'}
    526732                                                                        },
    527                                                                         wpCreateElem("div",
    528                                                                                 {class: "zf-wb-headwrap"},
    529                                                                                 wpCreateElem("span",{class: "zf-wb-backIocn", onClick:goToHomeDiv},backSvgIcon),
    530                                                                                 wpCreateElem("div",{class: "zf-wb-heading"},"Enter form permalink")
    531                                                                         ),
    532733                                                                        wpCreateElem("div",
    533734                                                                                {
    … …  
    543744                                                                                        }
    544745                                                                                ),
    545                                                                                 wpCreateElem("p", { id: "permaLinkError", style: {display:'none'} },"Please enter your form's permalink URL."),
    546                                                                                 wpCreateElem("span",null,"Not sure where to find the permalink URL? ",wpCreateElem("a",{href: "https://www.zoho.com/forms/help/share/public-sharing.html#link", target: "_blank"},"Click here "),wpCreateElem("span",null,"to learn more."))
     746                                                                                wpCreateElem("p", { id: "permaLinkError", style: {display:'none'} },"Please enter the permalink URL."),
     747                                                                                wpCreateElem("span",null,"Need help finding your permalink? ",wpCreateElem("a",{href: "https://help.zoho.com/portal/en/kb/forms/sharing-forms/articles/sharing-a-form-publicly#Sharing_a_link", target: "_blank"},"Learn more"))
    547748                                                                        ),);
    548                 var embedTypeDIv = wpCreateElem("div", {
    549                                                                   class: "cusRadioButton",
    550                                                                   id: "embedTypeDiv"
    551                                                                 },
    552                                                                 wpCreateElem("span", {
    553                                                                   class: ""
    554                                                                 },
    555                                                                 wpCreateElem("input", {
    556                                                                   type: "radio",
    557                                                                   id: "iframeEmbed",
    558                                                                   name: "embedType",
    559                                                                   onClick: showiframeOrJsChange,
    560                                                                   value: "iframe",
    561                                                                   defaultChecked: true
    562                                                                 },),
    563                                                                 wpCreateElem("label", {
    564                                                                   for: "iframeEmbed"
    565                                                                 }, "iFrame")),
    566                                                                 wpCreateElem("span", {
    567                                                                   class: ""
    568                                                                 },
    569                                                                 wpCreateElem("input", {
    570                                                                   type: "radio",
    571                                                                   id: "jsEmbed",
    572                                                                   name: "embedType",
    573                                                                   onClick: showiframeOrJsChange,
    574                                                                   value: "iframe",
    575                                                                 },),
    576                                                                 wpCreateElem("label", {
    577                                                                   for: "jsEmbed"
    578                                                                 }, "Java Script")) 
    579                                                                 );
    580749                var urlParamsCBDiv = wpCreateElem("div",{
    581750                                                                        class: "embedIncldeParamtrs"
    … …  
    587756                                                                }), wpCreateElem("label", {
    588757                                                                  for: "queryParamsCB"
    589                                                                 }, "Add URL params")),
    590                                                                 wpCreateElem("span",null,"Include parameters to prefill forms and add referrers to track sources"));
     758                                                                }, "Add URL Parameters")),
     759                                                                wpCreateElem("span",null,"Prefill form fields and track where responses come from."));
    591760                var urlParamDiv = wpCreateElem("div",
    592761                                                          {
    … …  
    609778                                                                class: "embedFiel_Col2"
    610779                                                              },
    611                                                               wpCreateElem("label", null, "Parameter Value ")
     780                                                              wpCreateElem("label", null, "Parameter Value")
    612781                                                              ),
    613782                                                             
    … …  
    644813                                                            maxlength: "50"
    645814                                                          })),
    646                                                                 wpCreateElem("div",{
    647                                                                         class: "intArrow"
    648                                                                 },
    649                                                                 wpCreateElem("em",{class: "arrowImg"})),
    650815                                                           wpCreateElem("div", {
    651816                                                            class: "addParamaFeld"
    … …  
    671836                                                                {
    672837                                                                  id: "autoHeightDiv",
    673                                                                   class: "cusCheckBox",
    674                                                                   onChange : disableOrEnableHeight ,
    675                                                                   style: { display:'none'}
     838                                                                  class: "cusCheckBox autoHeightDiv"
    676839                                                                }, wpCreateElem("input", {
    677840                                                                  type: "checkbox",
    678841                                                                  id: "autoHeightCB",
     842                                                                  onChange: disableOrEnableHeight
    679843                                                                }), wpCreateElem("label", {
    680844                                                                  for: "autoHeightCB"
    681                                                                 }, "Set form height automatically."));
     845                                                                }, "Set custom height"));
    682846                var embedActionDiv = wpCreateElem("div",
    683847                                                                {
    684848                                                                id: "embedActionsDiv",
    685                                                                 //class: "zf-WpEmbeddedWrap",
     849                                                                class: "embedActionsDiv",
    686850                                                                        style: { display:'none'}
    687851                                                                },
     852                                                                wpCreateElem("div", { class: "zconnectMainCont" },
     853                                                                formListEmbedDiv,
     854                                                                permaLinkEmbedDiv,
     855                                                                wpCreateElem("div", { class: "embedFormDivider" }),
    688856                                                                wpCreateElem("div",
    689857                                                                {
    690858                                                                        class: "embedFormUsing",
    691859                                                                },
    692                                                                 wpCreateElem("label", null, "Embed form using", ),
    693                                                                 embedTypeDIv,
    694                                                                 autoHeightCBDiv,
    695860                                                                wpCreateElem("div",
    696861                                                                        {
    697862                                                                                class: "embedFormInputField"
    698863                                                                        },
    699                                                                         wpCreateElem("span",
    700                                                                                 {
    701                                                                                        
    702                                                                                 },
     864                                                                        wpCreateElem("span", null,
    703865                                                                                wpCreateElem("label", null, "Width "),
    704                                                                                 wpCreateElem("input",
    705                                                                                         {
     866                                                                                wpCreateElem("div", { class: "embedInputCont" },
     867                                                                                        wpCreateElem("input", {
    706868                                                                                        type: "text",
    707869                                                                                        id: "formWidth",
    708                                                                                         placeholder: "100%"
    709                                                                                         }
    710                                                                                 )
     870                                                                                        placeholder: "100",
     871                                                                                        onInput: allowOnlyNumbers
     872                                                                                        }),
     873                                                                                        wpCreateElem("div", { class: "embedInputPer" },
     874                                                                                                wpCreateElem("i", { onClick: selectWidthUnit, size_symbol: "px" }, "px"),
     875                                                                                                wpCreateElem("i", { class: "selected", onClick: selectWidthUnit, size_symbol: "%" }, "%")
     876                                                                                        )
     877                                                                                )
    711878                                                                        ),
     879                                                                        autoHeightCBDiv,
    712880                                                                        wpCreateElem("span",
    713881                                                                                {
    714                                                                                        
     882                                                                                        id: "formHeightDiv",
     883                                                                                        style: { display: "none" }
    715884                                                                                },
    716885                                                                                wpCreateElem("label", null, "Height "),
    717                                                                                 wpCreateElem("input",
    718                                                                                         {
     886                                                                                wpCreateElem("div", { class: "embedInputCont" },
     887                                                                                        wpCreateElem("input", {
    719888                                                                                        type: "text",
    720889                                                                                        id: "formHeight",
    721                                                                                         placeholder: "600px"
    722                                                                                         }
    723                                                                                 )
    724                                                                         ),
    725                                                                         //wpCreateElem("div",{class:"clearBoth"},null)
     890                                                                                        class: "formHeight",
     891                                                                                        placeholder: "600",
     892                                                                                        onInput: allowOnlyNumbers
     893                                                                                        }),
     894                                                                                        wpCreateElem("div", { class: "embedInputPer" },
     895                                                                                                wpCreateElem("i", { size_symbol: "px" }, "px")
     896                                                                                        )
     897                                                                                )
     898                                                                        )
    726899                                                                )),
     900                                                                wpCreateElem("div", { class: "embedFormDivider" }),
    727901                                                                        urlParamsCBDiv,
    728902                                                                        urlParamDiv,
    … …  
    731905                                                                                id: "paramError",
    732906                                                                        style: {display:'none'}
    733                                                                    },wpCreateElem("p", null,"Parameters should contain only alphanumeric characters, underscore, and hyphen.")),
    734                                                                 wpCreateElem("div",{class:"zf-wb-Fotter"},wpCreateElem("button",{class:"zf-wb-blue", onClick: zf_block_embed},"Embed"))
     907                                                                   },wpCreateElem("p", null,"Parameters should contain only alphanumeric characters, underscore, and hyphen."))
     908                                                                   ),
     909                                                                wpCreateElem("div", { class: "connFormFooter" },
     910                                                                        wpCreateElem("button", { onClick: goToHomeDiv }, "Back"),
     911                                                                        wpCreateElem("button", { class: "greenBtnNew", onClick: zf_block_embed },
     912                                                                                wpCreateElem("em", { elem: "loadingImgElem", class: "newBtnLoader", style: { display: "none" } }),
     913                                                                                "Embed Form"
     914                                                                        )
     915                                                                )
    735916                                                        );
    736917                return wpCreateElem("div",
    … …  
    742923                                                }
    743924                                        ),
     925                                        wpCreateElem("link",
     926                                                {
     927                                                        href: zohoFormsBlock.select2CSS,
     928                                                        rel: "stylesheet"
     929                                                }
     930                                        ),
    744931                                        wpCreateElem("input",{
    745932                                                id:"embedCatogory",
    … …  
    747934                                                value:"formPerma"
    748935                                        }),
    749                                         wpCreateElem("div",
     936                                        wpCreateElem("div", { class: "connFormCont" },
     937                                                wpCreateElem("div", null,
     938                                                        wpCreateElem("div", { class: "connFormHeader" },
     939                                                                wpCreateElem("i", null,
     940                                                                        wpCreateElem("img", { src: zohoFormsBlock.zohoFormsIcon })
     941                                                                ),
     942                                                                wpCreateElem("h4", null, "Zoho Forms")
     943                                                        ),
     944                                                        wpCreateElem("div", { class: "customAddMapping" },
     945                                                                wpCreateElem("a", { id: "chooseFormStep", class: "is-selected" },
     946                                                                        wpCreateElem("span", { elname: "stepNumber" }, "1"),
     947                                                                        wpCreateElem("span", { elname: "tickIcon", style: { display: "none" } },
     948                                                                                wpCreateElem("img", { src: zohoFormsBlock.completedIcon, alt: "" })
     949                                                                        ),
     950                                                                        wpCreateElem("em", null, "Choose Form")
     951                                                                ),
     952                                                                wpCreateElem("a", { id: "configureEmbedStep" },
     953                                                                        wpCreateElem("span", { elname: "stepNumber" }, "2"),
     954                                                                        wpCreateElem("span", { elname: "tickIcon", style: { display: "none" } },
     955                                                                                wpCreateElem("img", { src: zohoFormsBlock.completedIcon, alt: "" })
     956                                                                        ),
     957                                                                        wpCreateElem("em", null, "Embed Settings")
     958                                                                )
     959                                                        )
     960                                                ),
     961                                                wpCreateElem("div",
    750962                                                        {
    751963                                                        id: "zfHomeDiv",
    752                                                            
    753                                                             class: "zf-wb-signWrapper"
     964                                                        class: "connFormInnCont"
    754965                                                        },
    755                                                         wpCreateElem("p", null,"You can choose a form from your Zoho forms account or enter your form's permalink URL and embed it."),
    756                                                         wpCreateElem("button", { class:"zf-wb-blue", onClick: chooseForm },"Access Zoho Forms"),
    757                                                         wpCreateElem("label",null,"or"),
    758                                                         wpCreateElem("a",{onClick: embedPerma},"Embed using permalink")
    759                                         ),     
    760                                         permaLinkEmbedDiv,
    761                                         chooseZFormDiv,
    762                                         embedActionDiv,
    763                                         wpCreateElem("div", { id: "blockEditShortCodeDiv"} )
     966                                                        wpCreateElem("div", { class: "zf-wb-signWrapper zconnectMainCont" },
     967                                                                wpCreateElem("h2", null, "Choose a way to embed your form"),
     968                                                                wpCreateElem("div", { class: "accCardCont" },
     969                                                                        wpCreateElem("div", { id: "accessZohoFormsCard", class: "accConectCard", onClick: selectConnectionCard },
     970                                                                                wpCreateElem("i", null, wpCreateElem("img", { src: zohoFormsBlock.accessFormIcon })),
     971                                                                                wpCreateElem("div", { class: "accCardRight" },
     972                                                                                        wpCreateElem("h4", null, "Access Zoho Forms"),
     973                                                                                        wpCreateElem("p", null, "Sign in to Zoho Forms and choose a form.")
     974                                                                                )
     975                                                                        ),
     976                                                                        wpCreateElem("div", { id: "embedUsingPermalinkCard", class: "accConectCard", onClick: selectConnectionCard },
     977                                                                                wpCreateElem("i", null, wpCreateElem("img", { src: zohoFormsBlock.permalinkIcon })),
     978                                                                                wpCreateElem("div", { class: "accCardRight" },
     979                                                                                        wpCreateElem("h4", null, "Use a Permalink"),
     980                                                                                        wpCreateElem("p", null, "Embed a form using its permalink URL.")
     981                                                                                )
     982                                                                        )
     983                                                                )
     984                                                        ),
     985                                                        wpCreateElem("div", { class: "connFormFooter" },
     986                                                                wpCreateElem("button", { class: "greenBtnNew", onClick: proceedFromHome }, "Next")
     987                                                        )
     988                                                ),
     989                                                chooseZFormDiv,
     990                                                embedActionDiv
     991                                        ),
     992                                        wpCreateElem("div", { id: "blockEditShortCodeDiv", style: { display: "none" } })
    764993                                );
    765994        }, //End of edit function
Note: See TracChangeset for help on using the changeset viewer.