Web form with no required fields

CMS > Content Modules Forms
1

Hello,

I hope everyone is doing well! I am trying to create an ‘anonymous’ form for a client in which visitors can fill out a simple multi-line text field, select a topic from a drop-down, and then submit. The client would prefer that no fields are required. I know that the Treepl CMS web forms require an email for form submissions, but we would like to find a way to make this optional. I submitted a request to Treepl Support to see if there is a way to do this, and I received a response that it’s possible to ‘create hidden email address field and add there some dummy email address as a value’, but I didn’t receive any instruction for how to accomplish this, so I’m hoping someone can help.

I tried to create a form and auto-populate the email address field with placeholder="test@hiddenemail.com" and then just wrap the field and label in a div that is hidden, but I still get an error that the email field is not filled in when I submit the form. It seems the placeholder just inserts a label, but doesn’t actually attribute a value to the field. Can anyone share a way to add some dummy email address as a value so I can bypass the required field for this form? The reason my client would like the form to be anonymous is because they would like visitors to feel free to share their opinion of the business with no worries about identifying themselves as a client.

I appreciate any help anyone can offer here!

Thank you,

  • Ryan
2

Hello StudioRTP. Can you try this :
<input type="hiden" id="Email" name="Email" value="some emailaddress">?

2 Likes
3

Thank you so much @Denis.l!! This worked perfectly and is exactly what we needed. The email field displays on the form submission results page, but I don’t think that will be an issue in this case and if it is, I’ll just ditch the results from the success page for that form and we’ll be all set. Thank you so much for your help! I don’t know why I didn’t think to try value= instead of placeholder= Duh!

Thank you again for your time and help here!

  • Ryan
4

To hide an output from your submission results you could do something like this:

{% for fsd in this.formSubmissionData.fields.all %}
    {% unless fsd.value == 'some emailaddress' %}
        <div>{{fsd.name}}: {{fsd.value}}</div>
    {% endunless %}
{% endfor %}

Replace some emailaddress with the dummy value you used.

1 Like
5

Thank you Adam (as always!). I tried to add that bit of liquid to the Form Submission Results System Page and it looks like I’m getting duplicates of the form submission information on the results page after submitting a form. Is that supposed to replace some of the code on that page or be added to the existing code? Sorry, I’m not quite as well versed with Liquid as I’d like to be and I want to make sure I don’t screw the system page up for the other web forms. Thank you again for help!

6

Yes, you’d need to reformat it for your particular setup.
Paste you current code here and I can advise further.

7

Thank you Adam. I really do appreciate your time and efforts. The code I currently have on the Form Submission Results System Page is the default (I believe - this was a migrated project from BC and the Treepl team helped with the migration). Here is the code that currently ‘lives’ on that system page:

<div class="system_page">
	{% if formSubmissionData.error >= 1 %}
	    <svg class="system_svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 294.843 294.843" style="enable-background:new 0 0 294.843 294.843;" xml:space="preserve">
			<g>
				<path d="M147.421,0C66.133,0,0,66.133,0,147.421s66.133,147.421,147.421,147.421c38.287,0,74.567-14.609,102.159-41.136
					c2.389-2.296,2.464-6.095,0.167-8.483c-2.295-2.388-6.093-2.464-8.483-0.167c-25.345,24.367-58.672,37.786-93.842,37.786
					C72.75,282.843,12,222.093,12,147.421S72.75,12,147.421,12s135.421,60.75,135.421,135.421c0,16.842-3.052,33.273-9.071,48.835
					c-1.195,3.091,0.341,6.565,3.432,7.761c3.092,1.193,6.565-0.341,7.761-3.432c6.555-16.949,9.879-34.836,9.879-53.165
					C294.843,66.133,228.71,0,147.421,0z"/>
				<path d="M167.619,160.134c-2.37-2.319-6.168-2.277-8.485,0.09c-2.318,2.368-2.277,6.167,0.09,8.485l47.236,46.236
					c1.168,1.143,2.683,1.712,4.197,1.712c1.557,0,3.113-0.603,4.288-1.803c2.318-2.368,2.277-6.167-0.09-8.485L167.619,160.134z"/>
				<path d="M125.178,133.663c1.171,1.171,2.707,1.757,4.243,1.757s3.071-0.586,4.243-1.757c2.343-2.343,2.343-6.142,0-8.485
					L88.428,79.942c-2.343-2.343-6.143-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L125.178,133.663z"/>
				<path d="M214.9,79.942c-2.343-2.343-6.143-2.343-8.485,0L79.942,206.415c-2.343,2.343-2.343,6.142,0,8.485
					c1.171,1.171,2.707,1.757,4.243,1.757s3.071-0.586,4.243-1.757L214.9,88.428C217.243,86.084,217.243,82.286,214.9,79.942z"/>
			</g>
		</svg>
	    <h1 class="system_title">Error</h1>
		<p class="system_text">{{formSubmissionData.errormessages}}</p>
	{% else %}
    	<svg class="system_svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249.425 249.425" style="enable-background:new 0 0 249.425 249.425;" xml:space="preserve">
    		<g>
    			<path d="M206.79,81.505c-3.313,0-6,2.687-6,6v149.919H12V48.635h146.792c3.314,0,6-2.687,6-6s-2.686-6-6-6H6c-3.313,0-6,2.687-6,6
    				v200.789c0,3.313,2.687,6,6,6h200.79c3.313,0,6-2.687,6-6V87.505C212.79,84.192,210.103,81.505,206.79,81.505z"/>
    			<path d="M247.667,1.758c-2.343-2.343-6.142-2.345-8.485,0L80.416,160.523L41.023,121.13c-2.343-2.344-6.143-2.344-8.485,0
    				c-2.343,2.343-2.343,6.142,0,8.484l43.636,43.636c1.171,1.172,2.707,1.758,4.243,1.758s3.071-0.586,4.243-1.758L247.667,10.243
    				C250.011,7.9,250.011,4.101,247.667,1.758z"/>
    		</g>
    	</svg>
    	<h1 class="system_title">Thank you!</h1>
    	<p class="system_text">Your request is successfully sent. We will get back to you soon!</p>
    	<h2 class="system_subtitle">Summary:</h2>
    	<table  class="system_table" cellpadding="0" cellspacing="0">
    	    

    	    
    	    
    	    
    	    {% assign allFields = formSubmissionData.fields.all %}
        	{% for item in allFields %} {% assign index = forloop.index -1 %}
        	
        	
        	
        	
    
            	{% assign fieldName = allFields[index].name %}
            	{% assign fieldValue = allFields[index].value %}
        		<tr>
        			<td>
        				{{fieldName}}
        			</td>
        			<td>
        				{{fieldValue}}
        			</td>
        		</tr>
    		{% endfor %}
    	</table>
	{% endif %}
</div>

Here is the code for the web form itself including the hidden required email field:

<form class="contact-form" action="/forms/cases.ashx?form=anonymous_contact_form" name="anonymous_contact_form"  method="post" enctype="multipart/form-data">

	

		<input class="form-control" type="hidden" id="Email" name="Email" value="email@hiddenfield.com">


	
	
	<div class="form-group" >
		
		<label for="EmailAddress">Email Address</label>

		<input class="form-control" type="text" id="EmailAddress" name="EmailAddress" >

		

	</div>
	
	
	
	<div class="form-group">

		<label for="Topic">Topic</label>

		<select name="Topic" id="Topic" >

		    <option value="-- Please select --">-- Please select --</option>

		    <option value="Topic 1">Topic 1</option>

		    <option value="Topic 2">Topic 2</option>

		    <option value="Topic 3">Topic 3</option>

		    
		</select>

	</div>
	
	
	
	
	<div class="form-group form-group-fw">

		<label for="Notes">How Can We Help</label>

		<textarea class="form-control" id="Notes" name="Notes" ></textarea>

	</div>
	
	

	<script>

	grecaptcha.ready(function() {

		grecaptcha.execute('6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17', { action: 'general_form_{{this.Alias | replace: "-","_"}}'}).then(function(token)

{document.querySelector('.g-recaptcha-response-v3-{{this.Alias}}').value = token;});	});

	</script>

<input type="hidden" class="g-recaptcha-response-v3-{{this.Alias}}" name="g-recaptcha-response-v3">	
	
	<div class="form-group">

		<button type="submit" class="btn btn-default">Submit</button>

	</div>


</form>

Does this help provide what you need? If not, I can send over whatever you need. Thank you again, I know your time is valuable!

  • Ryan
8

Perfect. Ok, so where the table row is, for the submission results, wrap that in the unless condition, like so:

{% unless fieldValue == 'email@hiddenfield.com' %}
<tr>
    <td>
        {{fieldName}}
    </td>
    <td>
        {{fieldValue}}
    </td>
</tr>
{% endunless %}

That should do the trick and it won’t interfer with other form submissions as the email address value won’t match for those submissions.

9

Oh Adam - you’re the best! I just made the adjustment you recommended here and submitted a test on the ‘anonymous’ form and it worked just as you indicated. Thank you again - you’re the best! One of these days I’m going to find a way to pay it forward!! I owe you for several bailouts!!

results
results1126×628 40.9 KB

Thank you,

  • Ryan
10

No problem Ryan. You’re welcome.
Just continue using and supporting Treepl’s growth and I’ll be happy :slight_smile:

2 Likes
11

Oh yeah, 100%. I’m not going anywhere - I’m in it for the long haul and will bring anyone along for the ride that I can!

Thank you Adam,

  • Ryan
1 Like