Drupal Web Form Integration - Page 1

Mar 31st, 2014 at 06:43 PM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

I am hosting a webform on your S-Drive at http://longleafpartners.coffeecup.com/l … g%20form/.

I added the following code to the page above using Custom Content type in my Drupal site, but the page just hangs with no load of form.

<script type="text/javascript">document.write(unescape("%3Cscript src='http" + (document.location.protocol == 'https:' ? 's' : '') + "://www.coffeecup.com/api/sdrive/forms/form.js?name=longleaf%2520reg%2520form%26slug=244515%26height=852%26crossdomains=true%26rand=" + Math.floor( Math.random() * 1000000000 ) + "' type='text/javascript'%3E%3C/script%3E"));</script>

Any suggestions?

Thx.
JP

Website Url: http://longleafpartners.com/presentation2014
Mar 31st, 2014 at 07:13 PM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Remove the script wrapped around the iframe code and use just the iframe part. Also rename your form without spaces.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Apr 1st, 2014 at 02:34 AM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

Now i just get the code exposed on the page. Check out the link now, http://longleafpartners.com/presentation2014

I removed the <script> tags and made form name w/ no spaces.

Thanks in advance for your help.
Apr 1st, 2014 at 06:52 AM
User 187934 Photo

Eric Rohloff
Senior Advisor
20,271 posts

Use the iframe part that the form builder generates.
<iframe width="100%" height="500" style="border:none; background:transparent; overflow:hidden;"
id="fb_iframe" src="myformname/myformname.html">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Apr 1st, 2014 at 11:31 AM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

It doesn't produce an iframe. I'm using S-Drive to host the form so that code above is what I get.
Apr 1st, 2014 at 11:34 AM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

JohnPaul Beeghly wrote:
It doesn't produce an iframe. I'm using S-Drive to host the form so that code above is what I get.

You can use the Export > Automated Form Processing to get all the form files.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Apr 1st, 2014 at 11:50 AM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

Are you suggesting I don't use S-Drive and host the form myself? There is no iframe code generated with the Automated Form Processing.

I must be missing something here... Maybe you can point me to some specific section of the user guide that explains how to generate an iframe output.

Here is what is generated from AFP:


<!-- Start of the headers for CoffeeCup Web Form Builder -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="longleafregform/common/js/form_init.js" data-name="longleafregform/" id="form_init_script"></script>
<link rel="stylesheet" type="text/css" href="longleafregform/theme/default/css/default.css" id="theme" />
<!-- End of the headers for CoffeeCup Web Form Builder -->


and,


<!-- Start of the body content for CoffeeCup Web Form Builder -->
<style>#docContainer .fb_cond_applied{ display:none; }</style><noscript><style>#docContainer .fb_cond_applied{ display:inline-block; }</style></noscript><form id="docContainer" enctype="multipart/form-data" method="POST" action="http://longleafpartners.coffeecup.com/longleafregform/"
novalidate="novalidate" class="fb-toplabel fb-large fb-66-item-column selected-object"
style="border-width: 2px; font-family: arial; font-size: 14px; background-color: rgb(235, 233, 230); border-color: rgb(217, 217, 217); -webkit-box-shadow: none; box-shadow: none; margin: 5px; max-width: 800px; color: rgb(45, 45, 45);"
data-boxshadow="false" data-margin="custom" data-form="automated">
<div id="fb-form-header1" class="fb-form-header" style="min-height: 0px; height: 10px;">
<a id="fb-link-logo1" class="fb-link-logo" target="_blank" style="max-width: 104px;"><img alt="Alternative text" title="Alternative text" id="fb-logo1" class="fb-logo" src="longleafregform/common/images/image_default.png" style="display: none; width: 100%;"/></a>
</div>
<div id="section1" class="section">
<div id="column1" class="column ui-sortable">
<div style="display:none; min-height:200px;" id="fb_confirm_inline">
</div>
<div style="display:none;" id="fb_error_report">
</div>
<div id="item1" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label id="item1_label_0" style="font-weight: normal; display: inline;">Email (required)</label>
</div>
<div class="fb-input-box">
<input type="email" id="item1_email_1" maxlength="254" placeholder="you@domain.com"
autocomplete="off" data-hint="" name="email1" required autofocus/>
</div>
</div>
<div id="item3" class="fb-item fb-33-item-column">
<div class="fb-grouplabel">
<label id="item3_label_0" style="display: inline; font-weight: normal;">First Name (required)</label>
</div>
<div class="fb-input-box">
<input type="text" id="item3_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="firstname" required/>
</div>
</div>
<div id="item4" class="fb-item fb-66-item-column">
<div class="fb-grouplabel">
<label id="item4_label_0" style="display: inline; font-weight: normal;">Last Name (required)</label>
</div>
<div class="fb-input-box">
<input type="text" id="item4_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="lastnamerequired" required/>
</div>
</div>
<div id="item10" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label id="item10_label_0" style="display: inline; font-weight: normal;">Title</label>
</div>
<div class="fb-input-box">
<input type="text" id="item10_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="title" />
</div>
</div>
<div id="item11" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label id="item11_label_0" style="display: inline; font-weight: normal;">Company (required)</label>
</div>
<div class="fb-input-box">
<input type="text" id="item11_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="company" required/>
</div>
</div>
<div id="item5" class="fb-item fb-100-item-column">
<div class="fb-grouplabel">
<label id="item5_label_0" style="display: inline; font-weight: normal;">Street Number &amp; Address</label>
</div>
<div class="fb-input-box">
<input type="text" id="item5_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="street" />
</div>
</div>
<div id="item6" class="fb-item fb-50-item-column">
<div class="fb-grouplabel">
<label id="item6_label_0" style="display: inline; font-weight: normal;">City</label>
</div>
<div class="fb-input-box">
<input type="text" id="item6_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="city" disabled/>
</div>
</div>
<div id="item13" class="fb-item fb-50-item-column" style="opacity: 1;">
<div class="fb-grouplabel">
<label id="item13_label_0" style="display: inline; font-weight: normal;">State, Province or Territory</label>
</div>
<div class="fb-input-box">
<input type="text" id="item13_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="state" />
</div>
</div>
<div id="item14" class="fb-item fb-66-item-column">
<div class="fb-grouplabel">
<label id="item14_label_0" style="display: inline; font-weight: normal;">Country</label>
</div>
<div class="fb-input-box">
<input type="text" id="item14_text_1" maxlength="254" placeholder="U.S.A."
autocomplete="off" data-hint="" name="country" />
</div>
</div>
<div id="item9" class="fb-item fb-33-item-column" style="padding-left: 2px;">
<div class="fb-grouplabel" style="">
<label id="item9_label_0" style="display: inline; font-weight: normal;">Zip Code</label>
</div>
<div class="fb-input-box" style="">
<input type="text" id="item9_text_1" maxlength="254" placeholder="" autocomplete="off"
data-hint="" name="zip" />
</div>
</div>
<div id="item2" class="fb-item fb-75-item-column" style="padding-left: 0px;">
<div class="fb-grouplabel" style="">
<label id="item2_label_0" style="font-weight: normal;">Phone Number</label>
</div>
<div class="fb-phone" style="">
<input type="tel" id="item2_tel_1" data-hint="" name="tel2" />
</div>
</div>
</div>
</div>
<div id="fb-submit-button-div" class="fb-item-alignment-left fb-footer"
style="padding-top: 20px; min-height: 1px;">
<input type="submit" class="fb-button-special non-standard" id="fb-submit-button"
data-regular="" style="font-family: arial; font-size: 14px; background-color: rgb(52, 43, 31); padding: 10px 20px; border-width: 0px; width: auto; height: auto; background-image: none;"
value="Register Now!" />
</div>
<input type="hidden" name="fb_form_custom_html" />
<input type="hidden" name="fb_form_embedded" />
<input type="hidden" id="fb_js_enable" name="fb_js_enable" />
<input type="hidden" id="fb_url_embedded" name="fb_url_embedded" />
</form>
<!-- End of the body content for CoffeeCup Web Form Builder -->
Apr 1st, 2014 at 10:21 PM
User 103173 Photo

Scott Swedorski
VP of Software Development
0 posts

I am sorry, I forgot the Automated Form Processing does not give you an iframe on publish. The only way to get the iframe markup is if you are exporting to your own server. However you could still make your own iframe markup and then reference the exported HTML file that you received during the Automated Form Processing steps.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Apr 2nd, 2014 at 12:58 AM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

That's what we did. The "easy" solution turned out to be a bit of a boondoggle. Any plans for some modules/plugins for Wordpress and Drupal?
Jan 26th, 2016 at 12:42 AM
User 2667504 Photo

JohnPaul Beeghly
Registered User
6 posts

Is it possible to delete this post or make it private so it does not show up in searches?

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.