Hide form title via URL param (#89)

* Hide form title via URL param

* FormUrlPrefill smal fixes

resources/js/components/forms/components/VSwitch.vue

@@ -12,7 +12,8 @@ export default {
   components: { },
 
   props: {
-    value: { type: Boolean, default: false }
+    value: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
 
   data () {
@@ -35,6 +36,7 @@ export default {
 
   methods: {
     onClick () {
+      if(this.disabled) return
       this.$emit('input', !this.internalValue)
       this.internalValue = !this.internalValue
     }

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="form" class="open-complete-form">
-    <h1 v-if="!form.hide_title" class="mb-4 px-2" v-text="form.title" />
+    <h1 v-if="!isHideTitle" class="mb-4 px-2" v-text="form.title" />
 
     <div v-if="isPublicFormPage && form.is_password_protected">
       <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
@@ -177,6 +177,9 @@ export default {
     },
     isPublicFormPage () {
       return this.$route.name === 'forms.show_public'
+    },
+    isHideTitle () {
+      return this.form.hide_title || window.location.href.includes('hide_title=true')
     }
   },
 

resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue

@@ -0,0 +1,58 @@
+<template>
+  <collapse class="py-5 w-full" :default-value="false">
+    <template #title>
+      <div class="flex">
+        <h3 class="font-semibold block text-lg">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg> Show advanced options
+        </h3>
+      </div>
+    </template>
+    <toggle-switch-input :value="value.hide_title" name="hide_title" class="mt-4"
+        label="Hide Form Title"
+        :disabled="form.hide_title===true"
+        @input="onChangeHideTitle"
+        :help="hideTitleHelp"
+    />
+  </collapse>
+</template>
+
+<script>
+import Collapse from '../../../common/Collapse.vue'
+export default {
+  name: 'AdvancedFormUrlSettings',
+  components: { Collapse },
+  props: {
+    form: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    hideTitleHelp () {
+      return this.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
+    }
+  },
+
+  watch: {},
+
+  mounted () {},
+
+  methods: {
+    onChangeHideTitle (val) {
+      this.value.hide_title = val
+    }
+  }
+}
+</script>

resources/js/components/open/forms/components/FormUrlPrefill.vue

@@ -28,6 +28,10 @@ export default {
     formData: {
       type: Object,
       required: true
+    },
+    extraQueryParam: { 
+      type: String, 
+      default: '' 
     }
   },
 
@@ -51,7 +55,11 @@ export default {
         }
       })
 
-      return url + '?' + uriComponents
+      if(uriComponents.toString() !== ""){
+        return (this.extraQueryParam) ? url + '?' + uriComponents + '&' + this.extraQueryParam : url + '?' + uriComponents
+      }else{
+        return (this.extraQueryParam) ? url + '?' + this.extraQueryParam : url
+      }
     }
   },
 

resources/js/components/pages/forms/show/EmbedCode.vue

@@ -23,7 +23,8 @@ export default {
     name: 'EmbedCode',
     components: { CopyContent },
     props: {
-      form: { type: Object, required: true }
+      form: { type: Object, required: true },
+      extraQueryParam: { type: String, default: '' }
     },
 
     data: () => ({
@@ -32,11 +33,12 @@ export default {
 
     computed: {
       embedCode() {
-        return '<iframe style="border:none;width:100%;" height="' + this.formHeight + 'px" src="' + this.form.share_url + '"></iframe>'
+        const share_url = (this.extraQueryParam) ? this.form.share_url + "?" + this.extraQueryParam : this.form.share_url + this.extraQueryParam
+        return '<iframe style="border:none;width:100%;" height="' + this.formHeight + 'px" src="' + share_url + '"></iframe>'
       },
       formHeight() {
         let height = 200
-        if (!this.form.hide_title) {
+        if (!this.form.hide_title && !this.extraQueryParam) {
           height += 60
         }
         height += this.form.properties.filter((property) => {

resources/js/components/pages/forms/show/ShareLink.vue

@@ -3,7 +3,7 @@
       <h3 class="font-semibold text-xl">Share Link</h3>
       <p>Your form is now published and ready to be shared with the world! Copy this link to share your form
           on social media, messaging apps or via email.</p>
-      <copy-content :content="form.share_url">
+      <copy-content :content="share_url">
         <template #icon>
           <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 10" fill="none"
                   xmlns="http://www.w3.org/2000/svg">
@@ -24,14 +24,19 @@ export default {
     name: 'ShareLink',
     components: { CopyContent },
     props: {
-      form: { type: Object, required: true }
+      form: { type: Object, required: true },
+      extraQueryParam: { type: String, default: '' }
     },
 
     data: () => ({
       
     }),
 
-    computed: {},
+    computed: {
+      share_url () {
+        return (this.extraQueryParam) ? this.form.share_url + '?' + this.extraQueryParam : this.form.share_url + this.extraQueryParam
+      }
+    },
 
     methods: {}
 }

resources/js/components/pages/forms/show/UrlFormPrefill.vue

@@ -57,7 +57,7 @@
           <h3 class="mt-6 text-xl font-semibold mb-4 pt-6">
             Your Prefill url
           </h3>
-          <form-url-prefill :form="form" :form-data="prefillFormData" />
+          <form-url-prefill :form="form" :form-data="prefillFormData" :extra-query-param="extraQueryParam" />
         </template>
 
       </div>
@@ -75,7 +75,8 @@ export default {
   name: 'UrlFormPrefill',
   components: { FormUrlPrefill, ProTag, OpenForm },
   props: {
-    form: { type: Object, required: true }
+    form: { type: Object, required: true },
+    extraQueryParam: { type: String, default: '' }
   },
 
   data: () => ({

resources/js/pages/forms/show/share.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <share-link class="mt-4" :form="form" />
+    <share-link class="mt-4" :form="form" :extra-query-param="shareUrlForQueryParams" />
 
-    <embed-code class="mt-6" :form="form" />
+    <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
+
+    <advanced-form-url-settings :form="form" v-model="shareFormConfig" />
 
     <div class="mt-6 pt-6 border-t w-full flex">
       <regenerate-form-link class="sm:w-1/2 mr-4" :form="form" />
 
-      <url-form-prefill class="sm:w-1/2" :form="form" />
+      <url-form-prefill class="sm:w-1/2" :form="form" :extra-query-param="shareUrlForQueryParams" />
     </div>
   </div>
 </template>
@@ -18,13 +20,15 @@ import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue'
 import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue'
 import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
 import SeoMeta from '../../../mixins/seo-meta.js'
+import AdvancedFormUrlSettings from '../../../components/open/forms/components/AdvancedFormUrlSettings.vue'
 
 export default {
   components: {
     ShareLink,
     EmbedCode,
     UrlFormPrefill,
-    RegenerateFormLink
+    RegenerateFormLink,
+    AdvancedFormUrlSettings
   },
   props: {
     form: { type: Object, required: true }
@@ -32,6 +36,9 @@ export default {
   mixins: [SeoMeta],
 
   data: () => ({
+    shareFormConfig: {
+      hide_title: false
+    }
   }),
 
   mounted() {},
@@ -40,6 +47,15 @@ export default {
     metaTitle() {
       return (this.form) ? 'Form Share - '+this.form.title : 'Form Share'
     },
+    shareUrlForQueryParams () {
+      let queryStr = ''
+      for (const [key, value] of Object.entries(this.shareFormConfig)) {
+        if(value && value !== 'false' && value !== false){
+          queryStr += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(value)
+        }
+      }
+      return queryStr.slice(1)
+    }
   },
 
   methods: {