Nwlapcug.com


Come fare i moduli di contatto in FancyBox

Come fare i moduli di contatto in FancyBox


FancyBox è uno strumento progettato per essere utilizzato dagli sviluppatori Web per visualizzare immagini e contenuto HTML in scatole di stile Mac che galleggiano sopra una pagina Web. È possibile utilizzare FancyBox per lavorare con filmati SWF e Iframes e personalizzarlo tramite impostazioni e CSS. Moduli di contatto sono utili quando si desidera ascoltare dai vostri utenti. È possibile chiedere feedback, consentire agli utenti di inviare richieste di assistenza o semplicemente ricevere diversi messaggi con suggerimenti che aiutano a crescere il tuo sito Web.

Istruzioni

1

Aprire il file "header. php" nella cartella del tuo tema WordPress con qualsiasi editor di testo. Incollare il codice tra la "< head >" e "< / head >" Tag:

< script type = "text/javascript" src = "& lt; / script" rel = "nofollow" target = blank"> http://code.jquery.com/jquery-1.4.1.min.js&quot;>&lt;/script>
< link rel = "stylesheet" type = "text/css" href = "<? php bloginfo('template_directory');? > / fancybox/jquery.fancybox-1.3.0.css" media = "screen" / >
< script type = "text/javascript" src = "<? php bloginfo('template_directory');? > / fancybox/jquery.fancybox-1.3.0.pack.js" >< / script >
< script type = "text/javascript" >
Web {
$("a.iframeFancybox1").fancybox({
'larghezza': 600,

'height' : 650,
'overlayOpacity' : '0.4',
'overlayColor' : '#000',
'hideOnContentClick' : false,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
&lt;/script>

Consente di inizializzare lo script FancyBox e relativi file di riferimento.

2

Creare un modello di pagina da utilizzare per la tua pagina di modulo di contatto. Questo è come appare una pagina di modello di base:

<? php
/
Nome modello: pianura pagina
/
? >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd & quot; >
< html xmlns = "http://www.w3.org/1999/xhtml & quot; XML: lang = "it" lang = "it" >
< head >
< meta http-equiv = "Content-type" content = "text/html; charset = utf-8 "/ >
< nome meta = "MSSmartTagsPreventParsing" content = "true" / >
< meta http-equiv = "Imagetoolbar" content = "No" / >
< title > My Form titolo < / title >
< style type = "text/css" >
Body {font-size: 13px;}
< / stile >
< link rel = 'stylesheet' id = 'gforms_css-css' href ='<? php bloginfo('url');? > / wp-content/plugins/gravityforms/css/forms.css?ver=3.0.1' tipo ' text/css' media = = 'tutti' / >
< script type = ' text/javascript' src ='<? php bloginfo('stylesheet_directory');? > / includes/js/jquery-142.js?ver=1.4.1' >< / script >
< script type = ' text/javascript' src ='<? php bloginfo('url');? > / wp-content/plugins/gravityforms/js/conditional_logic.js?ver=1.3.13.1' >< / script >
< / head >
< corpo >
<? php se (have_posts()): mentre (have_posts()): the_post ();? >
<? php the_content ('leggere piu');? >
<? php endwhile; endif;? >
<? php wp_footer();? >
< / body >
< / html >

È possibile utilizzare questo codice o creare la tua pagina di modello. Si noti che è necessario includere il "<? php wp_footer();? >" tag per caricare correttamente lo script di logica condizionale di forme di gravità.

3

Vai al pannello di amministrazione di WordPress e aggiungere una nuova pagina al tuo sito WordPress Web. Selezionare "normale pagina" nella casella a discesa "Modello". Includere il contenuto e la forma nell'editor contenuto e applicare il modello di pagina.

4

Aprire la pagina Web che si desidera aggiungere il modulo di contatto a con qualsiasi editor di testo. Aggiungere un collegamento per il modulo di contatto come questo:

< a href = "http://www.yourdomain.com/contact-form-page/ & quot; classe = "iframeFancybox1" >< h3 > Contact Us < / h3 >< /a >

Sostituire "http://www.yourdomain.com/contact-form-page/ & quot; con il percorso alla vostra pagina di modulo. È inoltre possibile sostituire "Contattaci" con il proprio testo. Quando un utente fa clic sul collegamento, lo script FancyBox è attivato e il form viene visualizzato sullo schermo il propria.

Consigli & Avvertenze

  • Non è necessario includere tutti gli elementi di navigazione nella pagina modulo di contatto.