reBOOT Easy Custom Contact Forms v4.7.x

reBOOT Easy Custom Contact Forms v4.7.x




Installation


1 Obtain your reCAPTCHA site key and secret key here and keep them ready.


2 In X-Cart Admin > Tools > Patch / Upgrade underneath 'Apply SQL patch' browse to /upload/install/patch_languages.sql and press 'Apply'.


3 Edit /upload/forms/config.php to your liking.

In particular, $config['send_to'], $config['logo'], $config['footer'], UPLOAD_FOLDER_URL, $config['file_manager_password'], $config['recaptcha_secret_key']


4 In /upload/skin/common_files/forms/footer.tpl replace data-sitekey="xxxxxxxxxxxxxxxxxxxx" with your reCAPTCHA site key.

You can also choose data-theme="light" or data-theme="dark" for the reCAPTCHA box.


5 Upload the contents of /upload to your store root.


6 Ensure the /forms/uploads folder is writable.


7 In Admin > Tools > Maintenence click the 'Clear' button underneath 'Clear X-Cart cache'




Set Up a New Form


1 Create a new static page for your new form.


2 Once your static page is created, you need to edit it via FTP (skin/common_files/pages/en/whatever_page.html)

Do not attempt to manage your forms in the static page HTML editors, as field validation rules will prevent pages from saving.

In your page, add the following bare minimum code... (name and email are required fields)

{include file="modules/forms/header.tpl"}

{*--------------------------------------*}

{include file="modules/forms/field.tpl" type="hidden" field="form-name" default="ENTER THE FORM NAME HERE"}

{$lng.lbl_custom_form_header}

{*----------------- Form Start ----------------- *}

{* Required Fields *}

<div class="row mb20">

<div class="col-md-6">
{include file="modules/forms/field.tpl" type="text" field="name" label="Name" default="" required="true" maxlength="100" help="Field help text."}
</div>

<div class="col-md-6">
{include file="modules/forms/field.tpl" type="email" field="email" label="Email" default="" required="true" maxlength="100" help="Field help text."}
</div>

</div>

{*---------------------------------------------- *}

{* Add Your Form Fields Here *}

{*------------------ Form End ------------------ *}

{include file="modules/forms/footer.tpl"}



Add Form Fields


Each field="x" needs to be unique. Use hyphens (-) for spaces in field="x" names, eg. field="street-name"

For required fields, either enter required="true" (required) or required="" (not required).


Text fields

Name is a mandatory text field type="text" field="name"

{include file="modules/forms/field.tpl" type="text" field="name" label="Name" placeholder="Placeholder" default="" required="true" maxlength="100" help="Field help text."}

Email fields

Email is a mandatory email field type="email" field="email"

{include file="modules/forms/field.tpl" type="email" field="email" label="Email" placeholder="Placeholder" default="" required="true" maxlength="100" help="Field help text."}

Number fields

{include file="modules/forms/field.tpl" type="number" field="adults" label="Adults (4 Maximum)" placeholder="Placeholder" default="0" min="0" max="4" required="" help="Field help text."}

Password fields

{include file="modules/forms/field.tpl" type="password" field="password" label="Password" placeholder="Placeholder" default="" required="" maxlength="100" help="Field help text."}

Textarea fields

{include file="modules/forms/field.tpl" type="textarea" rows="5" field="message" label="Message" placeholder="Placeholder" default="" required="true" maxlength="500" help="Field help text."}

Select fields

By default, you have up to 20 possible options. If you need more, edit skin/common_files/forms/field.tpl

{include file="modules/forms/field.tpl" type="select" field="department" label="Department" required="" help="Field help text." 
01option="Bookings" 01value="Bookings" 
02option="Sales" 02value="Sales" 
03option="Marketing" 03value="Marketing" 
04option="Support" 04value="Support" 
}

Radio fields

By default, you have up to 20 possible options. If you need more, edit skin/common_files/forms/field.tpl

Fields can be displayed horizontally horiz="true" or vertically horiz=""

{include file="modules/forms/field.tpl" type="radio" field="priority" label="Priority" horiz="true" required="" help="Field help text." 
01option="Low" 01value="Low" 01checked="" 
02option="Medium" 02value="Medium" 02checked="" 
03option="High" 03value="High" 03checked="" 
04option="Critical" 04value="Critical" 04checked="" 
}

Checkbox fields

By default, you have up to 20 possible options. If you need more, edit skin/common_files/forms/field.tpl

Fields can be displayed horizontally horiz="true" or vertically horiz=""

{include file="modules/forms/field.tpl" type="checkbox" field="options" label="Options" horiz="true" help="Field help text." 
01option="Breakfast" 01value="Yes" 01checked="" 
02option="Lunch" 02value="Yes" 02checked="" 
03option="Dinner" 03value="Yes" 03checked="" 
04option="Parking" 04value="Yes" 04checked="" 
}

Date fields

{include file="modules/forms/field.tpl" type="date" field="check-in-date" label="Check In Date" placeholder="Placeholder" default="" required="" help="Field help text."}

File fields

Only one permitted per form.

{include file="modules/forms/field.tpl" type="file" label="Attachment" required="" help="<a href='javascript:;' class='file-clear ttip_n' title='Remove File'><i class='fa fa-trash'></i></a> Allowed File Types [ ZIP, RAR, PDF, DOC, JPG, JPEG, GIF, PNG ]. Maximum File Size [ 3MB ]."}


Grid System


You can layout your form fields in any Bootstrap grid formation...


1 Column

<div class="row mb20">
<div class="col-md-12">
{form field}
</div>
</div>

2 Columns

<div class="row mb20">
<div class="col-md-6">
{form field}
</div>
<div class="col-md-6">
{form field}
</div>
</div>

3 Columns

<div class="row mb20">
<div class="col-md-4">
{form field}
</div>
<div class="col-md-4">
{form field}
</div>
<div class="col-md-4">
{form field}
</div>
</div>

4 Columns

<div class="row mb20">
<div class="col-md-3">
{form field}
</div>
<div class="col-md-3">
{form field}
</div>
<div class="col-md-3">
{form field}
</div>
<div class="col-md-3">
{form field}
</div>
</div>


Notes


1 We strongly suggest you present your forms on a secure browser connection (SSL certificate required).

2 You can change email style by changing $email_style = '1'; in /forms/config.php

3 You can customise the email template by editing /forms/email.php

4 Access the file uploads manager in your browser at www.store.com/forms/uploads/manager.php (bookmark for future access)

5 If you wish to disable autocomplete for forms, in /skin/common_files/modules/forms/header.tpl replace autocomplete="on" with autocomplete="off"

6 Once you have created a new form, don't forget to test it!



© 2016 www.xcartmods.co.uk