Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
problem
Topic Author
Posts: 4
Joined: 22 Feb 2019, 20:05

Third party contact form?

23 Feb 2019, 12:08

Hi,
I bought third party contact form because I need time, date, number of people, etc. suitable for a restaurant website:
https://preview.codecanyon.net/item/con ... 1550940751
I received "simple" instructions just to find that I cannot insert necessary codes into <head> and <body>, I cannot find where. Am I missing something or there's no interface option to do that?


A) Quick start guide
This script can be simply installed in your website, to do this, follow these istructions:
  1. Unzip the archive and upload the folder "contactme" to your server.
  2. Open the demo file index.html, in the <head> section copy from "START css copy section" to "END css copy section" and paste into the <head>
  3. Open the demo file index.html, copy from "START js copy section" to "END js copy section" and paste before the </body> close tag element of your HTML page.
  4. Copy the form code you choose and put it in your HTML page where you want to show it. Example: if you want to use the "General Contact Form" you should copy the code from "START copy section: General Contact Form" to "END copy section: General Contact Form".
  5. Open the file: /contactme/configs.php and fill in the values for the only 3 required configs: from_name, from_address, to_addresses. (each option is well explained on the right).
If your site already use jQuery plugin, remove the jQuery line from the section "START js copy section" to avoid to import it twice.
NOTE: If you need to change some fields of the example forms, or if you need to create a custom form, you have to read this chapter of the Documentation: Custom Form 
ATTENTION: sometimes the CSS of your site may conflict with the CSS of our script, if something looks strange contact us. We can help you to fix the problem.


If you could give me any tip regarding this it would be very helpful.
THANKS IN ADVANCE!
 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Third party contact form?

24 Feb 2019, 00:22

problem wrote:I bought third party contact form because I need time, date, number of people, etc. suitable for a restaurant website:
Hi! Before I attempt to give instructions on how to implement a 3rd party "script" into X3, you were perhaps not aware that X3 already supports "any" form elements, including "date", "number" etc? I am not 100% sure what your idea was with this form ... It's just plain form elements, with CSS styling, and PHP + Javascript code that you would have to integrate yourself, while in X3 it's already built-in. There may be some nice CSS "styles" for that contact form, but once embedded into X3, elements will inherit the parent websites styles anyway. In conclusion, this 3rd party plugin is created for developers (or at least some knowledge editing code), and it doesn't do anything special that X3 can't do.
problem wrote:https://preview.codecanyon.net/item/con ... 1550940751
I received "simple" instructions just to find that I cannot insert necessary codes into <head> and <body>, I cannot find where. Am I missing something or there's no interface option to do that?
There is, if you still want to pursue this approach. Keep in mind also, X3 is a modern "Ajax application", which means it does not RELOAD full pages after navigations (you probably noticed this when clicking around in the menu?), and therefore there are more steps involved.

Their instructions are made for editing basic HTML files (as if you made a website in dreamweaver or simple html). Although a web developer would be able to deduce these instructions to include into templates for a CMS. X3 is a CMS of course, and you can't just edit html files.

First of all, you can add custom stuff in <head> from Settings > Custom > Custom <head>.

As for <body>, basically whatever you add into your Page > Content is part of the body, and also where you could/would glue any custom javascript. You wouldn't want to blindly add this into all pages though.

As far as I can understand, you should probably consider using native X3 form. Much easier, faster, less complicated and pre-configured. I would be happy to assist with examples of form elements. If you want to include this script, it's clumsy, and I would have to assist with custom codes, but I don't see any functional benefits.
 
User avatar
problem
Topic Author
Posts: 4
Joined: 22 Feb 2019, 20:05

Re: Third party contact form?

25 Feb 2019, 07:45

Hi Karl, thank you for swift reply! True, I was thinking about contacting here first but then I changed my mind in 4am (as always) and went for other, I thought faster solution. I bought X3 having in mind what I remember of Imagevue 2, I still have impression that documentation back then was much more detailed. Years passed, maybe I'm wrong. I think that I could set up X3 without major problems if I solve reservation form.
What I need is:
1. Name (required)
2. Email (required) and Phone (optional) in the same line.
3. Persons (required, dropdown from 1 to 30), Time (required, dropdown from 13:00, 13:30., to 22:30), Date (required, date picker / calendar) all three fields in the same line.
4. Message (optional)
I grouped Email + Phone and Persons + Time + Date to avoid ugly list and have nice looking and compact form.
Would it be possible to help me with a codes to achieve this?
Thanks in advance.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Third party contact form?

26 Feb 2019, 00:36

problem wrote:I bought X3 having in mind what I remember of Imagevue 2, I still have impression that documentation back then was much more detailed.
Documentation is a bit lacking in X3, although there is solid in-panel help explaining features. X3 is so much more to cover than X2, but hope to have improved X3 docs soon.
problem wrote:What I need is:
Ok, I will include below for a form which covers the specified functionality. A few comments first:
problem wrote:I grouped Email + Phone and Persons + Time + Date to avoid ugly list and have nice looking and compact form.
Personally I would recommend not grouping some items into the same line. The form should be limited by width (narrow layout), but nothing wrong in using vertical space (which might require scroll). Furthermore, if you want to squeeze multiple form elements into the same line, not only will it be harder to read, but you will need to prepare responsive grid elements for small mobile devices, as you don't have space to squeeze 3 items on narrow screens. For now, all items are stacked.
Code
<!-- start form -->
<form data-abide class="contactform text-left">

<!-- name -->
<div>
<input type="text" name="name" placeholder="Name" required>
</div>

<!-- email -->
<div>
<input type="email" name="email" placeholder="Email" required>
</div>

<!-- phone -->
<div>
<input type="tel" name="phone" placeholder="Phone number">
</div>

<!-- persons -->
<div>
<strong>Persons</strong>
<select name="persons">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</div>

<!-- time -->
<div>
<strong>Time</strong>
<select name="time">
<option>13:00</option>
<option>13:30</option>
<option>14:00</option>
<option>14:30</option>
<option>15:00</option>
<option>15:30</option>
<option>16:00</option>
<option>16:30</option>
<option>17:00</option>
<option>17:30</option>
<option>18:00</option>
<option>18:30</option>
<option>19:00</option>
<option>19:30</option>
<option>20:00</option>
<option>20:30</option>
<option>21:00</option>
<option>21:30</option>
<option>22:00</option>
<option>22:30</option>
</select>
</div>

<!-- date -->
<div>
<strong>Date</strong><br>
<input type="date" name="date">
</div>

<!-- message -->
<div>
<strong>Message</strong>
<textarea required rows="6" name="message" placeholder="Add your message"></textarea>
</div>

<!--  SEND button -->
<button type="submit">Send</button>

<!-- End form -->
</form>
 
User avatar
problem
Topic Author
Posts: 4
Joined: 22 Feb 2019, 20:05

Re: Third party contact form?

26 Feb 2019, 15:18

Karl, thank you so much! World is too small and life long enough to have great lunch on the island of Crete, feel invited to eat like a Greek God if you ever visit Greece and Crete https://www.facebook.com/toantikristo/ , I'll cook for you. Form is almost perfect once Persons, Time and Date should be required fields, optional will require additional messages in some cases usually when we're very busy. Would it be possible please add that and require those fields? THANK YOU!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Third party contact form?

27 Feb 2019, 01:35

problem wrote:Karl, thank you so much! World is too small and life long enough to have great lunch on the island of Crete, feel invited to eat like a Greek God if you ever visit Greece and Crete https://www.facebook.com/toantikristo/ , I'll cook for you.
Sounds amazing!
problem wrote:Form is almost perfect once Persons, Time and Date should be required fields, optional will require additional messages in some cases usually when we're very busy. Would it be possible please add that and require those fields? THANK YOU!
OK. For I added required attribute, and for the dropdown lists, I had to add empty options <option value="">Select persons</option> and <option value="">Select time</option> ... Feel free to edit the texts there, but value="" must remain so that the form understands that it's not a valid selection.
Code
<!-- start form -->
<form data-abide class="contactform text-left">

<!-- name -->
<div>
<input type="text" name="name" placeholder="Name" required>
</div>

<!-- email -->
<div>
<input type="email" name="email" placeholder="Email" required>
</div>

<!-- phone -->
<div>
<input type="tel" name="phone" placeholder="Phone number">
</div>

<!-- persons -->
<div>
<strong>Persons</strong>
<select name="persons" required>
<option value="">Select persons</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</div>

<!-- time -->
<div>
<strong>Time</strong>
<select name="time" required>
<option value="">Select time</option>
<option>13:00</option>
<option>13:30</option>
<option>14:00</option>
<option>14:30</option>
<option>15:00</option>
<option>15:30</option>
<option>16:00</option>
<option>16:30</option>
<option>17:00</option>
<option>17:30</option>
<option>18:00</option>
<option>18:30</option>
<option>19:00</option>
<option>19:30</option>
<option>20:00</option>
<option>20:30</option>
<option>21:00</option>
<option>21:30</option>
<option>22:00</option>
<option>22:30</option>
</select>
</div>

<!-- date -->
<div>
<strong>Date</strong><br>
<input type="date" name="date" required>
</div>

<!-- message -->
<div>
<strong>Message</strong>
<textarea required rows="6" name="message" placeholder="Add your message"></textarea>
</div>

<!--  SEND button -->
<button type="submit">Send</button>

<!-- End form -->
</form>
 
User avatar
problem
Topic Author
Posts: 4
Joined: 22 Feb 2019, 20:05

Re: Third party contact form?

01 Mar 2019, 13:10

Thanks to you I can move now and do some easy job. Please do not forget my invitation! I'll modify that to entire visit so it's not only a lunch, feel welcome!