How can i add new fields in my form ?

10 replies · opened Oct 3, 2020

AApoorv699Oct 3, 2020

<form class="row mb-0" id="landing-enquiry" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process"></div>
<div class="col-12 form-group mb-4">
<label>Name:</label>
<input type="text" name="template-contactform-name" id="template-contactform-name" class="form-control form-control-lg required" value="" placeholder="John Doe">
</div>
<div class="col-12 form-group mb-4">
<label>Company Name:</label>
<input type="text" name="landing-enquiry-company-name" id="landing-enquiry-company-name" class="form-control form-control-lg required" value="" placeholder="Company Name">
</div>
<div class="col-12 form-group mb-4">
<label>Number Of Employees:</label>
<select class="custom-select required" name="template-contactform-input[]" id="template-contactform-input[]" >
<option value="0-10">0-10</option>
<option value="11-100">11-100</option>
<option value="100-500">100-500</option>
<option value="500">500+</option>
</select>

</div>
<div class="col-12 form-group mb-4">
<label>Email:</label>
<input type="email" name="template-contactform-email" id="template-contactform-email" class="form-control form-control-lg required" value="" placeholder="user@company.com">
</div>
<div class="col-12 form-group mb-4">
<label>Phone:</label><br>
<div class="input-group input-group-lg">
<select class="custom-select required" name="template-contactform-input[]" id="template-contactform-input[]" style="max-width: 80px;">
<option value="+91">+91</option>
<option value="+44">+44</option>
<option value="+1">+1</option>
<option value="+66">+66</option>
<option value="+62">+62</option>
<option value="+61">+61</option>
<option value="+852">+852</option>
<option value="+65">+61</option>
<option value="+33">+61</option>
<option value="+49">+49</option>
</select>
<input type="text" name="landing-enquiry-phone" id="landing-enquiry-phone" class="form-control form-control-lg required" value="" placeholder="99XXXXXXXXX">
</div>
</div>

<div class="col-12">
<button type="submit" name="landing-enquiry-submit" class="btn btn-block text-white bg-color rounded-lg py-3 font-weight-semibold text-uppercase mt-2">Contact Us</button>
</div>

											&lt;input type="hidden" name="prefix" value="landing-enquiry-"&gt;
										&lt;/form&gt;

Please check this is giving me bot detected error

AApoorv699Oct 3, 2020

I want to add these Fields

Name
Company Name
Number Of Employees
Phone Number
Email

SSemicolon WebSTAFFOct 3, 2020

Hello,

You will simply need to follow the Basic HTML rules to add your own Form Fields: https://www.w3schools.com/html/html_forms.asp . However, make sure the Code Structure follows the Default Code Structure provided with Canvas.

Simply change the name Attribute of the Input according to your needs. And make sure that it matches the prefix Value: http://docs.semicolonweb.com/docs/forms/fields/ .

So if you want to receive the Form Data in your Emails as Company Name and your prefix is set to template-contactform-, then your Form Input's name attribute will be template-contactform-company-name . All in lowercase and separated by a - Dash.

And do not remove the Bot Check Field that is already present in the Forms. This is to prevent Bot Spams.

That's it! You just need to edit the HTML. Our Intelligent PHP Form Processor will do the rest of the work.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AApoorv699Oct 3, 2020

Do i only have to change the name attribute or i have to change the ID as well?

AApoorv699Oct 3, 2020

<div class="col-12 form-group mb-4">
<label>Number Of Employees:</label>
<select class="custom-select required" name="template-contactform-input[]" id="template-contactform-input[]" >
<option value="0-10">0-10</option>
<option value="11-100">11-100</option>
<option value="100-500">100-500</option>
<option value="500">500+</option>
</select>

Also for these select values Name and Id will change ?
or i just need to put

template-contactform-input[]

the same name and ID for every select group

SSemicolon WebSTAFFOct 3, 2020

Hello,

You can change the IDs as well. Each Form Input should have a unique name Attribute Value, else its value will get overwritten.

And use [] only for Multiple Values. For Single Values, you can simply use template-contactform-employees.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AApoorv699Oct 3, 2020

I did that now i am getting " Bot Detected! Form could not be processed! Please Try Again! " error on form

Code :

<form class="row mb-0" id="landing-enquiry" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process"></div>
<div class="col-12 form-group mb-4">
<label>Name:</label>
<input type="text" name="template-contactform-name" id="template-contactform-name" class="form-control form-control-lg required" value="" placeholder="John Doe">
</div>
<div class="col-12 form-group mb-4">
<label>Company Name:</label>
<input type="text" name="template-contactform-company-name" id="template-contactform-company-name" class="form-control form-control-lg required" value="" placeholder="Company Name">
</div>
<div class="col-12 form-group mb-4">
<label>Number Of Employees:</label>
<select class="custom-select required" name="template-contactform-employees" id="template-contactform-input[]" >
<option value="0-10">0-10</option>
<option value="11-100">11-100</option>
<option value="100-500">100-500</option>
<option value="500">500+</option>
</select>

</div>
<div class="col-12 form-group mb-4">
<label>Email:</label>
<input type="email" name="template-contactform-email" id="template-contactform-email" class="form-control form-control-lg required" value="" placeholder="user@company.com">
</div>
<div class="col-12 form-group mb-4">
<label>Phone:</label><br>
<div class="input-group input-group-lg">
<select class="custom-select required" name="template-contactform-id" id="template-contactform-input[]" style="max-width: 80px;">
<option value="+91">+91</option>
<option value="+44">+44</option>
<option value="+1">+1</option>
<option value="+66">+66</option>
<option value="+62">+62</option>
<option value="+61">+61</option>
<option value="+852">+852</option>
<option value="+65">+61</option>
<option value="+33">+61</option>
<option value="+49">+49</option>
</select>
<input type="text" name="template-contactform-contactnumber" id="template-contactform-contactnumber" class="form-control form-control-lg required" value="" placeholder="99XXXXXXXXX">
</div>
</div>

<div class="col-12">
<button type="submit" name="landing-enquiry-submit" class="btn btn-block text-white bg-color rounded-lg py-3 font-weight-semibold text-uppercase mt-2">Contact Us</button>
</div>

											&lt;input type="hidden" name="prefix" value="landing-enquiry-"&gt;
										&lt;/form&gt;
SSemicolon WebSTAFFOct 3, 2020

Hello,

We have already mentioned in our previous replies to not remove the Bot Check field. Make sure that you follow the Complete Setup Instructions provided here: http://docs.semicolonweb.com/docs/forms/form-setup/ .

And add this code inside your Form:
[ch_pre]

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AApoorv699Oct 3, 2020

I am getting same error even after putting the bot detection. Please check

code:
<form class="row mb-0" id="template-contactform" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process"></div>

<div class="col-12 form-group mb-4">
<label for="template-contactform-name">Name:</label>
<input type="text" name="template-contactform-name" id="template-contactform-name" class="form-control form-control-lg required" value="" placeholder="John Doe">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-company-name">Company Name:</label>
<input type="text" name="template-contactform-company-name" id="template-contactform-company-name" class="form-control form-control-lg required" value="" placeholder="Company Name">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-employees">Number Of Employees:</label>
<select class="custom-select required" name="template-contactform-employees" id="template-contactform-input[]" >
<option value="0-10">0-10</option>
<option value="11-100">11-100</option>
<option value="100-500">100-500</option>
<option value="500">500+</option>
</select>

</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-email">Email:</label>
<input type="email" name="template-contactform-email" id="template-contactform-email" class="form-control form-control-lg required" value="" placeholder="user@company.com">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-id">Phone:</label><br>
<div class="input-group input-group-lg">
<select class="custom-select required" name="template-contactform-id" id="template-contactform-input[]" style="max-width: 80px;">
<option value="+91">+91</option>
<option value="+44">+44</option>
<option value="+1">+1</option>
<option value="+66">+66</option>
<option value="+62">+62</option>
<option value="+61">+61</option>
<option value="+852">+852</option>
<option value="+65">+61</option>
<option value="+33">+61</option>
<option value="+49">+49</option>
</select>
<input type="text" name="template-contactform-contactnumber" id="template-contactform-contactnumber" class="form-control form-control-lg required" value="" placeholder="99XXXXXXXXX">
</div>
</div>
<div class="col-12 form-group d-none">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>

<div class="col-12">
<button type="submit" name="landing-enquiry-submit" class="btn btn-block text-white bg-color rounded-lg py-3 font-weight-semibold text-uppercase mt-2">Contact Us</button>
</div>

											&lt;input type="hidden" name="prefix" value="landing-enquiry-"&gt;
										&lt;/form&gt;
AApoorv699Oct 3, 2020

I am getting same error even after putting the bot detection. Please check

code:
<form class="row mb-0" id="template-contactform" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process"></div>

<div class="col-12 form-group mb-4">
<label for="template-contactform-name">Name:</label>
<input type="text" name="template-contactform-name" id="template-contactform-name" class="form-control form-control-lg required" value="" placeholder="John Doe">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-company-name">Company Name:</label>
<input type="text" name="template-contactform-company-name" id="template-contactform-company-name" class="form-control form-control-lg required" value="" placeholder="Company Name">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-employees">Number Of Employees:</label>
<select class="custom-select required" name="template-contactform-employees" id="template-contactform-input[]" >
<option value="0-10">0-10</option>
<option value="11-100">11-100</option>
<option value="100-500">100-500</option>
<option value="500">500+</option>
</select>

</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-email">Email:</label>
<input type="email" name="template-contactform-email" id="template-contactform-email" class="form-control form-control-lg required" value="" placeholder="user@company.com">
</div>
<div class="col-12 form-group mb-4">
<label for="template-contactform-id">Phone:</label><br>
<div class="input-group input-group-lg">
<select class="custom-select required" name="template-contactform-id" id="template-contactform-input[]" style="max-width: 80px;">
<option value="+91">+91</option>
<option value="+44">+44</option>
<option value="+1">+1</option>
<option value="+66">+66</option>
<option value="+62">+62</option>
<option value="+61">+61</option>
<option value="+852">+852</option>
<option value="+65">+61</option>
<option value="+33">+61</option>
<option value="+49">+49</option>
</select>
<input type="text" name="template-contactform-contactnumber" id="template-contactform-contactnumber" class="form-control form-control-lg required" value="" placeholder="99XXXXXXXXX">
</div>
</div>
<div class="col-12 form-group d-none">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>

<div class="col-12">
<button type="submit" name="landing-enquiry-submit" class="btn btn-block text-white bg-color rounded-lg py-3 font-weight-semibold text-uppercase mt-2">Contact Us</button>
</div>

											&lt;input type="hidden" name="prefix" value="landing-enquiry-"&gt;
										&lt;/form&gt;
SSemicolon WebSTAFFOct 3, 2020

Hello,

This is because all your Form Input's name Values are staring from template-contactform- but your defined prefix value is landing-enquiry-. Both should be same and all the Input name Attribute Values in your Form should have the defined prefix for better form security and is clearly explained in the Documentations.

Make sure that you are double checking the codes and that it matches the Documentation Instructions so that you are not facing any unexpected issues.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard