How to create web form with survey?
In InSend, you can create web forms with small polls (for example, two select buttons or a dropdown list). Such web forms can be useful to:
- Find out how the person found out about the store
- Specify the categories of goods that interest him
- Find out additional information (for example, if the person has a cat, dog, or parrot)
In this article, we will analyze how to make such a web form.
Create a property where data from your web form will be written.
You can read more about creating a property here. This field is needed so that later you can build segments based on the data from the web form. Let's assume that we have created a 'pain' text field.
Create a web form.
Let's take a pop-up web form as an example. Select one of the templates and go to the 'Content"'tab.
Adding a field to the web form and making a drop-down list.
By default, there is no drop-down list field in InSend, but you can create one using html code. To do this, select the 'Your code' block in the left panel and drag it to the web form's place where the drop-down list box should be.
- In the 'HTML code' field on the right, paste the code:
<style>
.cnv-widget_workarea .cnv-f__select {
width: 316px;
height: 45px;
border-radius: 6px;
border-style: solid;
border-width: 1px;
border-color: #dadee3;
text-align: left;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
align-items: center;
text-align: left;
color: #9A9A9A;
}
@media screen and (max-width: 705px){
.cnv-widget_workarea .cnv-f__select {
width: 236px;
height: 52px;
}
</style>
<select class="insend_required cnv-f__input insend_required cnv-f__select" name="properties[pain]" placeholder="What troubles you the most?" style="height: 56px;margin-top: 20px;width: 425px;color: #9A9A9A;" id="cnv-f-input" >
<option style="color: #9A9A9A;">What gives you the most trouble?</option>
<option value='Developing the marketing strategy'>Developing the marketing strategy</option>
<option value='Collecting the subscriber data'>Collecting the subscriber data</option>
<option value='Collecting the subscriber data'>Collecting the subscriber data</option>
<option value='Increasing repeat sales and loyalty'>Increasing repeat sales and loyalty</option>
<option value='Segmenting my mailing lists'>Segmenting my mailing lists</option>
<option value='Creating email content'>Creating email content</option>
<option value='Crafting email designs and layouts'>Crafting email designs and layouts</option>
<option value='Analyzing and reporting the results'>Analyzing and reporting the results</option>
<option value='Enhancing email marketing'>Enhancing email marketing</option>
<option value='Planning out email newsletters'>Planning out email newsletters</option>
</select>
- Make sure that you've added the name of your property in the code in the line:
<select class="insend_required cnv-f__input insend_required cnv-f__select" name="properties[pain]" placeholder="What troubles you the most?" style="height: 56px;margin-top: 20px;width: 425px;color: #9A9A9A;" id="cnv-f-input" >
Next, edit the question that users will see by changing placeholder 'What troubles you the most?'. That's what your clients will see.
- After that, edit the answer options by inserting your options. What you write in value will be displayed in the InSend client card in a property. And the inscription after value, before is what will appear to customers in your web form.
<option value='Planning out email newsletters'>Planning out email newsletters</option>
You can also edit the design by changing the options inside the <style>
You're done! Our dropdown web form survey is ready to use. Don't forget to preview and try filling it out yourself.