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: () => ({