Using Form Designer with MadCap Flare...

User 2871031 Photo


Registered User
6 posts

It's been a while and I got busy doing other things, but finally got around to implementing the user feedback form I mentioned before. Here's what I did to get it to work with my MadCap Flare project, just in case anyone else has trouble with it in a similar situation:

I created my form using Web Form Builder. In the form, I included a hidden field named TopicURL, and then did the following:

1. I made minor changes to the iframe code generated by Web Form Builder after exporting. I inserted "?Referrer=" after the ContactForm.php file location. and changed "+ window.location.href" to "+ window.location.href". See my example below:

<script type="text/javascript">document.write(unescape("%3Ciframe id=\"fb_iframe\" src=\"/ContactForm.php?Referrer=" + window.location.href + "\" width=\"100%\" height=\"728\"allowtransparency=\"true\" scrolling=\"no\" frameborder=\"0\"%3E&lt;a href=\"/ContactForm.php\" title=\"ContactForm\"&gt;Check out my CoffeeCup Form&lt;/a&gt;%3C/iframe%3E"));</script>
<noscript>
<iframe height="728" style="border:none; background:transparent; overflow:hidden; width:100%;"
id="fb_iframe" src="/ContactForm/ContactForm.html">
<a href="/ContactForm.php" title="HCFeedback">Check out my CoffeeCup Form</a>
</iframe>
</noscript>

2. I added the above code into my primary topic master page in the Flare project file, and then placed all additional files exported from Form Builder in their appropriate locations.

3. Then I added the following to the exported ContactForm.html page code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>$(document).ready(function () {
var urlParams = new URLSearchParams(window.location.search);
var currentURL = urlParams.get('Referrer');
$("#TopicURL").val(currentURL);
});</script>
<input name="TopicURL" id="TopicURL" type="hidden" />

This allowed the web form to pass the URL of the page the form is being displayed on (as opposed to the URL of the ContactForm.html location from the iframe) in the notification email sent to me when a user submits the form.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.