MachForm Community Forums » MachForm 3

1. maperformance
   Member

   I am trying to embed a form into a product page on me e-commerce site. How can I include a hidden field in the form that will display to me what page the form was submitted from, so I can make it as easy as possible for users?

   More detail: We are going to add a "Improve this listing" form on every product page on our site. Putting a form there is easy, since our e-commerce platform (X-cart) uses templates to render every product page with a unique URL based off the item's PRODUCTID in the database. Now what I'm trying to have is as simple of a form as possible for someone to fill out and submit letting us know of an error or update to a product on our site. The example I'm working from is here (http://www.wayfair.com/Skyline-Furniture-Wingback-Chair-88-1-SKY2701.html?refid=FR49-SKY2701_7020365&PiID=7020365). If you look under the Product Details section, there is a link, "See something odd? Report it here." that reveals a hidden DIV with a single field form and a submit button. I'd like to replicate this. I have the DIV code in place, but need to identify what page the form is being submitted from, so I need to pass the current page's URL to a hidden field on the form submission.

   Posted 12 years ago #
2. 

   yuniar

   Simply create a text field and then set the "Custom CSS Class" to "hidden" so that the field will be hidden.

   Then pass the page URL using this method:
   http://www.appnitro.com/doc-url-parameters

   I believe that should work.

   ---

   MachForm Founder

   Posted 12 years ago #

3. maperformance
   Member

   Thanks for the response, and I did look into that URL you linked me to previously. Unfortunately I don't have any easy way to modify the URL of my pages to include extra parameters like that. I there perhaps a Javascript that can be put in the form to auto-poll the current URL and fill in the field for me?

   Posted 12 years ago #
4. 

   yuniar

   Actually, you don't need to modify the URL of your pages.
   You simply need to modify the form embed code to dynamically include the current page URL or PRODUCTID or anything to identify the page.

   I'm not familiar with X-Cart but I believe it's using smarty template? So there should be some kind of template variable there.
   So for example, let say you have a template variable named {$PRODUCTID} and you would like to pass this into your form.

   Then your form embed code would be something like this:

   <script type="text/javascript">
   var __machform_url = 'http://example.com/machform/embed.php?id=10250&element_3={$PRODUCTID}';
   var __machform_height = 2124;
   </script>
   <div id="mf_placeholder"></div>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script type="text/javascript" src="http://example.com/machform/js/jquery.ba-postmessage.min.js"></script>
   <script type="text/javascript" src="http://example.com/machform/js/machform_loader.js"></script>

   the most important part of the above code is this line:

   var __machform_url = 'http://example.com/machform/embed.php?id=10250&element_3={$PRODUCTID}';

   This way, each time the form is being loaded on different page, your template will replace {$PRODUCTID} with the actual ID of that page, thus passing the value to your form field.

   ---

   MachForm Founder

   Posted 12 years ago #

5. maperformance
   Member

   OK, I tried what you suggested and it did not work. Here is the form code:

   <form id="form_15" class="appnitro top_label" method="post" data-highlightcolor="#FFF7C0" action="#main_body">
   					<div class="form_description">
   			<h2></h2>
   			<p></p><p>If you see incorrect information or some other way to improve this listing, please let us know here. If you'd like a reply to your feedback, please <a href="http://www.maperformance.com/support/tickets/contact/" target="_blank">submit a ticket here</a> instead.</p><p></p>
   		</div>
   			<ul>
   
   					<li id="li_2">
   		<label class="description" for="element_2">Description <span id="required_2" class="required">*</span></label>
   		<div>
   			<textarea id="element_2" name="element_2" class="element textarea medium" rows="8" cols="90"></textarea>
   
   		</div><p class="guidelines" id="guide_2"><small>Please be as descriptive as possible so we can improve this listing</small></p>
   		</li>		<li class="highlighted" id="li_4">
   		<label class="description" for="element_4">ProductID </label>
   		<div>
   			<input id="element_4" name="element_4" class="element text large" value="" title="" type="text">
   
   		</div>
   		</li>		<li id="li_captcha">
   		<label class="description" for="captcha_response_field">Type the letters you see in the image below. </label>
   		<div>
   			<img id="captcha_image" src="captcha.php?t=1348774107" alt="Please refresh your browser to see this image." height="60" width="200"><br>
   <input id="captcha_response_field" name="captcha_response_field" class="element text small" type="text"><div id="dummy_captcha_internal"></div>
   		</div>	 
   
   		</li>
   
   					<li id="li_buttons" class="buttons">
   			    <input name="form_id" value="15" type="hidden">
   
   			    <input name="submit_form" value="1" type="hidden">
   			    <input name="page_number" value="1" type="hidden">
   				<input id="submit_form" class="button_text" name="submit_form" value="Submit" type="submit">
   		</li>
   			</ul>
   		</form>

   So my element is element_4. I have edited the form embed code like this:

   <script type="text/javascript">
   var __machform_url = 'http://www.maperformance.com/forms/embed.php?id=15&element_4={$product.productid}';
   var __machform_height = 470;
   </script>
   <div id="mf_placeholder"></div>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/jquery.ba-postmessage.min.js"></script>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/machform_loader.js"></script>

   Where $product.productid is the Smarty variable for the number I'm after. This is not populating the form as expected. I can see that the code is working like it should because the page source shows this:

   <script type="text/javascript">
   var __machform_url = 'http://www.maperformance.com/forms/embed.php?id=15&element_4=25689';
   var __machform_height = 470;
   </script>
   <div id="mf_placeholder"></div>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/jquery.ba-postmessage.min.js"></script>
   <script type="text/javascript" src="http://www.maperformance.com/forms/js/machform_loader.js"></script>

   Posted 12 years ago #
6. 

   yuniar

   It seems you have it correct already. However, I forgot to ask this, what is your exact MachForm version?
   The URL parameters only available since v3.2

   If you are still using older version (v3.0 or v3.1) you will need to update your MachForm first.
   The latest version is v3.3 and you can download it from our member area. It's free of charge.

   ---

   MachForm Founder

   Posted 12 years ago #

7. maperformance
   Member

   Yup, that was it. I had downloaded the upgrade but had yet to install it. I did so and now it works fine. Thanks!

   Posted 12 years ago #

8. maperformance
   Member

   OK, new problem. I am trying to have this field hidden so the user doesn't see it (and therefore can't edit it), but if I set the field as "Admin Only" it doesn't show up in the email I receive after submission. How can I hide this field?

   Posted 12 years ago #

9. maperformance
   Member

   I have tried doing the custom CSS class on the ProductID field. I added this to my CSS file:
   li .hideproductid {display: none; visibility: hidden;}
   but it doesn't hide the field. What am I doing wrong?

   Posted 12 years ago #

10. williamansley
    Member

    I'm sure it is possible to hide a field by editing the CSS file, but there is a much simpler way to do this in Machform 3.3. Just put the text "hidden" in the "Custom CSS Class" field at the bottom of the "Field Properties" tab of the field you want to hide. The "Custom CSS Class" field is visible when you are editing the form in the Form Manager.

    Posted 12 years ago #

11. maperformance
    Member

    Thanks williamansley, that worked perfect!

    Posted 12 years ago #

12. williamansley
    Member

    I'm glad to hear it worked for you.

    Posted 12 years ago #

RSS feed for this topic

Reply

You must log in to post.