Feedback script for landing page. A form for sending a letter without reloading the landing page. Calling a form in a modal window

There are special blocks containing the application form. Such blocks are located in the “Form Lead” group in the left side column. When you submit the form, the completion of the target action on the landing page is registered.

You can customize the form to suit your needs.

You can change the text on the button on the form, and you can also customize the URL that the user will be redirected to after submitting the form.

You can customize data entry fields.

To do this, hover your mouse over the field and click “Customize Field” in the menu that appears.

In the pop-up window that appears, you can configure the "name" parameter (the name of the field in the form). Only Latin characters can be entered.

You can also configure the placeholder parameter. This is the title that appears on a field when it is not active and does not contain user input. For example, to enter an e-mail, you should write “Enter your e-mail.”

The application sent through the form will be sent to your email, through which you log in to the service.

You can set a different e-mail. To do this, specify the required e-mail in the general settings of the landing page.

You can integrate the landing page with any external service, for example, a third-party CRM system.

To do this, in the general settings of the landing page, in the “Send form from landing page via URL” field, set the desired URL. And also indicate which method the data should be sent: GET or POST.

In this case, in addition to sending data from the form to e-mail, it will also be sent to the specified URL using the specified method.

How to create a successful online platform for business promotion? What is the secret and principles of its formation? These and other questions concern those who have decided to acquire a personal landing page on the world wide web and are expecting a flow of buyers for their product. So, let's look at the details.

Secrets of creating a landing page form

Probably, hardly anyone will argue with the statement that the most important element of a landing page is a web form for accepting orders. In fact, this is precisely why the landing page is created. The creation of an order form for a landing page is carried out by professionals who know exactly the secret of developing an interesting and at the same time quite simple option.

A well-designed landing page form should be understandable to the most ordinary user who opens the page. If there are too many fields in the window that opens, this will simply scare off a potential buyer and he will go to competitors. So developing a high-quality order form for a landing page is a task no less important than the company’s main page. In order to achieve success, that is, high conversion, you just need to follow a few simple rules.

Requirements for creating an ideal order form for a landing page

The landing page must be ready to receive buyers. To do this, several fundamental factors must be taken into account.

Conciseness. The web form should allow you to place an order, and not collect a lot of unnecessary information about the client. That is, it should not contain more than 3-5 lines; if you add more items, you risk loading the page with unimportant lines, which will make it difficult for the user to quickly complete a purchase.

Readability. A proper landing page application form should be visible and easy to read. There is no need to saturate the page with a large number of columns. The best option is if the user gradually moves on to filling out the next piece of information about himself. And, of course, you need to think about the design of the form so that it looks pleasing to the eye.

Data saving function. Quite often, consumers' internet connection leaves much to be desired. To prevent communication interruptions from leading to the loss of data already entered into the columns, it is worth thinking about the autosave function. This will help the user save time after the connection is restored, and not enter their data again.

Proven concepts. The landing page form is not the place where you need to be original. There are principles that are time-tested and bring results. Any mistake by a programmer or designer can cost thousands of lost customers.

These seemingly well-known postulates are very important and to neglect them is tantamount to dooming yourself to failure. This all leads to the loss of customers and their money. After realizing the importance of an order form for a landing page, it’s time to ask another question: how and where can you create it?

Example of an order form for a landing page

Where to make a landing page application form?

Unless you have sufficient knowledge and skills, and these are in the minority, it is unlikely that you will have a working form for a landing page that will flawlessly perform its functions. Some people search for source codes publicly available on the Internet, although this method can cause much more problems than benefits. Firstly, it is unknown how the form will work, testing will take a lot of time, and this does not guarantee 100% performance. Emails from the form may end up in spam, may not be sent at all, or may arrive in an incomprehensible encoding. As a result, it turns out that some orders were lost, or another failure occurred, and all this is unlikely to have a beneficial effect on the seller’s image. Secondly, what should you do if you need to make some changes? Delve into the code yourself or invite a specialist, whose services can also cost a pretty penny.

The second option is to involve a freelancer in this task. But this way of solving the problem is not without pitfalls. Top freelancers, of course, can create the perfect capture form for a landing page, but where can you find one? The search may take a long time. You can, of course, try competitive selection, but it will take all the time and money. Again, the issue of making changes to the form remains relevant. It’s good if the coordinates of the form’s author are preserved, but what if not? And even then, if the connection is maintained, he may simply be busy with other orders and will not be able to help you. And other freelancers are not always ready to correct the work of other fellow workers.

The most effective solution to this problem is the online web form designer Formdesigner. This service does not require any special skills and has a clear interface. The built-in form designer will help you create the perfect capture form that fits neatly into your website. Protection in the form of a password, HTTPS protocol, and Captcha has also been thought out. Online payments are accessible and easy, allowing you to receive money in minutes. Unique scenarios are created using dynamic forms.

Principle of operation

The constructor appeared in 2013 and has already won the trust of beginners and professional webmasters. It allows website owners in a matter of minutes to create an application form, feedback form, subscription form, order form and many others that fit perfectly into the interface of any site. No special skills or knowledge are needed; the landing page capture form, thanks to the Formdesigner service, will be ready within 5 minutes. In addition, if you need to change something, you just need to visit the site again and make the necessary changes. In addition, all this can be done completely free of charge, which is also important.

Speaking about the main advantages of the Formdesigner web form designer, we can note:

• The constructor works online in real time;
• The entire process of creating a web form is transparent and happens before your eyes;
• All data from the form is stored on the server and is available 24 hours a day;
• The ability to upload files and use custom CSS allows you to create a unique web form for your landing page.

The designer is easy and simple. You can create the web form you need in just a few clicks. To add a new element, just click on it or drag it to the planned location, and it will immediately be added to the web form. You can also easily edit an element by simply clicking on it in the form and making changes to its properties in the window that opens.

It’s just as easy to customize the appearance, set validation rules and other necessary changes, which are immediately displayed in the demo form, without reloading the page. After finishing the work, all that remains is to copy the finished code. You will need to embed it on your website. Next will be the acceptance of long-awaited applications. When using this constructor, all loaded forms are instantly displayed, and no tedious page reloads are required.

You can create a website from scratch and adjust the existing one. With a great assistant in the world of web content creation, you won't have to wait long for clients.

Hello friends! I would like to present to your attention a universal script for sending data from forms to email. The script is ideal for sites like Landing Page, business card sites, etc. Our Feedback Forms script stands out among the mass of other scripts on the Internet in that it has the ability to connect an unlimited number of forms with different fields on one page and is able to send letters to several recipients.

So. Let's get started. Let's start with the script's capabilities.

Connect an unlimited number of forms on one page.

Checking that the fields are filled in correctly.

Setting up notifications.

Ability to use letters for each form.

Letter type - (if html tags are used)

Sending to an unlimited number of addresses.

Individual customization of each form.

The script runs on , without reloading the page.

Protection against spam bots.

Initial setup.
The script works based on the library, so the first thing we need to do is connect it. To do this, I recommend using Google Hosted Libraries.

Let's talk about the remaining files in more detail:

feedback.js is the main script file, responsible for AJAX form submission.
jquery.arcticmodal.js,
jquery.arcticmodal. - provide the ability to display forms in a modal window.
jquery.jgrowl.js,
jquery.jgrowl.css - allow you to display notifications on the page (blocks in the upper corner of the page).

HTML and required attributes.
A required attribute for all form elements is the name="" attribute - necessary for subsequent form customization.
For a button (type="button") you must specify class="feedback" . I would also like to draw your attention to the fact that any HTML tag with the “feedback” class can act as a button. Calling a form in a modal window To call a form in a modal window, you first need to define an action for clicking on any tag, for example a div with the modal_btn class
Calling a form in a modal window $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal(); )); ));
Since the form should be visible only in the modal window, it needs to be hidden by placing it in a div with the style="display: none;" attribute, and also wrapped in a couple of standard divs to style the modal window.
x

So we have figured out the basic settings for connecting our script for sending forms to E-mail. Let's now take a look inside and figure out how to configure fields, notifications and everything else that is there.

Example of settings for one formSettings for all forms are stored in the file feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Field [ %1$s ] may contain an error", "minlength" => "Minimum field length [ %1$s ] is less than allowed - %2$s", "maxlength" => "Maximum field length [ %1$s ] is greater than allowed - %2$s",)), "tell " => array("title" => "Phone", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "messages" => array("preg" => "Field [ %1$s ] may contain an error", "minlength" => "The minimum length of field [ %1$s ] is less than the allowed length - %2$s",)),), "cfg" => array(" charset" => "utf-8", "subject" => "Subject of the email", "title" => "Heading in the body of the email", "ajax" => true, "validate" => true, "from_email" = > " [email protected]", "from_name" => "noreply", "to_email" => " [email protected], [email protected]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Message sent - OK", "fuck" => "Message sent - ERROR", "spam" => "Spam robot", "notify" => "color-modal-textbox", "usepresuf" => false)); // Next form $form["form-2"] = array("fields" => array(.....
To add settings for a new form, you need to follow the example of the $form["form-1"] array to create a new array $form[""]

Remember what I said about the required name="" attribute?

A required attribute for all form elements is the name="" attribute - necessary for subsequent form customization.
So the time has come to tell you why it is still needed.
name="" is the alphanumeric key for the array, must be unique for the $form[""] array

Example html code for clarity

Now let's understand arrays and what they are needed for.

$form["form-1"] = array();
$form["form-2"] = array(); etc.
These are the main arrays for each new form, containing:

"fields" => array(); - An array of settings for form elements.

• "name" => array(); - An array of form element settings (for example input name="name" type="text") which has a number of settings.
  • "title" => "Your name" - the name of the form element, will be displayed in case of errors or in the template
  • "validate" => array(); - array, contains form element validation rules
    • "preg" => "%%" - regular expression
    • "minlength" => "3" - minimum field size
    • "maxlength" => "35" - maximum field size
    • "substr" => "35" - always cut to N characters
  • "messages" => array(); - an array containing validation messages, namely:
    • "preg" => "The form element does not match the regular expression"
    • "minlength" => "The minimum length of the field [ %1$s ] is less than acceptable - %2$s" - validation error, key (preg) does not match the validation key
    • "maxlength" => "The maximum length of the field [ %1$s ] exceeds the permissible limit - %2$s" - validation error, key (preg) does not match the validation key

"cfg" => array(); - An array of form settings.

• "charset" => "utf-8" - encoding
• "subject" => "Subject of the letter", - Subject of the letter
• "title" => "Title in the body of the letter", - Title in the body of the letter
• "ajax" => true, - this is the Ajax TODO form (if not needed, set it to false)
• "validate" => true, - (true) if we want to validate the form on the server, replaces js validation with "ajax" => true. When off (false), you don’t have to set the validate field settings. TODO
• "from_email" => "myemail", - sender, specify the field name (name = "myemail"), and if you do not need an email from the user, then a stub [email protected]
• "from_name" => "myname", - sender, specify the field name (name="myname"), and if you do not need a username, then the No-reply stub
• "to_email" => " [email protected]", - recipient's email. To send to several addresses, list them separated by commas. Example ("to_email" => " [email protected], [email protected], [email protected]",)
• "to_name" => "noreply1", - Recipient name. When sending to multiple addresses, list the names of recipients, separated by commas. Example ("to_name" => "noreply1, noreply2, noreply3",)
• "geoip" => true, - find out location using TODO type
• "referer" => false, - add the URL of the page from which the form was submitted
• "type" => "plain", - letter type - plain, html (if html tags are used)
• "tpl" => false, - use a letter template. If true, then the template file will be connected in accordance with the form name (name="form-1") from the folder and the file (feedback/tpl/form-1.tpl) will be processed, otherwise everything will be sent as is, each field on a new line
• "antispam" => "email77", - Anti spam, the method is based on a hidden (display:none) field, which only the robot automatically fills in, thereby giving itself away.
• "antispamjs" => "address77", - Anti spam method is based on a hidden (display:none) field, initially filled, which automatically clears javascript when the page is loaded, even a smart robot cannot anticipate this, and then it is blocked.
• "okay" => "Message to the user", - A message to the user is displayed if the form is successfully submitted, you can use html tags.
• "fuck" => "Message to the user", - A message to the user, displayed when an error occurs when submitting the form, you can use html tags.
• "spam" => "Message to user", - Message to the user, displayed if a spam robot is suspected, you can use html tags.
• "notify" => "color-modal", - what type of notifications to show, textbox - blocks in the upper corner of the page, color - color highlighting in the form, modal - modal window in the center of the page, none - disable. You can combine, example: color-modal - errors in filling fields with highlighting, and text sending status in the TODO modal window
• "usepresuf" => false - Whether a custom addition is used to the subject or to the title of the letter, in case of a small change you can specify for example %%cfg.title.suffix%%, for this there must be a hidden field in the form, for more details, see f -qiu presuf()

Setting up letter templates So. Let's now look at the topic of our messages.
Firstly, in order for the form to be sent in a template, in the form settings you need to enable the use of a template file - "tpl" => true ,
Secondly, you need to create a template file with a *.tpl extension in the folder (feedback/tpl/), in accordance with the name of the form (name="form-1" ).

Example: (feedback/tpl/form-1.tpl)

Heading in the body of the letter
%%name.title%%	%%name.value%%
%%tell.title%%	%%tell.value%%

name, tell, etc. - These are the attributes (name="") of the fields that the user fills in.
title - The name of the form element, which is set in the form element settings array.
value - The value of the form element.

That's all for today, but the script is certainly not perfect, so comments and descriptions of bugs are welcome and will be corrected in future versions.

P.S. The script was developed by the team

You need to understand that you will need to pay for such jewelry work, but the payment is worth it. It is necessary to discuss all issues related to creation; this will affect the cost of the work and the landing page as a whole. When creating, you need to take into account all the possible little things that can attract people’s attention: from beauty to ease of use. In addition, we must not forget about psychology and the subconscious. Many decisions are made subconsciously. And purchasing a product is no exception. If you build the right logical chain, which will contain a solution to a person’s problem, a description of this solution, the belief that this solution is correct and will help him, concentration on this goal, a push to action and the action itself, then you will be able to turn most of the visitors into customers. Moreover, it does not matter what the target action of the page will be - sale, subscription to the newsletter, acquisition of visitor contact information, and so on.

Special attention should be paid to the client feedback form. Since this is communication with the client, even if not direct. Communication with the client is extremely important, since the website alone will not be able to fully satisfy the client’s needs. It can only handle standard requests, of which there are very few, since people rarely choose a standard approach to solving a problem. By contacting the client through feedback, you can increase not only the turnover of sales/transactions/subscriptions, but also the reputation of the company.

Because personal communication and customer satisfaction is very important for developing a good reputation. Special attention has always been paid to the creation of such a form. Using a template on which feedback is installed greatly limits the functionality of the page, therefore this form has always been entered into the main code manually in compliance with all SEO requirements. This form also has a special approach: it should be located in a visible place, it should be intuitive and easy to use, it should not ask the client for a lot of unnecessary information, just an email and name. The location influences the category of people who are accustomed to quickly searching for the necessary information and using it. For some, a couple of seconds of being on a page is enough to assess whether they will use its services or not. Therefore, the location should be such that even such users have time to become interested in the offer and leave contacts.

It is very important that the page is easy to understand, because not all Internet users are experienced in this matter. To reach an audience with and without experience, it is necessary to have an intuitive understanding of the sequence of actions to complete the operation. And no less important is the amount of information. This affects the subconscious level of trust. If the page asks for a lot of contacts: phone number, email, card number, address, and so on. You may get the feeling that this page was made by scammers. And this is a strong blow to the gut’s reputation of the site as a whole. Therefore, you need to ask for exactly as much information as will be sufficient to communicate with the client and clarify his wishes and fulfill the terms of the transaction. The landing page as a whole is a simple site created in a complex way. It is simple for users, but difficult for developers to create. However, such work is worth the effort!