Extra product tab with contact form

In this guide I want to show you how easily you can create a contact form on product page. Each customer will have possibiltiy to quickly contact with you directly from product page. Contact form will send an email with title "question about: X" where X will be the product name. Whole guide is based on our extra tabs pro module, but of course you can use any other plugin that allows to create extra product tab or to add custom contents to product pages (some part of them are free like content box).

1. Contact form inside product extra tab

Firstly, we have to prepare some datas that we will use to create such kind of contact form. We will need to get informations like (see table attached below). url to contact form page and id of contact. And that's all, the rest will be a code that we will insert into the textform in extra tabs pro module.

2. Create the contact form code

To create such code we will use standard html markup "form" that allows us to build forms. So, here it is. Below the code you can find informations what to change to make it work for your website with some explanations. Please follow these steps:

1. go to shop back office
2. go to product edit page
3. go to "extra tabs pro" section
4. create new tab or edit tab that exists
5. Tab name: type there "contact form" or any other thing that will be a title of the table
6. Tab contents: enter to the code editor tool (see screenshot) and paste code below

<form action="_____URL_TO_CONTACT_FORM_____" method="post" class="contact-form-box" enctype="multipart/form-data">
    <input type="hidden" name="id_contact" value="_____ID_OF_CONTACT_____">
    <fieldset>
    <h3 class="page-subheading">send a message</h3>
        <div class="clearfix">
            <div class="col-xs-12 col-md-3">
                <div class="form-group selector1">
                    <label for="email">Email address</label>
                    <input class="form-control grey validate" type="text" id="email" name="from" data-validate="isEmail" value="">
                </div>
                <div class="submit">
                    <button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium"><span>Send<i class="icon-chevron-right right"></i></span></button>
                </div>
            </div>
            <div class="col-xs-12 col-md-9">
                <div class="form-group">
                  <label for="message">Message</label>
    		  <textarea style="min-height:100px;" class="form-control" id="message" name="message">Question about {name}</textarea>
                </div>
            </div>
        </div>
    </fieldset>
</form>

This is the full code of contact form that you have to paste. As you can see - i highlighted two lines. Please replace variables with previously copied values of:

1. _____URL_TO_CONTACT_FORM_____ - replace this with url to your contact form page.
2.  _____ID_OF_CONTACT_____ - replace this with ID of your contact email 

3. Extra tab with contact us form

Once you will replace the variables with correct values - you can save the contents of extra tab. On your product page should appear "contact us" tab now with contact form inside. Once customer will fill out it and send - you will receive an email to selected customer's service email.