[Drupal] How to share webforms between different sites in Drupal 7?
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY sarika.k
3 years ago
WebForm
0
comments comment

I had a requirement to create webform in multiple environments. Webforms cannot be exported as features. Webform_share module helps to export the webform and then imported the same in my different work environment. The Webform_share module requires webform module. For installation, download and enable the webform_share module.

Steps to export webform includes:

  • After enabling this module export and import options are available to the webforms.
  • Export and import are placed at the right of form settings on the page (node/[nid]/webform).
  • Click export button to export the entire webform, a copy of the webform gets downloaded.

Steps to import webform includes:

  • Create new webform.
  • Export and import are places at the right of form settings on page (node/[nid]/webform).
  • Click import button to import the entire webform,which directs to the page (node/[nid]/webform/ws-import)
  • Copy the entire code generated from a webform share export and paste it into the 'import code' textarea field.
  • Click submit.
  • The exported webform will be now available in the new environment.

Note that, the existing webform components are completely replaced with the new webform components. If a component is removed or the key name is renamed, you can't access to any user submitted data.

For more Drupal solutions details, check out our services and get in touch.


RELATED ARTICLE

close

on 11th September 2012 / by binny.thomas
The trick explained briefly We are not actually going to theme the file upload field as it is presently nearly impossible to do that. Instead we are going to put an ordinary looking 'dummy' input text field over the file field. Next we proceed to make the 'original' file upload field invisible but accessible to the user via CSS. So when a user clicks on the dummy input text field they are actually clicking on the file upload field itself. To make it authentic we are going to copy the file path from the file upload field to the text input field via javascript. So here are the steps to theme the file upload field in a webform. We need to use a combination of CSS and javascript. Have a look at the javascript code. You could add the input field normally via HTML but its better to add it via javascript to get more control over the field dynamically. Here is the javascript to add the dummy input field to the real file input field and to pass the values in reverse. function fileUploadTheming() { var fakeFileUpload = document.createElement('div'); //Creating the div tag for the fake input element to cover the file input fakeFileUpload.className = 'fakefile'; //Adding the class name to the previous div fakeFileUpload.appendChild(document.createElement('input')); //Adding the input element inside the previous div tag var x = document.getElementsByTagName('input'); //Getting all the input elements in the page and passing them to a variable for (var i=0;i<x.length;i++) { //We need to look for the correct. if (x[i].type != 'file') continue; //Continue search till we find the file upload fields x[i].className = 'file-hidden'; //We are changing the class name of the file upload field to prevent issues with browsers var clone = fakeFileUpload.cloneNode(true); x[i].parentNode.appendChild(clone); //Adding the fake input box to the existing file input field div. x[i].relatedElement = clone.getElementsByTagName('input')[0]; x[i].onchange = x[i].onmouseout = function () { this.relatedElement.value = this.value; //Passing the value in the real file input field to the fake one } } }Javascript Explained The logic is fairly easy.The first 3 lines of code in the javascript are concerned with the creation of the fake input field. First we create a div tag, give it a class name and the add the input field to it. Next we need to find out all the input fields in the form using the getElementsByTagName() method. From the input fields we have received we need to get to the actual file upload field. Once we find the field we change its class name to file-hidden so that we can style it in CSS. Next is the important stuff. We need to place our dummy input field into the div of the original file field so that they can be positioned on top of each other. To do that we clone the node we created earlier and then append it to the the real field. As a final touch of authenticity, we need to pass the value from the original file field after the user has selected the file,to the dummy field when the value in the original field has been changed and the users mouse passes over the fake field. This is done in the last two lines of the code. Theming the file upload using CSS #webform-client-form-2476 .file-hidden{ opacity: 0; position: relative; z-index: 2; top: 18px; } #webform-client-form-2476 .fakefile input{ width: 450px; height: 50px; margin: auto; background-color: #E8E8E8; border: 2px solid #777777; font-size: 15px; color: #787878; padding-left: 8px; position: absolute; z-index: 1; background-image: url('../images/browse_button.jpg'); background-repeat:no-repeat; background-position: right; position: relative; bottom: 20px; right: 3px; } CSS Explained The basic logic in the CSS to keep the two input fields one on top of each other while displaying only one to the user. The original file input field should be kept on top of the dummy input field but it should be hidden. To do this we should set the z-index to 2 and opacity to 0; The dummy field should come below the original file and so we set the z-index to 1. The rest of the CSS is concerned with the position of the dummy field. Set the original field position to relative and set the dummy field position to absolute. This will ensure that the dummy field is always covering the real one. The rest of CSS is just purely aesthetic to theme the file input field, which is what we wanted to do in the first place. See the theming in action at: http://www.zyxware.com/careers/job-openings/business-development-associ… Reference - http://www.quirksmode.org/dom/inputfile.html Javascript Drupal Theming CSS Drupal Development Tips and Tricks WebForm Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 19 Jun 2019 - 12:56 For drupal 7 and field collection ajax calls messup file fields. Here is a jquery version which uses drupal behaviors and respect ajax calls (function($) { Drupal.behaviors.dogmodule = { attach : function(context, settings) { $('input[type=file]', context).each(function(i,e){ var new_div = $(''); $(this).addClass('file-hidden').before(new_div); $(this).change(function(){ $(this).prev().find('input').val($(this).val()); }); }); } }; })(jQuery); thomask84 (not verified) access_time 19 Jun 2019 - 12:56 As soon as i try to put this in my template.php i get a UNEXPTECTED T_VAR ON LINE X error. Its the first line in the script that gives me issues. Komodo also gives me a warning about the same line. However, i dont see what's wrong with it. Closing bracked is there, everything is in place. I copy/pasted the exact same code as u placed above. Any idea what could be the problem? (btw, i also tried to put the code into a *.js file and load it via the *.info. The script gets loaded but it doesnt seem to work. Nothing happens to the webform browse file field.) Add new comment
more_horiz
close

on 17th October 2012 / by webmaster
Drupal Webform can be used to create forms and track the results of submissions in your Drupal installation. Drupal Webform can also be used to send confirmation emails to users when they have successfully completed submission. There could be instances where you might want to send an attachment along with confirmation email. Read on to find out how to add an attachment to the confirmation email of a submission in a Drupal Webform. Follow the steps below. We need the following modules for this to work. Drupal Mimemail module (Be sure to also enable Mime Mail Action) Drupal Rules module Drupal Webform Rules module We are going to use Rules to do this. Firstly you have to create a new rule for "After a webform has been submitted" Next use "Select a webform" as a condition and select your webform Now select the mimemail "Send an HTML mail to an arbitrary mail address" action If all this has been setup, you can use tokens to send the email to an address the user provides in the form. Add your attachments in your attachments box. Just make sure that if anonymous users are submitting the form they need the "send arbitrary files" permission or the attachment won't be sent. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. Do you need professional help in building your Drupal site? We can provide a wide range of Drupal services to help you deploy your Drupal site easily and quickly. Get in touch with us to know more. Reference: http://drupal.org/node/1729004 Drupal WebForm Drupal Issues Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 19 Jun 2019 - 12:56 I savour, lead to I found just what I used to be looking for. You've ended my 4 day long hunt! God Bless you man. Have a nice day. Bye Add new comment
more_horiz
close

on 17th October 2012 / by webmaster
Webforms are used to create HTML forms with ease, track submissions and send confirmation emails to users after submission in a Drupal website. Users are notified of successful confirmation via messages send out by the Drupal Webform module. If you webform is redirecting users towards a blank page then follow the instructions below to fix it. The most common cause of this problem is the presence of WYSIWYG editor enabled on your website as they have a habit of inserting empty p tags into text areas in a form. This can cause your results page to appear empty. Therefor disable your WYSIWYG editor within all instance of the specific webform including the body field, confirmation page, additional processing page, select list options page and finally the validation page. Hope that helps. The easiest way to solve a Drupal issue is to hand it to the Drupal experts. Do you need professional help in building your Drupal site? We can provide a wide range of Drupal services to help you deploy your Drupal site easily and quickly. Get in touch with us to know more. Reference: http://drupal.org/node/470006 Drupal WebForm Drupal Issues Leave a reply Your email address will not be published. Required fields are marker *
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.