font and indention in eform

110 Posts

tintincute Reply #1, 15 years, 1 month ago

how to change the font in my code where user type on the text area.
can I add a style here?

I also have problems in the selection site, where you can check the box. If you can see, in the question "Which sweets do you like" I would like to have the "do you like" be in the next line but the same indentation. I can’t figure out how to do it...

Thanks

<div style="background-color:#CCDFED">
<form method="post" action="[~[*id*]~]">
    <input type="hidden" name="formid" value="registrationForm" />
	<table>
	

	<tr>
        <td><label for="reasons" style="margin:0.5em">Reason for contacting us:</label></td>
        <td><textarea cols="60" rows="3" name="reasons" eform="Reasons::1"></textarea></td>
    </tr>
          
    
    
    <tr>      
         <td><label for="products" style="margin:0.5em">Which sweets </label>
        <label style="margin:0.5em">do you like:</label>     
         <td>       
            <input type="checkbox" name="products[]" value="icecream" eform="Sweets::1"/>	Ice Cream <br/>
            <input type="checkbox" name="products[]" value="bananasplit"  />	bananasplit<br/>            
        </td>
    </tr>  
    
    
    <tr>
        <td><label for="how" style="margin:0.5em">How did you hear about us:</label></td>
        <td>
       <select name="how" style="width:200px" eform="How::1" >
       <option value="web_search">Web search</option>       
       <option value="links">Links</option>
       <option value="friends">Friends</option> 
       <option value="word_of_mouth">Word of Mouth</option>     
       </select>
       </td>
    </tr>   
</table>
    
</form>
</div>

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 15 years, 1 month ago

You can arrange all of that using CSS.

I must add, however, that sometimes when a precise placement of prompts and fields is required, a table is much more reliable than fighting with trying to get pixel-perfect positioning.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

110 Posts

tintincute Reply #3, 15 years, 1 month ago

thanks sottwell

I’m just wondering if I can put the e-Form directly to the page without clicking on a link?

Is that possible?

This is what I mean...

I have a main link let’s say

Contact Form --> (if u click on the contact form it should show the eForm where the user should fill up) but with a nested link let’s say "About Yourself Form"

My case now is:

Contact Form (and if you click on the contact form, I created that nested link "About Yourself Form" and on this site there is a link which I write "Please click here" then it will open the eForm.)

Is there any other way how to do the first approach I mentioned?

Thanks

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 15 years, 1 month ago

I’m sorry, I don’t understand what you are trying to do. You can put the eForm snippet wherever you want the form to appear. If you have a link that leads to a page where you want the form, just put the eForm snippet tags in that resource’s content.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

110 Posts

tintincute Reply #5, 15 years, 1 month ago

hi sottwell
what I did was, I created it under Chunks not in the Snippets.

Under Chunks I have this:

"ask-yourself-confirm-mail"
"ask-yourself-form"
"ask-yourself-mail"
"ask-yourself-thanks"

Under the "ask-yourself-form" this is what you can see:

<div style="background-color:#CCDFED">
<form method="post" action="[~[*id*]~]">
    <input type="hidden" name="formid" value="registrationForm" />
	<table>
	

	<tr>
        <td><label for="reasons" style="margin:0.5em">Reason for contacting us:</label></td>
        <td><textarea cols="60" rows="3" name="reasons" eform="Reasons::1"></textarea></td>
    </tr>
          
    
    
    <tr>      
         <td><label for="products" style="margin:0.5em">Which sweets </label>
        <label style="margin:0.5em">do you like:</label>     
         <td>       
            <input type="checkbox" name="products[]" value="icecream" eform="Sweets::1"/>	Ice Cream <br/>
            <input type="checkbox" name="products[]" value="bananasplit"  />	bananasplit<br/>            
        </td>
    </tr>  
    
    
    <tr>
        <td><label for="how" style="margin:0.5em">How did you hear about us:</label></td>
        <td>
       <select name="how" style="width:200px" eform="How::1" >
       <option value="web_search">Web search</option>       
       <option value="links">Links</option>
       <option value="friends">Friends</option> 
       <option value="word_of_mouth">Word of Mouth</option>     
       </select>
       </td>
    </tr>   
</table>
    
</form>
</div>

Then I created that resource "Contact Form" as the main link & the nested link is "About Yourself Form"

But then under the "About Yourself Form" I can’t see the eForm itself because I created the link here to end up like this:

Please click here to fill up the form <a href="http://www.website.com/askyourselfform"> "About Yourself Form"

And then I created another resource where I inserted this code.:

[!eForm? &formid=`registrationForm` &to=`[email protected]` &tpl=`"ask-yourself-form" ` &report=`"ask-yourself-mail"` &thankyou=`"ask-yourself-thanks"` &subject=`About Yourself Form` &vericode=`1` &automessage=`ask-yourself-mail` !]

What I wanted is that if the user will click on the "About Yourself Form" it will show the eForm right away. How could that be possible?

Thanks hope it’s clear now

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 15 years, 1 month ago

That’s easy. A bit of Javascript is all you need. Check out the contact form on my site for one way to do that. Just about any of the overlay plugins for JQuery would do the job; I get a kick out of the silly bouncy slide-down effect I’ve chosen. Make sure that the eForm snippets each have have a unique formId, and you can have all the eForm forms on one page that you like, and have the javascript show/hide them as desired.

If you want to get really fancy, you can use eForm all by itself on a resource with no template to act as an AJAX request processor. I’ve done it on a number of sites; I just haven’t gotten around to converting my site’s contact form to AJAX yet.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

110 Posts

tintincute Reply #7, 15 years, 1 month ago

is there like a tutorial for this sottwell?
Would appreciate it very much if you have a recommendation for a tutorial for this
Thank you

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 15 years, 1 month ago

Well, it’s not really all that complex. First, get your eform working as desired openly on the page where you want it to appear. Then choose your preferred Javascript overlay, slider, or whatever kind of show/hide functionality you want. Enclose the form in the element tags the Javascript wants, add the link or button according to the Javascript’s usage instructions, and you’re all set.

This is what I used on my site; you can adjust the action of the script to behave in different ways. http://inspectelement.com/tutorials/animate-a-contact-us-slide-out-area-using-jquery/

Basically, all it does is to take an existing functional form, add a link/button, and change the height of the form’s containing element from 0 to whatever height you specify when the button is clicked, and back to 0 again, using the JQuery toggle() function. This way the form is available to anyone without javascript, including screen readers.

I did add a few extra bits to the javascript to cause the form block to display if there were errors or other messages from eForm.

$(document).ready(function(){ 
    $("#contactArea").css('height', '0px');
    $("#cancel").click( 
        function() { 
            $("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
        }
    );
    $("a.contact").toggle( 
    	function () { 
    		$("#contactArea").animate({height: "280px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}) 
        }, 
        function () { 
    		$("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})  
    	} 
    ); 
    if($("div.errors").text() != '') {  $("#contactArea").animate({height: "330px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}); 
    } 
    if($("div.errors").text() == '') { $("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
    }        
});

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org