Custom form on exported website

Hi!

I have created the website with a form in Webflow. Later I exported the website.
Event after I exported the website, form submissions still go throug the Webflow. I need the form submissions avoid Webflow and go straight to my email.

As I understood I need to set up the forms to point to my hosting provider’s mail script or mail service, outside of Webflow.

From my provider I received their own file to send emails from their servers.
That was the link: http://www.nebula.fi/cgi-bin/formmail.cgi

What should I do next?

Cheers,
Kirill

2 Likes

Hi Kirill, thanks for your post. Here is one approach:

Step 1: Create a form on your Webflow page that has two fields and submit button, the two fields being Name and Email.

Step 2: Drag an embed widget into the Form, I usually drag that above the submit button. Next, manually edit some hidden input field values, and then paste all of the lines below, into the embed widget:

<input type=hidden name="recipient" value="webmaster@yourcompany.com">
<input type=hidden name="subject" value="Web Design request from yoursite.com">
<input type=hidden name="redirect" value="http://www.yourdomain.com/formresponder.html">
<input type=hidden name="required" value="name,email">
<input type=hidden name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">
<input type=hidden name="sort" value="alphabetic">
<input type=hidden name="print_blank_fields" value="1">

The redirect hidden input field will direct the user to the url specified after the form is submitted successfuly to the formmail.cgi script.

Step 3: Select your form and go to the Form Settings (settings tab) in the designer. Update the Action property to the url of the formmail.cgi script: http://www.nebula.fi/cgi-bin/formmail.cgi. Set the Method of the form to be POST.

Save changes, republish your site or export your site and upload to your own server for testing. You can get instructions for using formmail.cgi from a lot of places on the internet. The main thing to remember in Webflow, is to add the hidden fields to the form using an Embed widget, setting the Action property to the formmail.cgi url, and setting the method in the Webflow form at design time to POST.

I hope this helps, try that out and see how it works for you. Here is one URL that I used to get the instructions on the Formmail.cgi hidden field setup:

http://www.multacom.com/faq/add-on_forms_and_programs/example_form_using_formmail.htm

Cheers, Dave

Hi Dave!

I just tried it out, but it didn’t work. Basically nothing changed.

Maybe something wrong with the embed corrections?

<input type=hidden name="recipient" value="myynti@koskenranta.net">
<input type=hidden name="subject" value=“Form Submission">
<input type=hidden name="redirect" value=“http://www.koskenranta.net/formresponder.html">
<input type=hidden name="required" value="name,email">
<input type=hidden name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">
<input type=hidden name="sort" value="alphabetic">
<input type=hidden name="print_blank_fields" value="1">

K

Hi @Kirill_Krysanov, You should check the browser console if there are any errors generated when you click submit the form, to see if the post operation was successful or not. Could you send a link to the published site, and we can see how the form is working on the site.

The Embed is just a container for the hidden input elements that get sent in the POST message to the formmail.cgi script that you have specified in the Action property. If there is an error with the submission, then you need to check the form handling script to see what the problem is, or use a different, easier to use mail script perhaps.

I would also ask the support team at nebula.fi, what kind of information the formmail.cgi is expecting to receive, in order for it to forward the emails to the addresses you want. They might have a setup instruction for that.

Cheers, Dave

Hi,

Here is the link: http://koskenranta.net/

Hi @Kirill, thanks for the published link, I sent a test message, and received the success message, but it looked like it was still coming from Webflow. I looked at the source on the form above the contact section, and I cannot see any hidden fields there, nor the Action property set to your formmail.cgi url, nor the method set to POST.

Could you check that you have uploaded your updated files to your test server? As a general rule, If this is the production site, I would recommend using a test server if you have it, one that also has the formmail.cgi script loaded and configured on the backend.

Cheers, Dave

Hi Dave,

I just double checked the index file I uploaded, it has all mentioned things… But when I inspect the element on the live website, I don’t see it…
And yes, it still comes from Webflow.

K

Now I really don’t understand what to do…

Hi @Kirill_Krysanov, I am sorry this is frustrating, I can understand, working with external mail providers is more difficult than using Webflow for the forms, because you have to develop or configure the mail script to do what you want it to do, you might need to contact a developer to help you with this.

I took another look at the published site again at koskenranta.net, and still no changes, the forms are still pointing at Webflow, not the formmail.cgi url you provided.

Could you share your read only link to your site, and I can check how you have the form setup prior to export in the design mode in Webflow.

More information about read-only links:

Learn web design with free video courses and tutorials | Webflow University

Cheers, Dave

1 Like

Thank you Dave for your patience.
Here is the link: https://preview.webflow.com/preview/koskenranta?preview=736ab81df7fa27d7ccba4c41bbbbf24d

K

Hi @Kirill_Krysanov, thanks for the followup. I looked at the site, and it seems that the form as the correct setting in design mode:

So once exported, these hidden input fields, the Action property and the POST should appear in the source html for koskenranta.net, but it does not:

I would check next, that after you export your files, that these are definitely uploaded to correct location on the test server.

You can also send me the exported zip file to support@webflow.com, so that I can verify from the exported files, that the form has been updated in the export :smile:

Cheers, Dave

Hi Dave!

I have been struggling, but still it is not working correctly.
It seems that everything works well when I try it on http://koskenranta.webflow.com/ but does not work on exported website. On the exported website the hidden fields are visible and “submit” button does not work.

K

Hi @Kirill_Krysanov, thanks for the update. I looked at the exported site, and for some reason, I could not see the edits yet… strange. Could you send me a copy of the exported zip file that you exported, to support@webflow.com and I can take a look further at the exported code? Cheers, Dave

Thanks for the exported files @Kirill_Krysanov, I am taking a look. One thing you might check on the server, is if PHP is running on the external server. It might be easier to do make the processor using PHP mail function instead of formmail. I will get back to you as soon as I have some additional info. Thanks for your patience. Cheers, Dave

Thanks Dave, I will be waiting!
Also I have sent the question regarding the PHP.

Could we maybe try out the PHP way?

K

Hi @Kirill_Krysanov, we can try that, but first I am checking with the formmail method, because nebula.fi has some instructions on their support page about it. I have already found several things that need to be changed, and I am preparing some info for you now about this. I get back with your soon. Cheers, Dave

Thank you a lot Dave for your support!

Few more questions:

  1. When the form was connected to the Webflow, there was a success message after you submit the form. Now it redirects you to the formresponder.html. Is it possible that now the formresponder.html is the same success message?

  2. How to make the following - when the receiver receives the form submission:

  • the “sender” is the email of the sender
  • the title of the email is the selected item from “asia” (any other) dropdown?

Hi @Kirill_Krysanov, sure no problem. I wanted to make a quick summary of the issues I found, so that you can check this yourself in the future :smile: There are few things to be aware of when using your own formmail.cgi script on your own server:

A. Make sure the hidden fields in the exported html do not have any spaces, and that the exported hidden input fields have this exact format:

<input type="hidden" name="recipient" value="enter recipient email address">
<input type="hidden" name="subject" value="Form submission">
<input type="hidden" name="redirect" value="http://www.yourdomain.com/successpage.html">
<input type="hidden" name="required" value="name,email">
<input type="hidden" name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">
<input type="hidden" name="sort" value="alphabetic">

For some reason, the exported site code for these hidden form fields, had extra spaces and the Action Property field had extra quotes, causing some issues. When entering the url in the Action field, do not paste in the quotes into that field, just the url. I think the issue was some copy and paste thing.

My screenshot below, shows the extra spacing and formatting on those input hidden fields, that needed to be corrected:

B. Anytime formmail.cgi is used, it is likely the hosting provider has some restriction, that the recipient email must be using an email from the same domain. It is possible to modify the formmail.pl script on the server side, by adding the @referers information, allowing the formmail.cgi to send notifications to emails not in the same domain. If you need to do this, then you probably have to contact your hosting provider and get their assistance. Here is some additional information on the @referers :smile:

http://support.lexiconn.com/kb/questions/71/formmail.cgi+Gives+Me+An+Error+(Bad{47}No+Recipient)

C. The redirect in the hidden field, should be pointed to a URL to be used as the success page after a form is submitted. So create a page on your site that will be used after export and put the url to that page in the value property:

 <input type="hidden" name="redirect" value="http://www.yourdomain.com/successpage.html">

D. When using external forms processors, the success and failure messages are disabled. You might be able to code something yourself for this, but it is outside the scope of the support we provide (we do not provide support for custom code).

E. You may be able to make the sender of the email the sender of the form, but you would have to modify or create a configuration for this using some custom perl script, but this too is outside the scope of our support. You can always paste a support topic for that in the forum, if there are some perl script guru’s out there. I would also contact your hosting provider, because all mail sending is handled by their server, their hosting.

F. I am not sure what you mean by "the title of the email is the selected item from “Asia”. I guess the formmail script is taking that value and setting it as the title of the email. Again, this is something that if you needed to configure, you will probably have to get some help from the hosting provider, explain the situation, give them your page url and ask if they can help you to change the way the formmail.cgi script is configured to run

I hope this helps, cheers, Dave

1 Like

Thank you Dave, I am managing with everything :slight_smile:

Though, I have noticed that after I installed your “index.htm”, the “yhteystiedot” link in the main upper menu stopped working for some reason, the webpage is not scrolling down… What it could be?
Here is the link to the exported website: www.koskenranta.net

Thanks!