How to add my Form to WordPress?

مرحبًا محمد،

شكرًا لتواصلك بفريق دعم Jotform. هل يمكنك توضيح اكثر الاسكسربت الخاص بالنموذج نفسة أو انك تشير الي اسكريبت الخاص بالدردشة كما ذكرت في المثال السابق. إذا كنت تشير الي اسكريبت الكود الخاص بالنموذج نفسه لتضمينة علي موقع WordPress الخاص بك، يمكنك تتبع الخطوات التالية:

١. في صفحة بناء النموذج، قم بالضغط علي نشر.
٢. قم باختيار تضمين من علي الجهة اليسري للصفحة.
٣. قم باختيار الكود الخاص ب WordPress.

٤. قم بنسخ الكود ثم قم بلصقة في خانة الكود الخاصة بموقع WordPress الخاص بك:

يمكنك التواصل معنا مرة أخرى اذا كنت تشير الي شئ آخر.

مرحبا

لا انا اقصد هل من الممكن نقل هذا النموذج بما فيه كل شيء بنفس التصميم التي قمت بتصميمها هنا الي ووردبريس لكي يصبح موقع له نطاق واستضافة ودومين زي اي موقع بمعني اشرح لك بشكل اوضح: عند الذهاب الي اي موقع تظهر لك الواجهه المخصص للموقع صحيح وهذه الواجهه تم تصميمها من قبل المالك للموقع عن استضافة و دومين وقوالب وغيره صحيح انا اريد التصميم الذي قمت بصميم هنا وهو الذي علي شكل تطبيق اريد ان اجعلهو مثل اي موقع جاهز اريد تحويله بنفس الصورة والشكل وترتيب وكل شيء الي وورد بريس لكي اضيف بعض الاشياء الاخره تمام

Hi aldswqyr735,

Thanks for reaching out to Jotform Support. Unfortunately, our Arabic Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Arabic, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

• Now, let me help you with your question. You can get the form's full source code to edit to your preference and add to your website however you would need to host the form on your website. Let me show you how:
• 
  
• In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
• In the menu on the left side of the page, click on Embed.
• Now, click on Source code and copy the code.

Give it a try and let us know how it goes.

انا اقصد هل ممكن اربط جوتفورم بالووردبريس لكي اضيف اعمالي هناك اخد التصميم اللي موجود هنا الي هناك

مرحبًا محمد،

شكرا لتواصلك معنا. إذا كنت تريد ربط النموذج الخاص بك بموقع وردبريس فيمكنك تتبع التعليمات المرسلة من قبل الزميل محمود من قبل، أما إذا كنت تقصد تحويل النموذج الخاص بك هنا إلى موقع مستقل وتخصيصه أكثر وجعل دومين مخصص له باسمك فهذا ممكن فقط على خطط الأعمال المدفوعة. ولمعرفة التكلفة الدقيقة لهذه الخطة، يرجى التواصل مع فريق المبيعات لدينا هنا.

وإذا كنت تقصد فقط الحصول على كود النموذج هنا وإضافته على موقع آخر خاص بك والتعديل عليه فهذا ممكن أيضا كما شرحت الزميلة رينا لحضرتك.

فضلًا أخبرنا إن كان لديك أية أسئلة.

طيب هل ممكن انا اغير ايقونات التنقل بين الاسئلة و الاشكال الايقونات

مرحبًا محمد،

شكرا لتواصلك معنا من جديد. نعم يمكنك تغيير كل شيء هنا. أرجو إخباري برابط النموذج الذي تقصده وصورة من الأيقونات التي تريد تغييرها والشكل الذي تريد الحصول عليه لكي نساعدك. يمكنك مشاهدة هذا الدليل لمعرفة كيفية إرسال صورة.

فضلا اخبرنا إن كان لديك أية أسئلة.

مرحبا هل يمكن تصميم نموذج دفع ولاكن بطرق دفع انا اختارها وهي غير معروضة في قائمة الدفع عن التعديل علي النموذج هل ممكن اعمل ذالك

مرحبًا محمد،

شكرا لتواصلك معنا من جديد.نعم، يمكنك تصميم نموذج دفع، ويمكنك استلام المدفوعات من عملائك حسب طريقة الدفع الذي تريد اختيارها. لدينا أيضًا قوالب يمكنك استخدامها نموذجات الدفع الخاصة بك وتخصيصها وفقًا لتفضيلاتك.

ردن مرة أخرى إذا كان لديك أي سؤال آخر .

مرحبًا محمد،

شكرًا لتواصلك بفريق دعم Jotform. لقد قمت بفصل السؤال الخاص باضافة طريقة دفع في موضوع جديد وقمت بالاجابة عليه. يمكنك مراجعة الموضوع عن طريق هذا الرابط.

يمكنك التواصل معنا مرة أخرى اذا كان لديك اسئلة أخرى.

Hi aldswqyr735,

I moved your other question to a new thread and helped you with that here.

Reach out to us again if you have more questions.

مرحبا

عندي مشكلة وهي كل ما بعمل نسخ للكود لكي اضيف الاستبيان علي موقع ووردبريس لا تظهر خانات مثل ايقونات الدفع و الحجز لماذا و ما السبب

Hi Mohamed,

Thank you for sharing the screenshot. Hidden fields could be caused by a number of things, one via conditions, the other, script conflicts with the embedded site. For us further investigate on this, can you share the form link as well the link to the embedded site? Once we hear back from you, we'll have additional information that'll help us better assist you.

https://form.jotform.com/240307599023556 رابط النموذج

/https://dr-mohamed.rf.gd رابط الموقع

Hi Mohamed,

Thank you for the information. I was able to view both the form and the embedded site. It appears that there are script conflicts, to prevent this, kindly embed the form using the iFrame method, and let us know if the issue persists?

We appreciate your patience.

تمام انها يعمل ولاكن لا يعمل بشكل كامل بمعني لا يظهر بحجم صفحة الموقع انا اريد ان يكون حجم الاستبيان نفس حجم الصفحة علي الموقع

انا كنت بنسخ كود المصدر و الصق الكون في الصفحه علي الموقع كان يشتغل عادي بحجم الصفحة ولاكن لا تعمل بعض الاشياء مثل خانة الموعد و الدفع وحجم الاستبيان ممكن حل للمشكلة دي

Hi Mohamed,

We are glad to know that functionally the form is now working. Now, we will work towards customizing the front-end of the form to make it visually presentable.

Please note that the form being an iFrame embed, the iFrame takes on the space allotted to it on the website. On your Wordpress site, can you use the Custom HTML block then paste the form's iFrame embed code? You should be able to set the dimension of the Custom HTML block, its width and height, so when the form is rendered, it simply occupies the available space. Here is a screenshot how:

If you are using a WordPress builders like Beaver builder, Elementor, or DIVI, it should be the same, simply add an HTML block or iFrame block where you can paste, iFrame codes.

Please let us know how it goes. Otherwise we will force the value of the iFrame width to widen the form.

We appreciate your patience.

يا اخي نفس المشكله ما بيظهر بشكل كامل يعني الستبيان حجم اصغر من الصفحة ان اريده كثل حجم الصفحة لكي يظهر للعملاء بشكل ان ما في اي استبيان وتكون هي هي تلصفحة الرئيسيه فهمت عليا ي اخي لذالك انا كنت بنسخ الكود المصدر الخاص بالاستبيان واقوم بلصق في صفحة ف كانت تظهر بالوجه الذي اريده ولاكن عندما قمت ببعض التعديلات علي الاستبيان حصلت هي المشكله ان الاستبيان ليس بحجم الصفحة و بعض الأيقونات مختفيه كما وضحة لك قبل ذالك في صوره ف هي، هي المشكله ان اريد ي اخي ان تكون الصفحة الاستبيان نفس حجم صفحة الموقع كما كنت اعمل من قبل يعني كنت بنسخ الكود المصدر ف كود المصدر بيكون محتوي لكل العناصر ف عندما انسخه ف صقحة الموقع لا يظهر بعض الأيقونات و لا يكون مثل حجم الصفحة الخاص بالموقع ف المشكلة كما قلتلك في عدم ظهور بعض الاشياء و الحجم

مرحبا محمد،

بفضل من أجل الحصول على إعادته إلينا. هل يمكنك من فضلك أن ترسل لنا لقطة شاشة توضح الرموز المفقودة عند تضمين النموذج؟ وبعد ذلك، سنحقق في الأمر أكثر لنرى ما إذا كان بإمكاننا معرفة ما يحدث.

إذا استمرت المشكلة، فسننشئ تذكرة أداء ونرسلها إلى المطورين لدينا.

بمجرد أن نتلقى ردًا منك، سنكون قادرين على المضي قدمًا في إيجاد حل.

هذه الصوره :

Hi Mohamed,

Thank you for sharing the screenshot. I attempted to increase the width of the iFrame but ends up setting the rest of the page out of alignment.

Would it be possible for you to provide us with access to your WordPress backend/developer dashboard so we can check and apply customizations concerning the form?

We appreciate your patience.

للاسف ي اخي ما راح ينفع ممكن نشرح هنا كيفية التعامل في حل هذه المشكله اريد حجم الاستبيان في نفس حجم الصفحة لكي لا يظهر للشخص او مستخدم الموقع ان هناك صفحتان في نفس الصفحه و كمان ممكن لوجو الخاص بكم يكون بشكل مختصر ما يكون ظاهر ف الاسفل لانه يحجب بعض الاشياء عندي في الموقع

Hi Mohamed,

After customizing the form, here is how it looks in the screenshot below:

If that is acceptable, kindly use this customize iFrame embed code, and let us know if you have questions:

 <iframe

      id="JotFormIFrame-240307599023556"

      title="منصة طبيبك "

      onload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

      src="https://form.jotform.com/240307599023556"

      frameborder="0"

      style="min-width:100%;

height:539px;

border:none;

max-width: 2000px !important;

    width: 2000px;

    display: inline-block !important;

    float: left;

    margin-left: -839px ! IMPORTANT;

"

      scrolling="no"

    >

    </iframe>

Thank you for using Jotform.

لم يتم حل المشكلة وهي لقطة شاشة توضح لك ان الاستبيان اصغر حجم من الطبيعي زائد ان لا يتحرك يعني المشكله زادت لا تحلت

ي اخي ليس لهذا النموذج كود المصدر الذي يكون فيه جميع الادخالات لكي يتم لصقه في اي مكان هذا الكون كان يعمل وكان عندما انسخة كان يعمل بشكل جيد عندما قمت بتعديل مره اخري علي النموذج وقمت بوضع كود الصدر بدا يعود بشكل اللي موضح في بعض الصور في الرسائل اللي فوق و بعض الأيقونات مختفيه ف ان اريد اتواصل مع شخص من الدعم لكي اتحدث معه لحل المشكلة

مرحبًا محمد،

شكرًا للرجوع الينا مرة أخرى. آسف لحدوث هذا. يمكنك الحصول علي كود iFrame الخاص بالنموذج لتضمينه علي موقعك مرة أخرى:

١. في صفحة منشى النماذج، قم بالضغط علي نشر.
٢. قم باختيار تضمين من علي الجهة اليسري للصفحة.
٣. قم باختيار الكود الخاص ب iFrame
٤. قم بنسخ الكود ثم قم بلصقة في خانة الكود الخاصة بالموقع الخاص بك:

هل يمكنك التجربة والرجوع الينا في حالة احتجت الي أي مساعدة أخرى.

تمام ي اخي انا اعرف هيك ولاكن الحجم النموذج ف الصفحة انظر كدا علي الصفحة

https://dr-mohamed.rf.gd/947-2

انظر الي صفحة الموقع النموذج ما بحجم صفحة الموقع و انا ما اريد مستخدم الموقع يحس ان فيه صفحتين في صفحة واحده فهمت عليا هل هذا التعديل ممكن

Hi Mohamed,

Thanks for getting back to us and for your patience. I tried to access your website to debug the form, however it seems the website is not available. If you can keep the website live with the form embedded, it would be great.

I'm sharing below the whole iframe code with some changes on the size of the iframe block. This should fix the issue if your website doesn't force another size. Wordpress can be running with many plugins that can change the expected behavior of a raw code like this one. So please, make sure that the parent block/container has enough size to handle this iframe. Setting the height and width of the parent block/container should be the best option (please check with your developer how to do that if necessary).

However, this code is forcing the full size of the form on the iframe, so please give it a try:

  <iframe



   id="JotFormIFrame-240307599023556"



   title="منصة طبيبك "



   onload="window.parent.scrollTo(0,0)"



   allowtransparency="true"



   allowfullscreen="true"



   allow="geolocation; microphone; camera"



      src="https://form.jotform.com/240307599023556"



   frameborder="0"



   style="min-width:100%;max-width:100%;height:2500px;border:none;"



   scrolling="no"



sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" 



>

  </iframe>

  <script type="text/javascript">



  var ifr = document.getElementById("JotFormIFrame-240307599023556");



  if (ifr) {



   var src = ifr.src;



   var iframeParams = [];



   if (window.location.href && window.location.href.indexOf("?") > -1) {



    iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));



   }



   if (src && src.indexOf("?") > -1) {



    iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));



    src = src.substr(0, src.indexOf("?"))



   }



   iframeParams.push("isIframeEmbed=1");



   ifr.src = src + "?" + iframeParams.join('&');



  }



  window.handleIFrameMessage = function(e) {



   if (typeof e.data === 'object') { return; }



   var args = e.data.split(":");



   if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }



   if (!iframe) { return; }



   switch (args[0]) {



    case "scrollIntoView":



     iframe.scrollIntoView();



     break;



    case "setHeight":



     iframe.style.height = args[1] + "px";



     if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {



      iframe.style.minHeight = args[1] + "px";



     }



     break;



    case "collapseErrorPage":



     if (iframe.clientHeight > window.innerHeight) {



      iframe.style.height = window.innerHeight + "px";



     }



     break;



    case "reloadPage":



     window.location.reload();



     break;



    case "loadScript":



     if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }



     var src = args[1];



     if (args.length > 3) {



       src = args[1] + ':' + args[2];



     }



     var script = document.createElement('script');



     script.src = src;



     script.type = 'text/javascript';



     document.body.appendChild(script);



     break;



    case "exitFullscreen":



     if   (window.document.exitFullscreen)    window.document.exitFullscreen();



     else if (window.document.mozCancelFullScreen)  window.document.mozCancelFullScreen();



     else if (window.document.mozCancelFullscreen)  window.document.mozCancelFullScreen();



     else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();



     else if (window.document.msExitFullscreen)   window.document.msExitFullscreen();



     break;



   }



   var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;



   if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {



    var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};



    iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");



   }



  };



  window.isPermitted = function(originUrl, whitelisted_domains) {



   var url = document.createElement('a');



   url.href = originUrl;



   var hostname = url.hostname;



   var result = false;



   if( typeof hostname !== 'undefined' ) {



    whitelisted_domains.forEach(function(element) {



      if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) {



        result = true;



      }



    });



    return result;



   }



  };



  if (window.addEventListener) {



   window.addEventListener("message", handleIFrameMessage, false);



  } else if (window.attachEvent) {



   window.attachEvent("onmessage", handleIFrameMessage);



  }



  </script>

If the problem persists, please keep your website live and the form embedded so I can check what is happening.

Reach out again if you need any other help.

ممكن الكود يكون مكتوب بطريقة مختلفه لاني ما هارف انسخ الكود

مرحبا محمد،

شكرا لتواصلك معنا مرة أخرى. آسف لحدوث هذا. لقد قمت بنسخ الكود بدون مشاكل وقمت بتجربته ايضًا:

هل يمكنك فتح الحساب في متصفح آخر او قم بتفريغ الذاكرة المؤقتة للمتصفح الخاص بك. ثم قم بتجربة نسخ الكود مرة أخرى من خلال هذا الرابط.

أيضًا، لقد حاولت ان اتفقد الموقع الخاص بك ولكنه لا يعمل في الوقت الحالي. هل يمكنك تفعيل الموقع مرة أخرى لكي نتمكن من التحقق من عمل الكود؟

قم بالمحاولة مرة أخري وتواصل معنا بعد نسخ الكود وتجربته.

مازال ي اخي لا بعمل كيف ما عرفين نحل المشكلة و يا اخي ان بنسخ الكود و الصق في هناك في الصفحة ليست عن طريق كتابة الاكود و انما بتكون بشكل اختصاره

Hi Mohamed,

Thanks for reaching out to Jotform Support. Unfortunately, our Arabic Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Arabic, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. The code was already provided for you to copy and then paste it in your website. Where you able to do that but the issue remains? You may need help from a web-developer to insert the code to your website and apply necessary changes to fit your requirements. We have Jotform expert partners here if you wish to utilize their service. 

Keep us updated and let us know if you need any more help.

يا اخي انا اريد الكود المصظر عن الخاص بالنموذج ولاكن عندنا اذهب الي تضمين و اذهب الي الكود المصدر واعمل نسخ و اذهب الي الصفحة في الموقع و اعمل لصق تختفي بعض الانماط ويصغر حجم، هذا حصل معي بعد ان قمت باضافة وسيلة دفع علي النموذج الاول كنت افعل نفس الطريقة اذهب الي تضمن الكود المصدر و اعمل نسخ واذهب الي الصفحة الصق الكود كان يعمل و كأالصفحة ما فيها صفحه تانيه كانت تظهر الايوقات وهذا الذي اريده ما اريد مستخدم الموقع يرا انه في صفحتيين في صفحه واحده بل اريد النموذج جزء من الصفحة لكي لا يظهر اني استخدم صفحة اخره خارج الموقع

Hi Mohamed,

Thank you for explaining your requirements. We understand that you want the form to be laid out seamlessly with the website. However, since the provisioned block/space where the iframe sits is less than the dimensions of the form, it renders a squished, miniaturized version of the form. If you can provide us with screenshots of how the WordPress builder view, we can potentially spot which blocks/elements are causing this outcome.

We appreciate your patience.

دي لقطة من الشاشة توضح ان الصفحة الخاصة بالموقع اكبر من النموذج ف مستخدم الموقع بينظر علي انها صفحتيين انا لا اريد ان يظهر هكذا اريد ان يظهر النموذج بمساحة الصفحة فهمت

,Hi Mohamed

I've checked on your page https://dr-mohamed.rf.gd/999-2 and here's what I found. The embedded iframe is taking up 100% of the width in the element where it's added, but that element is not the full width of the page when viewed on smaller screens. I've included screenshots of the elements that are making the form appear smaller below.

First is this div with the class dt-container-md. This div has a max-width set as well as having padding and margin on each side.

If we go 2 div elements down, we have this div with the id dt-main. This div has CSS added to limit the width to 67% of its parent element when viewed on smaller screens.

If I manually disable the CSS options that are limiting the width for these 2 div elements in the Developer Tools the form takes up the full width of the page like this:

So these are the elements that would need to be adjusted in order to allow the form to be the full width of the page.

ي اخي انا اعمل من الجوال وهي الطريقة لا تعمل بشكل كافي علي الحوال ممكن طريقة تعمل علي من الهاتف لكي لا اجد صعوبة

Hi Mohamed,

Thanks for getting back to us. I understand you are looking to set the form to the full width. I checked your form and found that the form is already set to full width. 

The extra space you see around the form is added from your WordPress website. To remove or reduce the extra space you have to control it from your WordPress dashboard. One option is to set the Page/Post to full width from the Page Attributes section.

If you don't see the full-width option or if you are still seeing the extra space after switching to full-width, I recommend you to contact your web developer and they will be able to help you with this. Unfortunately,  we will not be able to help you with this as each site is different and we dont have access to your website. 

Let us know if there’s anything else we can help you with.