654 comments found.
How do I add extra tabs/steps in multi-step forms?
Hi Stanley
Please look closely at the div that has a form body class (form-body), there you can add the number of steps up-to 6 steps depending on your steps
The steps number classes are (.stp-six .stp-five .stp-four .stp-three .stp-two)
So your form body will look like this if you have five steps (class=”form-body stp-five”)
Oh by the way there’s also setting the option to have the tabs vertical instead of horizontal that way you can fit more tabs
Regards
I have followed your instruction and added class=form-body stp-five but it still did not show the step number five, it only show blank
Thanks
You have to add the step content wrap it inside a fieldset and make set the select tab text with an h2 tag
The multistep is not validating after doing the following
I added jQuery(document).ready(function($){ $(’#smart-form’).validate();
/* Form Steps
----------------------------- */
$("#smart-form").steps({
headerTag: "h2",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
autoFocus: true,
labels: {
finish: "Submit Form",
next: "Continue",
previous: "Go Back",
loading: "Loading..."
}
});
</script>
Then I changed class=”gui-input” to class=”gui-input required”
Secondly the <body class=”woodbg”> the form change my entire site to woodbackgroup..How will I make my site regain it original color?
Lastly..after form is submited there should be a thank you page but the form is just static.
Please send me an email i will look at your issues – they are all solvable don’t worry
1 – I believe you are configuring it wrongly
2 – Dont include inline validation classes you can use a data attribute instead
3 – remove wood bg from your form actually use your template body instead of the form body
4 – There a redirect option with a url option the settings file so you can redirect to a thankyou page after sending successfully
I have send you a message through support contact form but I saw this on envato”This author provides limited support for this item through email contact form” I think I will sending my support request through here.
1. The Multi step form validation is still not working 2. php/formprocess.php to submit form to email dosent exist despite your item description that it comes with submission script. 3. is there a demo for “Thank You” modal pop up after a multi step form is submitted? 4. How can increase the height of the form.
All these are going to be addressed just send me an email with the details / include a link to your form or server FTP details
I have sent you a message via your support form and no response. What is your email?
Seen
I have responded to your email.
OK Let me work on it
Okay. I have responded to your email. I want validation on all the fields.
Still waiting for your response.
Am working actually finalizing the form processing script will configure everything once am done
The muti step form get messed up each time I try to validdate it by adding this $( ”#smart-form” ).validate({
}, // end rules at the header.
after adding this to <script type=”text/javascript” src=”js/jquery.validate.min.js”></script> <script type=”text/javascript” src=”js/additional-methods.min.js”></script> The integration isnt working either. it messes up my entire site. Is these forms really working? and having static form isn’t a way to go either. Do you have a refund policy.
You are doing it wrongly like i pointed out – send me an email i will help you sort it out. And yes i do have a refund policy, Envato does
Hi, is there a possibility to add a popup like a “do you really want to delete… ” – before submitting the form? Thanks in advance!
You can do that in the Ajax submit handler (beforeSubit)... you can call a pop up there and do any manipulations
Thx for the fast reply! Do you have a small example for that?
Not currently but let me work on one tonight i share it with you – if you don’t mind you can send me an email we share it over email?
i have sent you my email via the support – request… thx!
OK
In the latest version the check boxes checks and radio buttons dots are quite badly off centre (Chrome and IE). This can be seen on: http://doptiq.com/smartforms/v4/demos/templates/flat/ui.html
Let me check it out could be a problem with my laptop
will captcha work in mvc or thare i need to use php
The CAPTCHA is done in PHP so it will require php to work. The alternative is using Google reCAPTCHA i included a Working Demo of Google reCAPTCHA though it also uses a PHP library so you may have to look at available MVC integrations.
Actually all the server side integrations with these forms are done in PHP like i said i am more familiar with PHP so if you need something to jump start a project without much server side coding this may not help its more tailored to PHP users and for those who use other languages they just use it as a framework for building forms quickly and then do much of the coding without worrying about design
will it work with mvc c# or i have to use php
Hello vanshikasof,
Thanks for your interest
These are form just components built with CSS HTML5 JQUERY you can choose to use whatever language you are comfortable with. I used php because thats what i am most familiar with but you can use a language of your choice.
You notice this product is in the JavaScript category not PHP reason being the focus is less on PHP but more on the form components – the PHP comes in because clients always request for server processing requirements hence i added working forms for a quick start
Greetings
do you have the google recaptcha included in the program?
Yes it is, there is a working example for the integration, its simple if you need help just let me know
Please note that you have to download the latest version 4 you will find a recaptcha example with full remote validation
Here is a working demo link – http://doptiq.com/smartforms/v4/demos/working/elegant/recaptcha/
Check that demo
Hi, now the multiple upload works fine.
In the old version I had several group fileds with radio buttons like this:
<label class=”field option”> <input type=”radio” name=”material” id=”acryl” value=”Acryl”> Acryl </label> <label class=”field option”> <input type=”radio” name=”material” id=”stahlemaille” value=”Stahlemaille”> Stahlemaille </label> <label class=”field option”> <input type=”radio” name=”material” id=”guss” value=”Guss”> Guss </label>I could integrate the result in the smartmessage.php without any problem. The problem now is that I have no idea how to integrate it in the smartform.js
this.on(“sending”, function(file, xhr, formData) { formData.append(“sendername”, jQuery(”#sendername”).val()); formData.append(“emailaddress”, jQuery(”#emailaddress”).val()); formData.append(“sendersubject”, jQuery(”#sendersubject”).val()); formData.append(“sendermessage”, jQuery(”#sendermessage”).val()); formData.append(“captcha”, jQuery(”#captcha”).val()); swapButton(); });
If I add for example: formData.append(“sendersubject”, jQuery(”#stahlemaille”).val());
I get the value I gave in the input type. I have no idea how to get the value of name=”material” only for the checked radio button.
Please help.
Thanks for your answer in advance.
sorry I meant: If I add for example: formData.append(“material”, jQuery(”#stahlemaille”).val());
formData.append("material", jQuery("#guss").val());
Sorry, this is not working.
For material I have three options: acryl, stahlemaille, guss.
If I do your try, I get for var_dump($_POST);
array(15) { [“sendername”]=> string(
“testname” [“emailaddress”]=> string(11) “mail@ddd.de” [“sendersubject”]=> string(9) “hhhhhhhhh” [“sendermessage”]=> string(11) “messagejjjj” [“telephone”]=> string(7) “telefon” [“strasse”]=> string(6) “street” [“ort”]=> string(7) “Ortcity” [“wanne”]=> string(9) “Badewanne” [“material”]=> string(4) “Guss” [“revision”]=> string(9) “undefined” [“rauestelle”]=> string(9) “undefined” [“spritzschutz”]=> string(9) “undefined” [“silikonfuge”]=> string(9) “undefined” [“rutsch”]=> string(9) “undefined” [“captcha”]=> string(6) “45DVBH” }
But I did check “acryl”. I did not check “guss”
I have no idea how to get the value of name=”material” only for the checked radio button.
Can you send me your form or FTP details in the email? I can take it from there.. Here we can keep the less technical discussions
I will surely assist
Thanks
Yesterday I was googeling many hours and I found the solution, just short before I wanted to give up. Sorry that I forgott to write it here yesterday.The solution for getting the checked option is in smart-forms.js: formData.append(“material”, jQuery(“[name=material]:checked”).val());
Sometimes it is very difficult to explain the problem and also it is not so easy to understand what was meant. I am shure if you see the solution you now know what I meant and shure you would find the solution.
Thank you very much
-:) You know i feel bad i mused over it the other night
Hello, I figured out how to create a huge form with google recaptcha. With this template: smartforms v4\flat\AJAX PHP\SMTP version\contact-dropzone Can anyone please tell me how to disable the requirement of dropzone to submit the form? Just want dropzone to be an option, not a requirement.
Hello Echo47
Inside the js folder for the working dropzone look for smart-form.js i set it up to check if the dropzone is empty and it echos an error but you can remove that here by removing this whole code below
if (myDropzone.files.length == 0){
$("#myDropzone").addClass('dz-attachment-n').removeClass('dz-attachment-y');
errorMsgs = dzNoAttachment;
$("#myDropzone").after(dzErrorMsg);
dzErrorMsg.find('p').html(errorMsgs);
}
This should process the form without any errors – Thanks
Thanks for getting back to me. That removed the DZ requirement, but it will not let me submit the form now. Any ideas?
Here is the smart-form.js code: https://pastebin.com/UTf9m1G8 please look to see if the recaptcha is set correctly. Seems to be working fine, but I was unsure on a few things. Thank you.
The recaptcha is correct only i did not see the is the html and php implementation… Just the recaptcha parts only so you need a secret key and a public key from google then you are good to go the rest of the code is included in the working example…
By the way Chris am fixing your form it had some markup issues as well as programming.. i had to first correct the HTML it was a little broken . Am finalizing it tonight don’t be worried
Hey Elflaire, Any update on the first form? Also any idea why I can’t send the 2nd form I created with the he DropZone requirement disabled? The 2nd form code is the pastebin link above. Thanks.
Updated check your url your old form i moved it into the folder oldie
Please note that i have just added validation to few elements you can let me know whats missing… I tested it it works without SMTP so its good to go.. Google reCaptcha works as well
Thanks
Thank you very much. I appreciate your help. 5 stars for customer support. Thanks again!
Thanks Chris… About validation let me know how i can help
Hey Elflaire, regarding the Dropzone issue, I removed the code you suggested and the form will still not send unless I add an image into DropZone.
Here is my code block:
smartSubmitButton.on('click', function (e) {
e.preventDefault();
e.stopPropagation();
/* if (myDropzone.files.length == 0){
$("#myDropzone").addClass('dz-attachment-n').removeClass('dz-attachment-y');
errorMsgs = dzNoAttachment;
$("#myDropzone").after(dzErrorMsg);
dzErrorMsg.find('p').html(errorMsgs);
}
*/
if (smartForm.valid()) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
}
else {
smartForm.ajaxSubmit(smartFormOptions);
}
}
});
You can see where I removed the code you suggested. Do you know how else I might be able to get this to work?
OK let me do a demo that works i will send it over
My attachments are coming into my email account like this. They are not attached to my email. PLEASE HELP
Also how can I send the form with the image fields being empty?
Attached Images Upload Image 1: 596d0a42aea0bScreen Shot 2017-07-03 at 11.28.43 AM.png Upload Image 2: 596d0a42aea4fShowStory.jpg Upload Image 3: 596d0a42aea8fcs3fur.jpg
$files1 = uniqid();
$fileupload1 = $files1.$_FILES['files1']['name'];
$files2 = uniqid();
$fileupload2 = $files2.$_FILES['files2']['name'];
$files3 = uniqid();
$fileupload3 = $files3.$_FILES['files3']['name'];
//validate file uploads DID THIS FOR ALL 3 FILE UPLOADS
if(isset($_FILES['files1'])) {
// maximum file size :: 2MB
$maxsize = 2097152;
// File must be attached
if (empty($_FILES['files1']['name'])) {
$errors[] = "You must browse or attach a file.";
}
// File size must be 2MB or less
if ($_FILES['files1']['size'] > $maxsize) {
$errors[] = "File uploaded is too large. Try 2MB or less.";
}
// Detect allowed file extentions
$valid_file_extensions = array(".jpg", ".jpeg", ".JPEG", ".JPG", ".png");
$file_extension = strrchr($_FILES["files1"]["name"], ".");
// Check that the uploaded file is actually an image
if (!in_array($file_extension, $valid_file_extensions)) {
$errors[] = "Please upload a jpg or png image file.";
}
}
// MADE A direct path to the upload folder.
$mail->AddAttachment('http://form.****com/quote/smuploads/'.$fileupload1);
$mail->AddAttachment('http://form.****.com/quote/smuploads/'.$fileupload2);
$mail->AddAttachment('http://form.****.com/quote/smuploads/'.$fileupload3);
HI Echo47,
Please email me your form i sort this one out for you, seems you have code mixed up
Thanks
Just emailed you the FTP info.
Received
Hi, if it is possible to embed this form on magento websites?
and also if upload image works on android and iphone? moreover it does not give any indication (gif or text message say” your form is being submit”) that form is being submit .. so that user know its processing form. Thanks
HI RahulD,
Which upload are you talking about?
the progress bar is under thumbnails for each upload also modern mobile browsers should be supported (Android 4.2, IOS 8.0) please test it out
Oh about Magento i have never installed on it but i have done so on WordPress and it works fine despite not being a WordPress plugin
Can these forms connect to a payment gateway?
Currently there’s no payment gateway option but it can be integrated – which gateway do you use Paypal / Stripe?
Hi, is the http://doptiq.com/smartforms/v4/demos/working/elegant/dropzone/ as a working demo included? I mean that I just copy the files, change the settings and it is working? Thanks for your answer in advance
Yes its included sir
Thanks
All the PHP and JS is configured
Hi, I purchased the new version. I tested your demo for dropzone. I only changed the settings.php for my receiver_email. I attached to files. I get this email:
“NEW MESSAGE DETAILS
Received from: testname
Email: testemail@adress.de
Message subject: testsubject
Attachments: 596cc93bf2ed3-aaaa0007.jpg 596cc93bf2ed3-aaaa0005.jpg
Sender message below:
testmessage
POWERED BY: Smart Forms “
But the Files are not attached? They are uploaded on the server. And they are not deleted. (This is not the problem) But I need the Fiels be attached in the email.
Any idea?
Thanks in advance
Please check your email they are always below the message which email client are you using?
Sorry they are not attached. email client is not the problem. It is outlook or thunderbird. The demo is on the same webspace(in an other folder), where the old version is running. The old version is working with 1 file attached correctly. Yesterday I tried demo “flat”, now I tried demo “elegant” with the same result.
Hi,
Now I know what is going wrong!
The images AAAA0007.jpg and AAAA0005.jpg is written with capitals. Your program changes it to lower case.
If I change on my PC the images to aaaa0005.jpg and aaaa0007.jpg then it is working fine and I receive the images attached.
But I can not use this for my customer. They just uplooad the file like it is.
So you make an update and correct the problem?
Thanks in advance
Hello Piobodo
Thanks for your patience
Inside the smartprocess.php look for these two lines of code below
$file_new_name = strtolower($fileOrigName);
$file_new_list = $file_unique_id.'-'.$file_new_name;
Change it to this
$file_new_name = $fileOrigName;
$file_new_list = $file_new_name;
This should fix your issue – Thanks
Please note that those two lines follow each other, they do rename the files for better security in case someone uploads wrong files and they want to execute them on the server – what we do is we totally rename the files
Hi, thank you.
I understand, why you rename the file. But if you rename the file you should find it. You rename it to lower case. And why you can not attach the file with lower case? I am not a programmer, but in my opinion you try to attach the file with capital letters?
Now I am tryng your code. It is O.K. if I only change this line: $file_new_name = strtolower($fileOrigName);
to: $file_new_name = $fileOrigName;
So the file is attached and renamed and found.
Thank you very much.
OK
Hi there, any chance you could include a working clone / php combo ?Although you did a great job on the doc files, I can get the cloning to work but for the life of me can’t figure out how to have the lists send via email. Cheers!
Hello agentur7403,
For inputs usually you handle them as you would handle a normal array with PHP, i included examples of handling arrays with the select multiple and checkbox groups the only given is that you add square brackets on the name attribute of the input to be cloned the rest is normal stuff
Let me know if this clarifies something – i will do a demo ASAP
Thanks
Unfortunately not
I have a select field, a text field and a checkbox within a clone widget, seems to work fine until i want to send the form.
I basically did this from the doc:
<input type="text" name="users[]" id="users" class="gui-input" placeholder="Add new user">
but dont know where to exactly put this:
$users = $_POST['users'];
foreach($users as $value){
$users_list = implode( '
', $users);
}
and that: "You can then ECHO $users_list to POST all the values"
I’m pretty sure its not that hard. A demo would be great. thx for your reply
OK let me work on a demo
Hello
HTML
Using our sample field
<input type="text" name="users[]" id="users" class="gui-input" placeholder="Add new user">
PHP
Put these lines below into the php file – smartprocess.php
$users = $_POST["users"];
if ($users[0]!=""){
$users_list = implode( '<br />', $users);
}
Put these lines below into the php file – smartmessage.php (located inside php look for the templates folder)
<p><span style="font-weight:bold;font-size:16px">Users:</span> '.$users_list.'</p>
The review form located inside AJAX PHP folder has a similar example with checkboxes just use it to see where similar codes re placed exacly
Regards
Hi there,
thank you a lot! got that working now. I tried to clone conditionals. Nothing fancy just a select box that makes a switch or another select box appear depending on the content. It didnt work for me and in an answer in the comments to somebody else you suggested using vanilla js couldnt figure that out. Is there a way to do this with the clone plugin now or should i try something else? Thank you!
can i use it with updated bootstrap templates ??
Hello Contemplativeradicals
Yes it should be fully compatible – i tested it with Bootstrap version 3.3.7 which is the latest version i guess and i noticed no conflicts.
By the way i tested on Smart Forms version 4 which i am releasing this week with new features hopefully it will be approved before the week ends
Thanks
it’s possible to have multi conditions in a form ? if yes, have you an example please ?
Hi, with this purchase will I be able to implement on my existing web pages without problems? What is this, code templates?
Yes am assuming you are using PHP Templates do not have any PHP code, i will help where you find challenges
how to make conditionnal form please ?
What do you mean by conditional form can you explain further?
i don’t have form conditionnal like in demo